diff --git a/README.md b/README.md index 9848587f..2a6cc714 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,43 @@ module.exports = { } ``` +## Plugins Function + +If you need to link any of the postcss plugins to the webpack context, you can +define a function that returns your plugins. The function is executed with the +same context provided to postcss-loader, allowing access to webpack loader API + +```js +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 same provided to postcss-loader + // see: http://webpack.github.io/docs/loaders.html + + return [ + cssimport({ + // see postcss-import docs to learn about onImport param + // https://github.com/postcss/postcss-import + + onImport: function (files) { + files.forEach(this.addDependency); + }.bind(this) + }), + autoprefixer + ]; + } +} +``` ## Safe Mode diff --git a/index.js b/index.js index 1421dd5b..5e66eb1d 100644 --- a/index.js +++ b/index.js @@ -18,6 +18,10 @@ module.exports = function (source, map) { if ( params.safe ) opts.safe = true; var plugins = this.options.postcss; + if ( typeof plugins === 'function' ) { + plugins = plugins.call(this); + } + if ( typeof plugins === 'undefined' ) { plugins = []; } else if ( params.pack ) { diff --git a/test/webpack.config.js b/test/webpack.config.js index 4e2ccff3..afacf288 100644 --- a/test/webpack.config.js +++ b/test/webpack.config.js @@ -11,8 +11,10 @@ module.exports = { path: path.join(__dirname, '..', 'build'), filename: 'test.js' }, - postcss: { - defaults: [blue, red], - blues: [blue] + postcss: function () { + return { + defaults: [blue, red], + blues: [blue] + }; } };