Registry / devops / beasties-webpack-plugin

beasties-webpack-plugin

library0.4.2jsnpmunverified

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.

devops

npm install beasties-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · BEASTIES-WEBPACK-P

beasties-webpack-plugin

devopsjavascriptv0.4.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

BeastiesWebpackPlugin

✓ import BeastiesWebpackPlugin from 'beasties-webpack-plugin'

✗ const Beasties = require('beasties-webpack-plugin')

Default export. Supports ESM imports as well as CJS require(). Types included.

default

✓ import Beasties from 'beasties-webpack-plugin'

✗ import { Beasties } from 'beasties-webpack-plugin'

Use default import. Named export does not exist. Common mistake to destructure.

type Options

✓ import type { Options } from 'beasties-webpack-plugin'

✗ import { Options } from 'beasties-webpack-plugin'

Options type is exported for TypeScript users; use 'import type' to avoid runtime inclusion.

Webpack configuration with HtmlWebpackPlugin and BeastiesWebpackPlugin showing common options.

// webpack.config.js import HtmlWebpackPlugin from 'html-webpack-plugin'; import Beasties from 'beasties-webpack-plugin'; export default { plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }), new Beasties({ preload: 'swap', preloadFonts: true, inlineThreshold: 4096 }) ] };

Debug

Known issues

breakingVersion 0.4.0 introduced postcss-safe-parser for mangled CSS. If your CSS uses non-standard syntax, it may fail to parse correctly.

fix

Ensure CSS is valid; or use version <0.4.0 if you rely on lenient parsing.

affects: >=0.4.0

gotchaBeasties requires html-webpack-plugin v5+. If using v4, it will silently fail.

fix

Install html-webpack-plugin@^5.0.0.

affects: >=0.0.0

gotchaBeasties will not work if html-webpack-plugin is not included in the plugins array before Beasties.

fix

Place HtmlWebpackPlugin before Beasties in the plugins array.

affects: >=0.0.0

gotchaWhen using webpack-dev-server, changes to CSS may not trigger proper re-inlining. Requires hard refresh.

fix

Manually refresh the browser after CSS changes during development.

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'html-webpack-plugin'

Missing peer dependency html-webpack-plugin.

fix

npm install -D html-webpack-plugin

TypeError: Cannot read properties of undefined (reading 'hooks')

html-webpack-plugin not placed before Beasties.

fix

Move new HtmlWebpackPlugin() above new Beasties() in the plugins array.

Error: No HTML file found. Ensure html-webpack-plugin outputs HTML.

HtmlWebpackPlugin is not configured to emit an HTML file.

fix

Add a template or ensure HtmlWebpackPlugin is correctly configured.

TypeError: Beasties is not a constructor

Importing Beasties as a named export instead of default.

fix

Use import Beasties from 'beasties-webpack-plugin' (no braces).

Upgrade

Version history

0.4.2latest on npm

Audit

Dependencies

html-webpack-pluginrequiredPeer dependency; Beasties reads the HTML generated by html-webpack-plugin to inline CSS and modify link tags.

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/danielroe/beasties ↗

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