Package Exports

postcss-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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');
var precss      = require('precss');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [autoprefixer, precss];
    }
}

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

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

Note that the context of this function

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer, precss];
    }
}

will be set to the webpack loader-context. If there is the need, this will let you access to webpack loaders API.

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: function () {
        return {
            defaults: [autoprefixer, precss],
            cleaner:  [autoprefixer({ browsers: [] })]
        };
    }
}

Integration with postcss-import

When using postcss-import plugin, you may want to tell webpack about dependencies coming from your @import directives. For example: in watch mode, to enable recompile on change.

Here is a simple way to let know postcss-import to pass files to webpack:

var postcssImport = require('postcss-import');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function (webpack) {
        return [
            postcssImport({
                addDependencyTo: webpack
            })
        ];
    }
}

JS Styles

If you want to process styles written in JavaScript you can use the postcss-js parser.

{
    test:   /\.style.js$/,
    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js"
    // Or using Babel
    // loader: "style-loader!css-loader!postcss-loader?parser=postcss-js!babel"
}

Or use can use even ES6 in JS styles by Babel:

{
    test:   /\.style.js$/,
    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js!babel"
}

Custom Syntaxes

PostCSS can transforms styles in any syntax, not only in CSS. There are 3 parameters to control syntax:

syntax accepts module name with parse and stringify function.
parser accepts module name with input parser function.
stringifier accepts module name with output stringifier function.

For example, you can use Safe Parser to find and fix any CSS errors:

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