{"id":27610,"library":"beasties-webpack-plugin","title":"beasties-webpack-plugin","description":"Webpack plugin to inline critical CSS and lazy-load the rest. Version 0.4.2, released semi-regularly. Unlike alternatives like Critical or Penthouse, it does NOT use a headless browser, making it fast and lightweight; instead, it inlines all CSS rules used by the document. It integrates with html-webpack-plugin, supports preloading fonts, pruning unused CSS, and works with webpack-dev-server. Ships TypeScript types. Requires Node ^20.0.0 or >=22.0.0.","status":"active","version":"0.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/danielroe/beasties","tags":["javascript","critical css","inline css","critical","beasties","webpack plugin","performance","typescript"],"install":[{"cmd":"npm install beasties-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add beasties-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add beasties-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; Beasties reads the HTML generated by html-webpack-plugin to inline CSS and modify link tags.","package":"html-webpack-plugin","optional":false}],"imports":[{"note":"Default export. Supports ESM imports as well as CJS require(). Types included.","wrong":"const Beasties = require('beasties-webpack-plugin')","symbol":"BeastiesWebpackPlugin","correct":"import BeastiesWebpackPlugin from 'beasties-webpack-plugin'"},{"note":"Use default import. Named export does not exist. Common mistake to destructure.","wrong":"import { Beasties } from 'beasties-webpack-plugin'","symbol":"default","correct":"import Beasties from 'beasties-webpack-plugin'"},{"note":"Options type is exported for TypeScript users; use 'import type' to avoid runtime inclusion.","wrong":"import { Options } from 'beasties-webpack-plugin'","symbol":"type Options","correct":"import type { Options } from 'beasties-webpack-plugin'"}],"quickstart":{"code":"// webpack.config.js\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport Beasties from 'beasties-webpack-plugin';\n\nexport default {\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: 'src/index.html'\n    }),\n    new Beasties({\n      preload: 'swap',\n      preloadFonts: true,\n      inlineThreshold: 4096\n    })\n  ]\n};","lang":"typescript","description":"Webpack configuration with HtmlWebpackPlugin and BeastiesWebpackPlugin showing common options."},"warnings":[{"fix":"Ensure CSS is valid; or use version <0.4.0 if you rely on lenient parsing.","message":"Version 0.4.0 introduced postcss-safe-parser for mangled CSS. If your CSS uses non-standard syntax, it may fail to parse correctly.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Install html-webpack-plugin@^5.0.0.","message":"Beasties requires html-webpack-plugin v5+. If using v4, it will silently fail.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Place HtmlWebpackPlugin before Beasties in the plugins array.","message":"Beasties will not work if html-webpack-plugin is not included in the plugins array before Beasties.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Manually refresh the browser after CSS changes during development.","message":"When using webpack-dev-server, changes to CSS may not trigger proper re-inlining. Requires hard refresh.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"npm install -D html-webpack-plugin","cause":"Missing peer dependency html-webpack-plugin.","error":"Cannot find module 'html-webpack-plugin'"},{"fix":"Move new HtmlWebpackPlugin() above new Beasties() in the plugins array.","cause":"html-webpack-plugin not placed before Beasties.","error":"TypeError: Cannot read properties of undefined (reading 'hooks')"},{"fix":"Add a template or ensure HtmlWebpackPlugin is correctly configured.","cause":"HtmlWebpackPlugin is not configured to emit an HTML file.","error":"Error: No HTML file found. Ensure html-webpack-plugin outputs HTML."},{"fix":"Use import Beasties from 'beasties-webpack-plugin' (no braces).","cause":"Importing Beasties as a named export instead of default.","error":"TypeError: Beasties is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}