Extracts & inlines Critical CSS with Wepack
Switch branches/tags
Clone or download
Latest commit a5505a8 Dec 13, 2017
Permalink
Failed to load latest commit information.
.editorconfig initial commit Sep 11, 2017
.gitignore initial commit Sep 11, 2017
index.js use `path.basename` to get filename consistently Dec 13, 2017
license initial commit Sep 11, 2017
package.json 1.1.1 Dec 13, 2017
readme.md fix readme typo Dec 13, 2017

readme.md

webpack-critical

Extracts & inlines Critical CSS with Webpack

Install

$ npm install webpack-critical --save-dev

Important: You must also install & configure html-webpack-plugin!

Usage

// webpack.config.js
const { resolve } = require('path');
const HTML = require('html-webpack-plugin');
const WebpackCritical = require('webpack-critical');

const dist = resolve('build');

module.exports = {
  output: {
    path: dist
  },
  // ...
  plugins: [
    new HTML({ ... })
    new WebpackCritical({
      context: dist,
      ignore: [/bootstrap/, '@font-face']
    })
  ]
}

API

WebpackCritical(options)

options.context

Type: String
Default: process.cwd()

The directory context to search for your (built) stylesheet.

Note: In most cases, this should match your output.path value.

options.ignore

Type: String, RegExp, Function, or Array
Default: ['@font-face', /import/, /url\(/]

Patterns to ignore CSS styles or files. Refer to filter-css for more information.

options.stylesheet

Type: String
Default: null

The filename or filepath (relative to context) of a specific CSS stylesheet to use for inlining.

If no value is passed, the primary CSS asset is used (as determined by html-webpack-plugin). If you are extracting a stylesheet, this will be the correct value 99% of the time.

Credit

Inspired by Dan Denny's article on Building a Small PWA with Preact and Firebase, which lead me to take a much closer look at critical, maintained by Addy Osmani and Ben Zörb.

License

MIT © Luke Edwards