{"id":19425,"library":"critters-webpack-plugin","title":"Critters Webpack Plugin","description":"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.","status":"active","version":"3.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/GoogleChromeLabs/critters","tags":["javascript","critical css","inline css","critical","critters","webpack plugin","performance"],"install":[{"cmd":"npm install critters-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add critters-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add critters-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for hooking into compilation","package":"html-webpack-plugin","optional":false}],"imports":[{"note":"v3 does not ship ESM; only CommonJS require is supported. Use require in Node/webpack config.","wrong":"import Critters from 'critters-webpack-plugin'; // ESM not supported in v3","symbol":"Critters","correct":"const Critters = require('critters-webpack-plugin');"},{"note":"The package exports a single class as default. Named import does not work.","wrong":"const { CrittersPlugin } = require('critters-webpack-plugin'); // default export, not named","symbol":"CrittersPlugin","correct":"const CrittersPlugin = require('critters-webpack-plugin');"},{"note":"This is the same default export. Use it directly as a constructor.","wrong":"","symbol":"CrittersWebpackPlugin","correct":"const Critters = require('critters-webpack-plugin');\nnew Critters({...});"}],"quickstart":{"code":"// webpack.config.js\nconst Critters = require('critters-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nmodule.exports = {\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new Critters({\n      preload: 'swap',\n      preloadFonts: true,\n      includeMatchingStylesheets: ['*.css']\n    })\n  ]\n};","lang":"javascript","description":"Shows basic setup of Critters with HtmlWebpackPlugin, using preload swap mode and font preloading."},"warnings":[{"fix":"Upgrade to v3.x. If stuck on 1.x, use `legacy` dist tag.","message":"The package is now called critters-webpack-plugin and v2+ is a rewrite. Legacy 1.x is available via `npm i critters-webpack-plugin@legacy`.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Review inlined CSS output after upgrading. Check for :where selector support added in 0.0.16.","message":"In v3.0.0, the internal engine switched to JSDOM and css-select v4, which changes CSS parsing behavior and may produce different inlined results.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use `require('critters-webpack-plugin')` in webpack config. Do not use `import`.","message":"CommonJS only in v3; ESM import of the package will fail.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Install html-webpack-plugin: npm i -D html-webpack-plugin","message":"html-webpack-plugin is a required peer dependency and must be installed manually.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use `additionalStylesheets` option if using standalone Critters, or keep using `includeMatchingStylesheets`.","message":"The `includeMatchingStylesheets` option from v2.5.0 is deprecated in favor of Critters' `additionalStylesheets` option (if available) but still works.","severity":"deprecated","affected_versions":">=2.5.0 <3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install html-webpack-plugin --save-dev","cause":"Missing peer dependency html-webpack-plugin","error":"Error: Cannot find module 'html-webpack-plugin'"},{"fix":"Replace `import Critters from 'critters-webpack-plugin'` with `const Critters = require('critters-webpack-plugin')`","cause":"Using ES6 import on CommonJS-only package","error":"TypeError: Critters is not a constructor"},{"fix":"Ensure html-webpack-plugin is installed and added before Critters in plugins array","cause":"html-webpack-plugin not loaded or version mismatch","error":"Unhandled rejection TypeError: Cannot read property 'getHooks' of null"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}