gulp-html-postcss

Process inline CSS in HTML using PostCSS gulp plugin

Showing:

Popularity

Downloads/wk

641

GitHub Stars

5

Maintenance

Last Commit

3yrs ago

Contributors

20

Package

Dependencies

14

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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'));
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100