postcss-loader

What is postcss-loader?

The postcss-loader npm package is a loader for webpack that allows you to use PostCSS to process CSS with JavaScript. It enables the use of PostCSS plugins to perform various operations on CSS files, such as autoprefixing, minification, and custom transformations.

What are postcss-loader's main functionalities?

Autoprefixing

Automatically adds vendor prefixes to CSS rules using values from Can I Use. It is useful for supporting multiple browser versions.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

CSS Minification

Optimizes and minifies CSS files to reduce file size and improve load times.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('cssnano')()
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

Custom Transformations

Applies custom transformations or future CSS features using PostCSS plugins.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-custom-properties')()
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

Other packages similar to postcss-loader

sass-loader

The sass-loader compiles Sass/SCSS files to CSS. It requires Node.js-style .sass/.scss files. Unlike postcss-loader, it's specifically designed for Sass pre-processing.

less-loader

The less-loader processes .less files and compiles them to CSS. It's similar to postcss-loader in that it transforms styles, but it's tailored for the Less pre-processor.

stylus-loader

This package is a webpack loader that compiles Stylus files to CSS. It's a pre-processor loader like sass-loader and less-loader, but for Stylus syntax.

README

PostCSS for Webpack

PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.

Usage

Set postcss section in webpack config:

var autoprefixer = require('autoprefixer-core');
var csswring     = require('csswring');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: [autoprefixer, csswring]
}

Now your CSS files requirements will be processed by selected PostCSS plugins:

var css = require('./file.css');
// => CSS after Autoprefixer and CSSWring

Plugins Packs

If you want to process different styles by different PostCSS plugins you can define plugin packs in postcss section and use them by ?pack=name parameter.

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.docs\.css$/,
                loader: "style-loader!css-loader!postcss-loader?pack=cleaner"
            },
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: {
        defaults: [autoprefixer, csswring],
        cleaner:  [autoprefixer({ browsers: [] })]
    }
}

Safe Mode

If you add ?safe=1 to requirement, PostCSS will try to correct any syntax error that it finds in the CSS. For example, it will parse a { as a {}.

var css = require('postcss?safe=1!./broken')