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')

Source Maps

If you set the sourceMap option by adding ?sourceMap to the requirement, PostCSS creates a source map referring back to its input, and applies this to source maps from previous loaders if they are available.

loaders: [{
  loader: "css?sourceMap!postcss?sourceMap",
  ...
}]