Skip to content

cybercase/postcss-loader

 
 

Repository files navigation

PostCSS for Webpack Build Status

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

Sponsored by Evil Martians

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: function {
        return [autoprefixer, csswring];
    }
}

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, csswring];
    }
}

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, csswring],
            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.

Since the function in postcss section is executed with the webpack loader-context, we can use the postcss-import callback onImport to tell webpack what files need to be watched.

var cssimport = require('postcss-import');
var autoprefixer = require('autoprefixer-core');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        // The context of this function is the webpack loader-context
        // see: http://webpack.github.io/docs/loaders.html#loader-context

        return [
            cssimport({
                // see postcss-import docs to learn about onImport callback
                // https://github.com/postcss/postcss-import

                onImport: function (files) {
                    files.forEach(this.addDependency);
                }.bind(this)
            }),
            autoprefixer
        ];
    }
}

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

About

PostCSS loader for webpack

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.9%
  • CSS 1.1%