postcss stack

gulpfile.js

gulp.task('styles:toolkit', ['lint-styles:toolkit'], function () {
  var sourcemaps = require('gulp-sourcemaps');
  var prefix = require('gulp-autoprefixer');
  var postcss = require('gulp-postcss');
  var calc = require('postcss-calc');
  var colorFunction = require('postcss-color-function');
  var customMedia = require('postcss-custom-media');
  var customProperties = require('postcss-custom-properties');
  var fontVariant = require('postcss-font-variant');
  var lost = require('lost');
  var inline = require('postcss-import');
  var nested = require('postcss-nested');
  var simpleVars = require('postcss-simple-vars');
  var plumber = require('gulp-plumber');
  var logWarnings = require('postcss-log-warnings');
  var messages = require('postcss-messages');
  var processors = [
    inline(),
    nested,
    logWarnings({throwError: true}),
    customProperties(),
    calc(),
    simpleVars(),
    customMedia(),
    lost(),
    colorFunction(),
    fontVariant()
  ];
  return gulp.src(config.src.styles.toolkit)
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(postcss(processors))
    .pipe(prefix())
    .pipe(sourcemaps.write())
    .pipe(gulpif(!config.dev, csso()))
    .pipe(gulp.dest(config.dest + '/assets/toolkit/styles'))
    .pipe(gulpif(config.dev, reload({stream:true})))
});