SCSS and JS compilation/bundling

Theme Redone uses a combination of Gulp, SASS, EsBuild, and WebPack to compile and bundle CSS and JS. Here’s how it’s set up.

Gulp as a task runner
We use Gulp 4 to define and run various front-end and back-end tasks such as compilation, bundling, minification, CSS injecting and page refreshing (BrowserSync), error notifications, etc.
SASS (gulp-sass)
SCSS front-end and back-end compilation and minification.
WebPack (^5.0.0)
We use WebPack to compile back-end Javascript and JSX code required for the custom blocks.
EsBuild
EsBuild is used to compile all the front-end Javascript. By default, theme redone has support (optional) for compiling and using these libraries on the front-end: React 18, Svelte, Vue, and Petite-Vue.

The order in which CSS/JS files are enqueued (included on front-end)

Theme Redone is a modular framework. Some CSS/JS files are included globally, and then, some are code-split (created for a specific block, and included only if that particular block is used on the page). This helps ship less code and improves site loading speed and Lighthouse results.

Global scripts and stylesheets

These are included before everything else and here we have scripts and styles responsible for the back-end and for front-end.

back-end

[theme-root]/prod/admin-style.css – Responsible for CSS overwrites and writing custom admin stuff.
[theme-root]/prod/blocks-backend.css – Responsible for the looks of the admin blocks admin UI
[theme-root]/prod/blocks.min.js – Responsible for the back-end (editor) logic of blocks

front-end

[theme-root]/prod/critical.css – Global critical CSS compiles to this file. (The file is not included via the <link rel="stylesheet" />.
PHP reads from it and outputs the CSS in a <style> tag in <head>). Above the fold CSS should be considered for this file (Header styles for example).
[theme-root]/prod/style.css – Global CSS compiles to this file
[theme-root]/prod/app.min.js– Global front-end JS compiles to this file

Code-split scripts and stylesheets

CSS and JS shared between multiple blocks (dependencies)

These are included right after the global scripts and styles.

Can be defined in each block’s model.json file

Let’s say we have 2 blocks (“block-a” and “block-b“) that use the same styles and scripts (that we don’t want to duplicate, and instead want to write in one place and include only once).

In each model.json of these 2 blocks, we can define their dependencies (shared styles and/or scripts). Like so.

[block-a]/model.json{"block_meta": {
    "BLOCK_REGISTER_NAME": "block-a",
    "BLOCK_TITLE": "Block A",
    ...
    "deps": {
      "css": ["shared-css-1", "shared-css-2"],
      "js": ["shared-js-1"]
    }
  },
  "attributes": {...}
}

[block-a]/model.json{"block_meta": {
    "BLOCK_REGISTER_NAME": "block-b",
    "BLOCK_TITLE": "Block B",
    ...
    "deps": {
      "css": ["shared-css-1"],
      "js": ["shared-js-1"]
    }
  },
  "attributes": {...}
}

Directories, where we would then create these files, would be:

[theme-root]/gutenberg/blocks_shared_css_and_js/css/ – Here we would create and write all the shared CSS files. So for the example above, we would create 2 files: shared-css-1.scss and shared-css-2.scss.
[theme-root]/gutenberg/blocks_shared_css_and_js/js/ – Here we would create and write all the shared js files. So for the example above, we would create 1 file: shared-js-1.js.

Note that the CSS must be written with the .scss extension and without “.min.scss” or something similar (the name should be the same as the name defined in model.json’s block_meta( shared-css-1.scss and shared-css-2.scss). Names are not important tho, we just need to follow this rule). The same rule applies to the js files. We wouldn’t create them as “some-file-name.min.js”. They need to end with only .js and need to have the same name as defined in the model.json’s block_meta.

Theme Redone’s backend code will figure out what files need to be included and will include them only once, and only if the blocks depending on them exist on the page.

Below we can see where these files would compile to.

[theme-root]/prod/blocks-shared/shared-css-1.min.css
[theme-root]/prod/blocks-shared/shared-css-2.min.css
[theme-root]/prod/blocks-shared/shared-js-1.min.js

Block-specific CSS and JS

These are included after everything else.

Each block will have two files: frontend.js and frontend.scss. In them, we would write CSS and JS needed only for the corresponding block.

If we use the same block multiple times on a page, its CSS and JS files would only be included once.

Blocks’ frontend.js and frontend.scss files would compile here:

[theme-root]/prod/block-specific/[block-name]/frontend.min.css
[theme-root]/prod/block-specific/[block-name]/frontend.min.js

Theme’s main CSS file

[theme-root]/style.css – Is used only for defining the theme meta. (Theme name, description, etc…).

npm/yarn commands

npm start / yarn start – to start the server with BrowserSync and watch for file changes
npm run build:dev / yarn run build:dev – to build everything without minification
npm run build:prod / yarn run build:prod – to build and minify everything

We are running all of this on NODE version 14.19.1.

Follow us to stay updated

Prev SVG Handling Next Debugging & Tracy

# To Top