Webpack with PostCSS

E.Y.

Sep 28, 2020·3 min read

In my last blog, I explore the way to configure CSS Modules with Webpack. This time, we are looking at how to configure PostCSS with Webpack.

But as always, first, let’s figure out what is PostCSS.

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

So there are two concepts from here.

First it’s the PostCSS by itself, which is a Node.js module. And then it’s the rich PostCSS plugin system built on top of the tools. Thinking of it as webpack and webpack plugins system as a comparison.

How are these two working together? So the PostCSS itself will parse CSS into abstract syntax tree (just like webpack right?), and this AST will be passed through all the plugins defined, and AST is converted back to a string which can be put to a file. With the AST, You can do anything you want with CSS:

• postcss-html parsing styles in <style> tags of HTML-like files
• postcss-sass allows you to work with Sass.
• postcss-rtl combines both-directional (left-to-right and right-to-left) styles in one CSS file.
• stylelint is a modular stylesheet linter.
• postcss-sorting sorts the content of rules and at-rules.

You may note that some plugins can be counted as preprocessors and some are postprocessors. So it’s not accurate to just refer PostCSS as postprocessor. It can be either or both, depends on what plugin you use.

But this time, we are using the popular autoprefixer, which is a postprocessor. It is a plugin to help you write vendor prefixed rules automatically.

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

So above will be transformed to below. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.

::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

To configure it with webpack, we need the postcss-loader .

npm install --save-dev postcss-loader postcss autoprefixer

In webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

And create a postcss.config.js with:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

You can also configure the rules like:

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
           'css-loader',          {
            loader: 'postcss-loader',
            options: {
               plugins: () => [autoprefixer({ flexbox: "no-2009"    })]
}
          },
          'sass-loader'
        ]
      }
    ]
  }

Here, flexbox: "no-2009" will add prefixes only for final and IE versions of specification. You can check more rules here.

That’s pretty much it! Happy reading!