Using PostCSS and cssnext

Note: Although the example in the screencast works fine, turns out you don’t need the postcss-import or autoprefixer modules loaded separately, as they come bundled with cssnext. Curse my stupid brains.

Resources

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var postcss = require("gulp-postcss"),
    gulp = require("gulp"),
    cssnext = require("cssnext");


gulp.task("css", function() {
    var processors = [
        cssnext({
            'browers': ['last 2 version'],
            'customProperties': true,
            'colorFunction': true,
            'customSelectors': true,
            'sourcemap': true,
            'compress': false
        })
    ];

    return gulp.src('main.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('compiled'));
});