PostCSS and autoprefixing (postcss-loader)

Symfony 5.3 is backed by JoliCode.

PostCSS and autoprefixing (postcss-loader)

PostCSS is a CSS post-processing tool that can transform your CSS in a lot of cool ways, like autoprefixing, linting and more!

First enable it in webpack.config.js:

1
2
3
4
5
6
  // webpack.config.js

  Encore
      // ...
+     .enablePostCssLoader()
  ;

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you’re done!

Next, download any plugins you want, like autoprefixer:

1
$ yarn add autoprefixer --dev

Next, create a postcss.config.js file at the root of your project:

1
2
3
4
5
6
7
8
9
module.exports = {
    plugins: {
        // include whatever plugins you want
        // but make sure you install these via yarn or npm!

        // add browserslist config to package.json (see below)
        autoprefixer: {}
    }
}

That’s it! The postcss-loader will now be used for all CSS, Sass, etc files. You can also pass options to the postcss-loader by passing a callback:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  // webpack.config.js
+ const path = require('path');

  Encore
      // ...
+     .enablePostCssLoader((options) => {
+         options.postcssOptions = {
+             // the directory where the postcss.config.js file is stored
+             config: path.resolve(__dirname, 'sub-dir', 'custom.config.js'),
+         };
+     })
  ;

Adding browserslist to package.json

The autoprefixer (and many other tools) need to know what browsers you want to support. The best-practice is to configure this directly in your package.json (so that all the tools can read this):

1
2
3
4
5
  {
+  "browserslist": [
+    "defaults"
+  ]
  }

The defaults option is recommended for most users and would be equivalent to the following browserslist:

1
2
3
4
5
6
7
8
  {
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead"
+  ]
  }

See browserslist for more details on the syntax.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.