Skip to content

Promote use of postcss functions #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 33 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ module.exports = {
}
]
},
postcss: [autoprefixer, csswring]
postcss: function {
return [autoprefixer, csswring];
}
}
```

Expand All @@ -44,6 +46,20 @@ var css = require('./file.css');
// => CSS after Autoprefixer and CSSWring
```

Note that the context of this function

```js
module.exports = {
...
postcss: function {
return [autoprefixer, csswring];
}
}
```

will be set to the [webpack loader-context](http://webpack.github.io/docs/loaders.html#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
Expand All @@ -63,18 +79,24 @@ module.exports = {
}
]
},
postcss: {
defaults: [autoprefixer, csswring],
cleaner: [autoprefixer({ browsers: [] })]
postcss: function () {
return {
defaults: [autoprefixer, csswring],
cleaner: [autoprefixer({ browsers: [] })]
};
}
}
```

## Plugins Function
## Integration with postcss-import

When using [postcss-import](https://github.com/postcss/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.

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
Since the function in postcss section is executed with the [webpack loader-context](http://webpack.github.io/docs/loaders.html#loader-context),
we can use the postcss-import callback [onImport](https://github.com/postcss/postcss-import#onimport) to tell webpack what files
need to be watched.

```js
var cssimport = require('postcss-import');
Expand All @@ -90,12 +112,12 @@ module.exports = {
]
},
postcss: function () {
// The context of this function is the same provided to postcss-loader
// see: http://webpack.github.io/docs/loaders.html
// 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 param
// see postcss-import docs to learn about onImport callback
// https://github.com/postcss/postcss-import

onImport: function (files) {
Expand Down