Drupal core using PostCSS for development

In order to be able to use modern CSS features, we're using PostCSS for compiling creating CSS that is supported by some of the older browsers that are still supported.

Core Patch Contributor Workflow

At the time being, this only affects contributors making changes to the experimental Claro theme.

Pre-requisites

Before starting, ensure that you are using at least the latest LTS release of Node.js, which is available for your platform here. Follow the installer instructions to ensure Node.js is installed correctly. If you want to manage Node.js with a package manager, instructions are available here for many common package managers.

Once Node.js has been installed, we recommend Yarn (over NPM) for managing dependencies. Install Yarn either with the instructions here, or with NPM.

npm i -g yarn

Once finished installing Node.js and Yarn, navigate to the core/ directory and type yarn install to install all of the dependencies required to lint and build core JavaScript.

Working on core CSS

When developing core CSS locally you can use the watcher to make changes and have them compiled as you save.

cd core
yarn install
yarn run watch:css

This watcher will only watch changes in files with the .pcss.css extension.

Building core CSS

To build all CSS run yarn run build:css. This will create .css versions of the .pcss.css files.

If you want to only compile a specific file you can pass the --file flag.

yarn run build:css -- --file themes/seven/css/base/elements.pcss.css

Creating a core patch or merge request

Since drupal.org package management does not build CSS and we can't change our build process in a minor release, you will need to include the compiled files in any patches or merge requests submitted to drupal.org. Before creating a patch or a merge request, build core's CSS as above and then submit a patch or merge request which includes all the changes. The diff should include changes to .pcss.css and .css files.

Reviewing a core patch or merge request

Using PostCSS is optional. Drupal continues to accept patches that only change .css, as long as .pcss.css file is not present for the file being modified.

If [filename].pcss.css exists, it's important to check that a compiled [filename].css file is also present. It is also important to review the .pcss.css changes and then ensure that if you compile the .pcss.css files you end up with the same patch.