woocommerce/plugins/woocommerce-blocks/docs/contributors/css-build-system.md

CSS Build System

Table of contents

• Right-to-left
• Relevant files

CSS files are built with Webpack, which gathers all SCSS files in the app and processes them with SASS and some PostCSS plugins like Autoprefixer. The resulting stylesheets are merged into three files for the whole plugin:

• style.css: loaded in the editor and the frontend, it includes the basic styles needed for the blocks frontend.
• editor.css: only loaded in the editor, it includes styles only relevant to the block editor like specific editor components.
• vendors-style.css: loaded in the editor and the frontend of some blocks, it includes external stylesheets which are required by some blocks but are not part of our codebase.

Details on which stylesheets are included in each output file can be found in webpack-configs.js.

Right-to-left

All files described above are generated in a LTR version and a RTL version. The RTL version is generated automatically with @automattic/webpack-rtl-plugin and has a .rtl.css suffix at the end of the file name.

Relevant files

Webpack config is split between several files, some relevant ones for the CSS build system are:

• webpack.config.js: Top level webpack config.
  • bin/webpack-configs.js: Code for generating each build config. This most closely resembles a classic webpack config - if you're looking for something, start here.
    • bin/webpack-entries.js: Code for generating webpack entry definitions and mapping source files to entry points. If you're adding a new block or module to the build, start here.

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.