gulp-html-postcss

Process inline CSS in HTML using PostCSS gulp plugin

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
gulp-html-postcss
507.1.46 years ago9 years agoMinified + gzip package size for gulp-html-postcss in KB

Readme

gulp-html-postcss
NPM version Build Status Coverage Status
PostCSS gulp plugin with support for HTML and HTML-like:

Install

$ npm install --save-dev gulp-html-postcss
Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package.

Basic usage

The configuration is loaded automatically from postcss.config.js as described here, so you don't have to specify any options.
const postcss = require('gulp-html-postcss');
const gulp = require('gulp');

gulp.task('css', () => (
    gulp.src('./src/*.html')
        .pipe(postcss())
        .pipe(gulp.dest('./dest'))
));

Advanced usage

You can pass config as an {Object} as described here,
If you want to configure postcss on per-file-basis, you can pass a callback that receives ctx with the context options and the vinyl file. Described here,
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const reporter = require('gulp-reporter');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sugarss = require('sugarss');

gulp.task('css', () => {
    const callback = (ctx) => ({
        // Configure parser on per-file-basis.
        parser: ctx.file.extname === '.sss' ? 'sugarss' : false,
        // Plugins can be loaded in either using an {Object} or an {Array}.
        plugins: [
            autoprefixer,
            cssnano
        ]
    });

    return gulp.src('./src/*.html', {
        // Source map support
        sourcemaps: true
    })
        .pipe(postcss(callback))
        // Message repport support
        .pipe(reporter())
        .pipe(gulp.dest('./dest'));
});