Plugin for reduce-css to handle postcss

* Use `postcss-simple-import` to add cache in watch mode.
We need watch each file before it is compiled, cause it may fail in
compilation and the imported file never emitted to watchify.
* Default postcss plugins: autoprefixer, postcss-advanced-variables,
postcss-custom-url, postcss-extend, postcss-mixins, postcss-nested,
postcss-simple-import.
* Use `postcss-processor-splicer` to support custom postcss plugins.

Author: zoubin

.gitignore

@@ -1,5 +1,5 @@
 /node_modules/
 .DS_Store
 npm-debug.log
-/build/
+build/
 /coverage/

example/gulpfile.js

@@ -0,0 +1,87 @@
+var gulp = require('gulp')
+var del = require('del')
+var reduce = require('reduce-css')
+var postcss = require('..')
+var path = require('path')
+var fixtures = path.resolve.bind(path)
+
+gulp.task('clean', function () {
+  return del('build')
+})
+
+gulp.task('single-bundle', ['clean'], function () {
+  return reduce
+    .on('error', console.log.bind(console))
+    .on('log', console.log.bind(console))
+    .on('instance', function (b) {
+      b.plugin(postcss)
+    })
+    .src('*.css', {
+      basedir: fixtures('src'),
+      factor: 'common.css',
+    })
+    .pipe(reduce.dest('build', null, {
+      maxSize: 0,
+      assetOutFolder: fixtures('build', 'images'),
+    }))
+})
+
+gulp.task('watch-single-bundle', ['clean'], function () {
+  reduce.watch()
+    .on('error', console.log.bind(console))
+    .on('log', console.log.bind(console))
+    .on('instance', function (b) {
+      b.plugin(postcss)
+    })
+    .src('*.css', {
+      basedir: fixtures('src'),
+      factor: 'common.css',
+    })
+    .pipe(reduce.dest, 'build', null, {
+      maxSize: 0,
+      assetOutFolder: fixtures('build', 'images'),
+    })
+})
+
+gulp.task('multiple-bundles', ['clean'], function () {
+  return reduce
+    .on('error', console.log.bind(console))
+    .on('log', console.log.bind(console))
+    .on('instance', function (b) {
+      b.plugin(postcss)
+    })
+    .src('*.css', {
+      basedir: fixtures('src'),
+      factor: {
+        needFactor: true,
+        common: 'common.css',
+      },
+    })
+    .pipe(reduce.dest('build', null, {
+      maxSize: 0,
+      useHash: true,
+      assetOutFolder: fixtures('build', 'images'),
+    }))
+})
+
+gulp.task('watch-multiple-bundles', ['clean'], function () {
+  reduce.watch()
+    .on('error', console.log.bind(console))
+    .on('log', console.log.bind(console))
+    .on('instance', function (b) {
+      b.plugin(postcss)
+    })
+    .src('*.css', {
+      basedir: fixtures('src'),
+      factor: {
+        needFactor: true,
+        common: 'common.css',
+      },
+    })
+    .pipe(reduce.dest, 'build', null, {
+      maxSize: 0,
+      useHash: true,
+      assetOutFolder: fixtures('build', 'images'),
+    })
+})
+

example/src/a.css

@@ -0,0 +1,7 @@
+@deps "./reset";
+@deps "./button";
+@import "color";
+a{
+  color: $blue;
+}
+

example/src/b.css

@@ -0,0 +1,7 @@
+@deps "./reset";
+@deps "./button";
+@import "color";
+.button {
+  background-color: $blue;
+}
+

example/src/button/button.png

@@ -0,0 +1,5 @@
+@import "color";
+.button {
+  background-color: $red;
+  background-image: url(button.png);
+}

example/src/button/index.css

@@ -0,0 +1,5 @@
+html, body {
+  margin: 10;
+  padding: 0;
+}
+

example/src/node_modules/color/index.css

@@ -25,7 +25,7 @@ gulp.task('lint', function () {
     .pipe(eslint.failAfterError())
 })
 
-gulp.task('test', ['lint'], test)
+gulp.task('test', test)
 gulp.task('coverage',
   require('callback-sequence')(instrument, test, report)
 )

