Skip to content

Commit e1edc1b

Browse files
committed
Promote use of postcss functions
1 parent 55a4080 commit e1edc1b

File tree

1 file changed

+33
-11
lines changed

1 file changed

+33
-11
lines changed

README.md

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ module.exports = {
3333
}
3434
]
3535
},
36-
postcss: [autoprefixer, csswring]
36+
postcss: function {
37+
return [autoprefixer, csswring];
38+
}
3739
}
3840
```
3941

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

49+
Note that the context of this function
50+
51+
```js
52+
module.exports = {
53+
...
54+
postcss: function {
55+
return [autoprefixer, csswring];
56+
}
57+
}
58+
```
59+
60+
will be set to the [webpack loader-context](http://webpack.github.io/docs/loaders.html#loader-context).
61+
If there is the need, this will let you access to webpack loaders API.
62+
4763
## Plugins Packs
4864

4965
If you want to process different styles by different PostCSS plugins you can
@@ -63,18 +79,24 @@ module.exports = {
6379
}
6480
]
6581
},
66-
postcss: {
67-
defaults: [autoprefixer, csswring],
68-
cleaner: [autoprefixer({ browsers: [] })]
82+
postcss: function () {
83+
return {
84+
defaults: [autoprefixer, csswring],
85+
cleaner: [autoprefixer({ browsers: [] })]
86+
};
6987
}
7088
}
7189
```
7290

73-
## Plugins Function
91+
## Integration with postcss-import
92+
93+
When using [postcss-import](https://github.com/postcss/postcss-import) plugin, you may want to tell webpack about
94+
dependencies coming from your `@import` directives.
95+
For example: in watch mode, to enable recompile on change.
7496

75-
If you need to link any of the postcss plugins to the webpack context, you can
76-
define a function that returns your plugins. The function is executed with the
77-
same context provided to postcss-loader, allowing access to webpack loader API
97+
Since the function in postcss section is executed with the [webpack loader-context](http://webpack.github.io/docs/loaders.html#loader-context),
98+
we can use the postcss-import callback [onImport](https://github.com/postcss/postcss-import#onimport) to tell webpack what files
99+
need to be watched.
78100

79101
```js
80102
var cssimport = require('postcss-import');
@@ -90,12 +112,12 @@ module.exports = {
90112
]
91113
},
92114
postcss: function () {
93-
// The context of this function is the same provided to postcss-loader
94-
// see: http://webpack.github.io/docs/loaders.html
115+
// The context of this function is the webpack loader-context
116+
// see: http://webpack.github.io/docs/loaders.html#loader-context
95117
96118
return [
97119
cssimport({
98-
// see postcss-import docs to learn about onImport param
120+
// see postcss-import docs to learn about onImport callback
99121
// https://github.com/postcss/postcss-import
100122
101123
onImport: function (files) {

0 commit comments

Comments
 (0)