Registry / devops / critters-webpack-plugin

critters-webpack-plugin

library3.0.2jsnpmunverified

Webpack plugin that inlines critical CSS and lazy-loads the rest. v3.0.2 is current, based on Critters 0.0.16. It uses JSDOM and css-select for processing, no headless browser, making it fast and lightweight. Supports html-webpack-plugin v4, preload options, font inlining, and pruning of unused keyframes. Differentiators: speed (no browser), integrates seamlessly with webpack-dev-server, and complements prerender-loader for SPA SSR. Release cadence is irregular.

devops

npm install critters-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · CRITTERS-WEBPACK-P

critters-webpack-plugin

devopsjavascriptv3.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Critters

✓ const Critters = require('critters-webpack-plugin');

✗ import Critters from 'critters-webpack-plugin'; // ESM not supported in v3

v3 does not ship ESM; only CommonJS require is supported. Use require in Node/webpack config.

CrittersPlugin

✓ const CrittersPlugin = require('critters-webpack-plugin');

✗ const { CrittersPlugin } = require('critters-webpack-plugin'); // default export, not named

The package exports a single class as default. Named import does not work.

CrittersWebpackPlugin

✓ const Critters = require('critters-webpack-plugin'); new Critters({...});

This is the same default export. Use it directly as a constructor.

Shows basic setup of Critters with HtmlWebpackPlugin, using preload swap mode and font preloading.

// webpack.config.js const Critters = require('critters-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin(), new Critters({ preload: 'swap', preloadFonts: true, includeMatchingStylesheets: ['*.css'] }) ] };

Debug

Known issues

deprecatedThe package is now called critters-webpack-plugin and v2+ is a rewrite. Legacy 1.x is available via `npm i critters-webpack-plugin@legacy`.

fix

Upgrade to v3.x. If stuck on 1.x, use `legacy` dist tag.

affects: >=1.0.0 <2.0.0

breakingIn v3.0.0, the internal engine switched to JSDOM and css-select v4, which changes CSS parsing behavior and may produce different inlined results.

fix

Review inlined CSS output after upgrading. Check for :where selector support added in 0.0.16.

affects: >=3.0.0

gotchaCommonJS only in v3; ESM import of the package will fail.

fix

Use `require('critters-webpack-plugin')` in webpack config. Do not use `import`.

affects: >=3.0.0

gotchahtml-webpack-plugin is a required peer dependency and must be installed manually.

fix

Install html-webpack-plugin: npm i -D html-webpack-plugin

affects: >=3.0.0

deprecatedThe `includeMatchingStylesheets` option from v2.5.0 is deprecated in favor of Critters' `additionalStylesheets` option (if available) but still works.

fix

Use `additionalStylesheets` option if using standalone Critters, or keep using `includeMatchingStylesheets`.

affects: >=2.5.0 <3.0.0

Errors

Common errors & fixes

Error: Cannot find module 'html-webpack-plugin'

Missing peer dependency html-webpack-plugin

fix

npm install html-webpack-plugin --save-dev

TypeError: Critters is not a constructor

Using ES6 import on CommonJS-only package

fix

Replace `import Critters from 'critters-webpack-plugin'` with `const Critters = require('critters-webpack-plugin')`

Unhandled rejection TypeError: Cannot read property 'getHooks' of null

html-webpack-plugin not loaded or version mismatch

fix

Ensure html-webpack-plugin is installed and added before Critters in plugins array

Upgrade

Version history

3.0.2latest on npm

Audit

Dependencies

html-webpack-pluginrequiredpeer dependency for hooking into compilation

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/GoogleChromeLabs/critters ↗

packagehttps://www.npmjs.com/package/critters-webpack-plugin ↗