11# gulp-postcss [ ![ Build Status] ( https://api.travis-ci.org/postcss/gulp-postcss.png )] ( https://travis-ci.org/postcss/gulp-postcss )
22
33[ PostCSS] ( https://github.com/postcss/postcss ) gulp plugin to pipe CSS through
4- several processors , but parse CSS only once.
4+ several plugins , but parse CSS only once.
55
66## Install
77
@@ -11,19 +11,36 @@ Install required [postcss plugins](https://www.npmjs.com/browse/keyword/postcss-
1111
1212## Basic usage
1313
14+ The configuration is loaded automatically from ` postcss.config.js `
15+ as [ described here] ( https://www.npmjs.com/package/postcss-load-config ) ,
16+ so you don't have to specify any options.
17+
18+ ``` js
19+ var postcss = require (' gulp-postcss' );
20+ var gulp = require (' gulp' );
21+
22+ gulp .task (' css' , function () {
23+ return gulp .src (' ./src/*.css' )
24+ .pipe (postcss ())
25+ .pipe (gulp .dest (' ./dest' ));
26+ });
27+ ```
28+
29+ ## Passing plugins directly
30+
1431``` js
1532var postcss = require (' gulp-postcss' );
1633var gulp = require (' gulp' );
1734var autoprefixer = require (' autoprefixer' );
1835var cssnano = require (' cssnano' );
1936
2037gulp .task (' css' , function () {
21- var processors = [
38+ var plugins = [
2239 autoprefixer ({browsers: [' last 1 version' ]}),
23- cssnano (),
40+ cssnano ()
2441 ];
2542 return gulp .src (' ./src/*.css' )
26- .pipe (postcss (processors ))
43+ .pipe (postcss (plugins ))
2744 .pipe (gulp .dest (' ./dest' ));
2845});
2946```
@@ -32,18 +49,18 @@ gulp.task('css', function () {
3249
3350The second optional argument to gulp-postcss is passed to PostCSS.
3451
35- This, for instance, may be used to enable custom syntax :
52+ This, for instance, may be used to enable custom parser :
3653
3754``` js
3855var gulp = require (' gulp' );
3956var postcss = require (' gulp-postcss' );
4057var nested = require (' postcss-nested' );
41- var scss = require (' postcss-scss ' );
58+ var sugarss = require (' sugarss ' );
4259
4360gulp .task (' default' , function () {
44- var processors = [nested];
45- return gulp .src (' in.css ' )
46- .pipe (postcss (processors , {syntax : scss }))
61+ var plugins = [nested];
62+ return gulp .src (' in.sss ' )
63+ .pipe (postcss (plugins , { parser : sugarss }))
4764 .pipe (gulp .dest (' out' ));
4865});
4966```
@@ -65,12 +82,12 @@ var opacity = function (css, opts) {
6582};
6683
6784gulp .task (' css' , function () {
68- var processors = [
85+ var plugins = [
6986 cssnext ({browsers: [' last 1 version' ]}),
70- opacity,
87+ opacity
7188 ];
7289 return gulp .src (' ./src/*.css' )
73- .pipe (postcss (processors ))
90+ .pipe (postcss (plugins ))
7491 .pipe (gulp .dest (' ./dest' ));
7592});
7693```
@@ -83,13 +100,77 @@ with [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps).
83100``` js
84101return gulp .src (' ./src/*.css' )
85102 .pipe (sourcemaps .init ())
86- .pipe (postcss (processors ))
103+ .pipe (postcss (plugins ))
87104 .pipe (sourcemaps .write (' .' ))
88105 .pipe (gulp .dest (' ./dest' ));
89106```
90107
108+ ## Advanced usage
109+
110+ If you want to configure postcss on per-file-basis, you can pass a callback
111+ that receives [ vinyl file object] ( https://github.com/gulpjs/vinyl ) and returns
112+ ` { plugins: plugins, options: options } ` . For example, when you need to
113+ parse different extensions differntly:
114+
115+ ``` js
116+ var gulp = require (' gulp' );
117+ var postcss = require (' gulp-postcss' );
118+
119+ gulp .task (' css' , function () {
120+ function callback (file ) {
121+ return {
122+ plugins: [
123+ require (' postcss-import' )({ root: file .dirname }),
124+ require (' postcss-modules' )
125+ ],
126+ options: {
127+ parser: file .extname === ' .sss' ? require (' sugarss' ) : false
128+ }
129+ }
130+ }
131+ return gulp .src (' ./src/*.css' )
132+ .pipe (postcss (callback))
133+ .pipe (gulp .dest (' ./dest' ));
134+ });
135+ ```
136+
137+ The same result may be achieved with
138+ [ ` postcss-load-config ` ] ( https://www.npmjs.com/package/postcss-load-config ) ,
139+ because it receives ` ctx ` with the context options and the vinyl file.
140+
141+ ``` js
142+ var gulp = require (' gulp' );
143+ var postcss = require (' gulp-postcss' );
144+
145+ gulp .task (' css' , function () {
146+ var contextOptions = { modules: true };
147+ return gulp .src (' ./src/*.css' )
148+ .pipe (postcss (contextOptions))
149+ .pipe (gulp .dest (' ./dest' ));
150+ });
151+ ```
152+
153+ ``` js
154+ module .exports = function (ctx ) {
155+ var file = ctx .file ;
156+ var options = ctx .options ;
157+ return {
158+ parser: file .extname === ' .sss' ? : ' sugarss' : false ,
159+ plugins: {
160+ ' postcss-import' : { root: file .dirname }
161+ ' postcss-modules' : options .modules ? {} : false
162+ }
163+ }
164+ })
165+ ```
166+
91167## Changelog
92168
169+ * 6.3.0
170+ * Integrated with postcss-load-config
171+ * Added a callback to configure postcss on per-file-basis
172+ * Dropped node 0.10 support
173+
93174* 6.2.0
94175 * Fix syntax error message for PostCSS 5.2 compatibility
95176
@@ -124,7 +205,7 @@ return gulp.src('./src/*.css')
124205
125206* 5.1.4
126207 * Simplified error handling
127- * Simplified postcss execution with object processors
208+ * Simplified postcss execution with object plugins
128209
129210* 5.1.3 Updated travis banner
130211
@@ -139,7 +220,7 @@ return gulp.src('./src/*.css')
139220 * Display ` result.warnings() ` content
140221
141222* 5.0.1
142- * Fix to support object processors
223+ * Fix to support object plugins
143224
144225* 5.0.0
145226 * Use async API
@@ -173,7 +254,7 @@ return gulp.src('./src/*.css')
173254 * Improved README
174255
175256* 1.0.1
176- * Don't add source map comment if used with gulp-sourcemap
257+ * Don't add source map comment if used with gulp-sourcemaps
177258
178259* 1.0.0
179260 * Initial release
0 commit comments