gulp-critical-css

    1.0.1 • Public • Published

    gulp-critical-css Build Status XO code style

    Extract critical css rules into a seperate stylesheet

    This module allows to put a (blocking) lightweight CSS-File with critical style information into the HTML-head and the full CSS at the end of the body.

    This may increase loading and parsing time of your website and avoids a FOUC.

    Install

    $ npm install --save-dev gulp-critical-css
    

    Usage

    const gulp = require('gulp');
    const criticalCss = require('gulp-critical-css');
     
    gulp.task('default', () => {
        gulp.src('src/file.css')
            .pipe(criticalCss())
            .pipe(gulp.dest('dist'))
    );

    Usage in CSS

    By default every rule that contains critical: this; is extracted into the critical file.

    If you want to extract Selectors matching a RegExp or selectors that does not contain critical: this; take a look at the options.

    // This Selector will be extracted
    .my-selector {
        critical: this;
        color: red;
    }
     
    // This Selector will not
    .my-other-selector {
        color: green;
    }

    API

    criticalCss([options])

    options

    selectors

    Type: Array<String,RegExp>
    Default: []

    Lets you define Selectors to extract into critical. This may be a simple string like .navbar > .nav, a or a RegExp.

    Strings are compared to the found selectors with foundSelector.indexOf(selector) !== -1 Regular expressions are tested with regEx.test(foundSelector)

    Next Steps

    • Support for Sourcemaps

    Any Ideas? Tell me!

    License

    MIT © Michael Scharl

    Keywords

    Install

    npm i gulp-critical-css

    DownloadsWeekly Downloads

    245

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • mscharl