beasties

library0.4.2jsnpmunverified

Beasties is a Webpack/Vite plugin that inlines critical CSS and lazy-loads the rest for improved initial paint time. Version 0.4.2 (as of 2025) is a maintained fork of GoogleChromeLabs/critters, actively developed by the Nuxt/Vue ecosystem. Unlike alternatives using headless browsers, Beasties is lightweight and fast by parsing HTML/CSS directly. It supports preloading fonts, pruning unused CSS, and integrates via beasties-webpack-plugin or vite-plugin-beasties. Requires Node >=18.0.0 and ships TypeScript types.

testing

npm install beasties

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BEASTIES

beasties

testingjavascriptv0.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.

Beasties

✓ import Beasties from 'beasties'

✗ import { Beasties } from 'beasties'

Default export only; named export does not exist.

Beasties (CommonJS)

✓ const Beasties = require('beasties').default

✗ const Beasties = require('beasties')

In CJS, .default is required because package is ESM.

beasties (Webpack plugin)

✓ const BeastiesPlugin = require('beasties-webpack-plugin')

✗ import BeastiesPlugin from 'beasties-webpack-plugin'

beasties-webpack-plugin uses CommonJS export; named import works but defaults require check.

Basic Beasties usage: instantiate with options, process HTML string to inline critical CSS and lazy-load the rest.

import Beasties from 'beasties'; const beasties = new Beasties({ path: '/dist', publicPath: '/', external: false, preload: 'swap', inlineThreshold: 0, pruneSource: true, }); const html = ` <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/styles/main.css"> </head> <body> <div class="hero">Hello</div> </body> </html> `; const inlinedHtml = await beasties.process(html); console.log(inlinedHtml); // Output includes inline critical CSS, lazy-loads non-critical.

Debug

Known issues

breakingBeasties v0.4.x is ESM-only; require('beasties') will not work without .default

fix

Use 'const Beasties = require("beasties").default' for CommonJS, or switch to import.

affects: >=0.4.0

breakingNode.js < 18.0.0 is no longer supported starting from beasties v0.4.0

fix

Upgrade Node.js to >=18.0.0

affects: >=0.4.0

deprecatedbeasties and beasties-webpack-plugin are now separate packages; options available in both

fix

Use the dedicated webpack plugin package: npm install beasties-webpack-plugin

affects: <0.4.0

gotchaThe default export from 'beasties' is the class, not a plugin instance; 'new Beasties()' is required

fix

Always instantiate: const beasties = new Beasties(options)

affects: >=0.1.0

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/node_modules/beasties/src/index.js not supported.

Using require() on an ESM-only package in a CommonJS context or older Node version.

fix

Use dynamic import: const Beasties = await import('beasties').then(m => m.default); or switch to import syntax.

TypeError: Beasties is not a constructor

Using named import instead of default import (e.g., import { Beasties } from 'beasties').

fix

Use default import: import Beasties from 'beasties'

Module not found: Error: Can't resolve 'beasties-webpack-plugin'

beasties-webpack-plugin not installed or wrong package name.

fix

Install beasties-webpack-plugin: npm install -D beasties-webpack-plugin

Upgrade

Version history

0.4.2latest on npm

Audit

Dependencies

beasties-webpack-pluginoptionalWebpack integration plugin

vite-plugin-beastiesoptionalVite integration plugin

Agent activity

18 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

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

packagebeasties ↗

homepagehttps://github.com/danielroe/beasties#readme ↗