reduce-css-postcss

Plugin for reduce-css to pack postcss modules.

Example

See files in the example directory.

var postcss = require('reduce-css-postcss')
var gulp = require('gulp')
var del = require('del')
var reduce = require('reduce-css')
var path = require('path')
var fixtures = path.resolve.bind(path)

gulp.task('clean', function () {
  return del('build')
})

gulp.task('single', ['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'),
      bundleOptions: 'common.css',
    })
    .pipe(reduce.dest('build', null, {
      maxSize: 0,
      assetOutFolder: fixtures('build', 'images'),
    }))
})

gulp.task('watch-single', ['clean'], function () {
  reduce.watch()
    .on('done', function () {
      console.log('New bundles created!')
    })
    .on('error', console.log.bind(console))
    .on('log', console.log.bind(console))
    .on('instance', function (b) {
      b.plugin(postcss)
    })
    .src('*.css', {
      basedir: fixtures('src'),
      bundleOptions: 'common.css',
    })
    .pipe(reduce.dest, 'build', null, {
      maxSize: 0,
      assetOutFolder: fixtures('build', 'images'),
    })
})

gulp.task('multi', ['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'),
      bundleOptions: {
        groups: '**/+(a|b).css',
        common: 'common.css',
      },
    })
    .pipe(reduce.dest('build', null, {
      maxSize: 0,
      useHash: true,
      assetOutFolder: fixtures('build', 'images'),
    }))
})

gulp.task('watch-multi', ['clean'], function () {
  reduce.watch()
    .on('done', function () {
      console.log('New bundles created!')
    })
    .on('error', console.log.bind(console))
    .on('log', console.log.bind(console))
    .on('instance', function (b) {
      b.plugin(postcss)
    })
    .src('*.css', {
      basedir: fixtures('src'),
      bundleOptions: {
        groups: '**/+(a|b).css',
        common: 'common.css',
      },
    })
    .pipe(reduce.dest, 'build', null, {
      maxSize: 0,
      useHash: true,
      assetOutFolder: fixtures('build', 'images'),
    })
})

options

processorFilter

Type: Function

Receive a pipeline instance, through which you can add, remove, or customize postcss plugins to apply.

Type: Array

Specify extra postcss plugins to apply.

Default plugins

• postcss-simple-import
• postcss-custom-url
• postcss-advanced-variables
• postcss-mixins
• postcss-nested
• postcss-extend
• autoprefixer