The plugin reads a CSS file and extracts the sections between the markers /*! CRITICAL:START */ and /*! CRITICAL:END */. It concatenates all the extracted sections into a single string - through the plugin options you can choose to either output this critical CSS to a separate file named critical.css or inline it in to the end of the <head> section of a HTML file. The plugin also offers an option to modify the source CSS file by removing the critical CSS sections.

Installation

You can install gulp-extract-critical-css using npm:

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

Usage

Inside your gulpfile:

const gulp = require('gulp');
const extractCriticalCss = require('./extract-critical-css');

function criticalCSS() {
    return gulp.src('./dist/style.css')
      .pipe(extractCriticalCss())
      .pipe(gulp.dest('./dist/'));
}

exports.criticalCSS = series(criticalCSS)

Inside your ./dist/style.css file

/*! CRITICAL:START */
header {
    background: red;
}
/*! CRITICAL:END */

body {
    background: green;
}

footer {
    background: blue;
}

Expected Output Files

The modified ./dist/style.css :

body {
    background: green;
}

footer {
    background: blue;
}

The generated ./dist/critical.css :

header {
    background: red;
}

Options:

Option	Type	Default	Description
`inlineCritical`	Boolean	`false`	Determines whether a critical.css file is generated or if the critical CSS gets inlined.
`inlinePath`	string	-	A path to a file that contains your closing `</head>` tag, this is where the inlined CSS will be appended. Required if `inlineCritical` is set to `true`
`modifySource`	Boolean	`false`	Determines whether the source file should be modified - setting to `true` will remove the critical CSS from the source file.

Keywords

FAQs

What is gulp-extract-critical-css?

Is gulp-extract-critical-css popular?

Is gulp-extract-critical-css well maintained?

Package last updated on 24 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

gulp-extract-critical-css