gulp-postcss 0,1 travis-ci npm

Pipe CSS through PostCSS processors with a single parse

2 years after

gulp-postcss Build Status

PostCSS gulp plugin to pipe CSS through several processors, but parse CSS only once.

Install

$ npm install --save-dev gulp-postcss

Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package.

Basic usage

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano(),
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

Passing additional options to PostCSS

The second optional argument to gulp-postcss is passed to PostCSS.

This, for instance, may be used to enable custom syntax:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var nested = require('postcss-nested');
var scss = require('postcss-scss');

gulp.task('default', function () {
    var processors = [nested];
    return gulp.src('in.css')
        .pipe(postcss(processors, {syntax: scss}))
        .pipe(gulp.dest('out'));
});

Using a custom processor

var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var opacity = function (css, opts) {
    css.eachDecl(function(decl) {
        if (decl.prop === 'opacity') {
            decl.parent.insertAfter(decl, {
                prop: '-ms-filter',
                value: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (parseFloat(decl.value) * 100) + ')"'
            });
        }
    });
};

gulp.task('css', function () {
    var processors = [
        cssnext({browsers: ['last 1 version']}),
        opacity,
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

Source map support

Source map is disabled by default, to extract map use together with gulp-sourcemaps.

return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'));

Changelog

  • 6.2.0

    • Fix syntax error message for PostCSS 5.2 compatibility
  • 6.1.1

    • Fixed the error output
  • 6.1.0

    • Support for null files
    • Updated dependencies
  • 6.0.1

    • Added an example and a test to pass options to PostCSS (e.g. syntax option)
    • Updated vinyl-sourcemaps-apply to 0.2.0
  • 6.0.0

    • Updated PostCSS to version 5.0.0
  • 5.1.10

    • Use autoprefixer in README
  • 5.1.9

    • Prevent unhandled exception of the following pipes from being suppressed by Promise
  • 5.1.8

    • Prevent stream’s unhandled exception from being suppressed by Promise
  • 5.1.7

    • Updated direct dependencies
  • 5.1.6

    • Updated CssSyntaxError check
  • 5.1.4

    • Simplified error handling
    • Simplified postcss execution with object processors
  • 5.1.3 Updated travis banner

  • 5.1.2 Transferred repo into postcss org on github

  • 5.1.1

    • Allow override of to option
  • 5.1.0 PostCSS Runner Guidelines

    • Set from and to processing options
    • Don't output js stack trace for CssSyntaxError
    • Display result.warnings() content
  • 5.0.1

    • Fix to support object processors
  • 5.0.0

    • Use async API
  • 4.0.3

    • Fixed bug with relative source map
  • 4.0.2

    • Made PostCSS a simple dependency, because peer dependency is deprecated
  • 4.0.1

    • Made PostCSS 4.x a peer dependency
  • 4.0.0

    • Updated PostCSS to 4.0
  • 3.0.0

    • Updated PostCSS to 3.0 and fixed tests
  • 2.0.1

    • Added Changelog
    • Added example for a custom processor in README
  • 2.0.0

    • Disable source map by default
    • Test source map
    • Added Travis support
    • Use autoprefixer-core in README
  • 1.0.2

    • Improved README
  • 1.0.1

    • Don't add source map comment if used with gulp-sourcemap
  • 1.0.0

    • Initial release

Related Repositories

wordpress-gulp-starter-kit

wordpress-gulp-starter-kit

A starter kit for developing WordPress themes with Gulp. ...

awesome-gulp

awesome-gulp

:tropical_drink: A curated list of awesome gulp resources, plugins, and boilerpl ...

postcss-sorting

postcss-sorting

PostCSS plugin to sort rules content with specified order. ...

awesome-postcss

awesome-postcss

:open_file_folder: A collaborative list of PostCSS plugins, articles, videos and ...

postcss-neat

postcss-neat

PostCSS plugin that provides a semantic and fluid grid framework. ...


Top Contributors

w0rm ai bammoo Termina1 danielhusar TrySound glenselle superlukas silvenon MoOx wesbos

Dependencies

package version
gulp-util ^3.0.8
postcss ^6.0.0
postcss-load-config ^1.2.0
vinyl-sourcemaps-apply ^0.2.1
dev coveralls ^2.13.1
eslint ^4.1.1
gulp-sourcemaps ^2.6.0
mocha ^3.4.2
nyc ^11.0.3
proxyquire ^1.8.0
sinon ^2.3.5

Releases

-   6.2.0 zip tar
-   6.1.1 zip tar
-   6.1.0 zip tar
-   6.0.1 zip tar
-   6.0.0 zip tar
-   5.1.10 zip tar
-   5.1.9 zip tar
-   5.1.8 zip tar
-   5.1.7 zip tar
-   5.1.6 zip tar
-   5.1.5 zip tar
-   5.1.4 zip tar
-   5.1.3 zip tar
-   5.1.2 zip tar
-   5.1.1 zip tar
-   5.1.0 zip tar
-   5.0.1 zip tar
-   5.0.0 zip tar
-   4.0.3 zip tar
-   4.0.2 zip tar
-   4.0.1 zip tar
-   4.0.0 zip tar
-   3.0.0 zip tar
-   2.0.1 zip tar
-   2.0.0 zip tar
-   1.0.2 zip tar
-   1.0.1 zip tar
-   1.0.0 zip tar