example/src/reset.css

@@ -1,85 +1,73 @@
 var Pipeline = require('postcss-processor-splicer')
 var CacheHandler = require('deps-cache')
-var postcss = require('postcss')
-var mix = require('util-mix')
-
-var PROCESSORS = [
-  require('postcss-simple-import'),
-  require('postcss-custom-url'),
-  require('postcss-advanced-variables'),
-  require('postcss-mixins'), // should come before postcss-nested
-  require('postcss-nested'),
-  require('postcss-extend'),
-  require('autoprefixer'),
-]
+var path = require('path')
 
 module.exports = function (b, opts) {
   opts = opts || {}
 
-  var pipeline = Pipeline(PROCESSORS)
+  var pipeline = new Pipeline([
+    require('postcss-simple-import'),
+    require('postcss-custom-url'),
+    require('postcss-advanced-variables'),
+    require('postcss-mixins'), // should come before postcss-nested
+    require('postcss-nested'),
+    require('postcss-extend'),
+    require('autoprefixer'),
+  ])
 
   if (typeof opts.processorFilter === 'function') {
     opts.processorFilter(pipeline)
   } else if (Array.isArray(opts.processorFilter)) {
     pipeline.push.apply(pipeline, opts.processorFilter)
   }
 
-  var i = pipeline.indexOf('postcss-simple-import')
-  if (i !== -1) {
-    pipeline.splice(i, 1,
-      rebuildAtImport(b, pipeline.get(i))
-    )
+  var atImport = pipeline.get('postcss-simple-import')
+
+  var atImportOpts = atImport[1] || {}
+  atImport[1] = atImportOpts
+
+  var cache = atImportOpts.cache || {}
+  atImportOpts.cache = cache
+
+  var cacheHandler = new CacheHandler(cache)
+
+  var importer = atImportOpts.importer
+  atImportOpts.importer = function (id, from, state) {
+    return state.resolve(id, { basedir: path.dirname(from) })
+      .then(function (dep) {
+        cacheHandler.add(from, dep)
+        // watchify reports file rather than `dep`,
+        // so emit dep and make watchify report it
+        b.emit('file', dep)
+        // watch dep
+        state.postcssOpts.entry.emit('file', dep)
+        if (importer) {
+          return importer(id, from, state)
+        }
+      })
   }
 
-  var postcssProcessor = postcss(pipeline.build())
+  // watchify emit `update` whenever file changes detected
+  b.on('update', function (files) {
+    cacheHandler.invalidate(files)
+  })
+  pipeline.splice('postcss-simple-import', 1, atImport)
+
+  var processor = pipeline.build()
   b.processor(function (result) {
-    // b.emit('file', result.from)
     var postcssOpts = {
       from: result.from,
       to: result.from,
       entry: result,  // for atImport
     }
-    return postcssProcessor
-      .process(result.css, postcssOpts)
+    return processor.process(result.css, postcssOpts)
       .then(function (res) {
         result.css = res.css
+      }, function (err) {
+        cacheHandler.invalidate(Object.keys(cache))
+        throw err
       })
   })
 
 }
 
-function rebuildAtImport(b, atImport) {
-  var opts
-  if (Array.isArray(atImport)) {
-    opts = atImport[1]
-    atImport = atImport[0]
-  }
-  opts = mix({ cache: {} }, opts)
-
-  var onImport = opts.onImport
-  opts.onImport = function (from, imports, postcssOpts) {
-    cacheHandler.add(from, imports)
-
-    var result = postcssOpts.entry
-    imports.forEach(function (dep) {
-      // watchify reports file rather than `dep`,
-      // so emit dep and make watchify report it
-      b.emit('file', dep)
-      // watch dep 
-      result.emit('file', dep)
-    })
-
-    if (onImport) {
-      onImport(from, imports, postcssOpts)
-    }
-  }
-
-  var cacheHandler = new CacheHandler(opts.cache)
-  // watchify emit `update` whenever file changes detected
-  b.on('update', function (files) {
-    cacheHandler.invalidate(files)
-  })
-
-  return [atImport, opts]
-}
-