Registry / web-framework / vite-plugin-beasties

vite-plugin-beasties

library0.4.2jsnpmunverified

A Vite plugin that uses the beasties library to automatically identify, inline, and prune critical CSS in HTML pages during build. Current stable version is 0.4.2, with active development and monthly releases. Key differentiators: integrates directly with Vite's transformIndexHtml hook, supports multiple preload strategies (swap, media, JS-based), can prune inlined styles from external CSS files, and respects Vite's public path handling. Compared to critters or other critical CSS tools, it offers a more seamless Vite integration and broader preload strategy options.

web-framework devops

npm install vite-plugin-beasties

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-BEASTI

vite-plugin-beasties

web-frameworkjavascriptv0.4.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–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

beasties

✓ import { beasties } from 'vite-plugin-beasties'

✗ import beasties from 'vite-plugin-beasties'

Named export, not default. Must use destructured import.

VitePluginBeastiesOptions

✓ import type { VitePluginBeastiesOptions } from 'vite-plugin-beasties'

Type import for plugin options; available in TypeScript.

require('vite-plugin-beasties')

✓ const { beasties } = require('vite-plugin-beasties')

✗ const beasties = require('vite-plugin-beasties')

CommonJS users must destructure the named export.

Configures vite-plugin-beasties with swap preload strategy, source pruning, and 4KB inline threshold.

// vite.config.ts import { defineConfig } from 'vite' import { beasties } from 'vite-plugin-beasties' export default defineConfig({ plugins: [ beasties({ options: { preload: 'swap', pruneSource: true, inlineThreshold: 4000 }, filter: (path) => path.endsWith('.html') }) ] })

Debug

Known issues

breakingv0.4.0 now uses postcss-safe-parser to parse mangled CSS; may change behavior for malformed CSS.

fix

Ensure your CSS is valid or test with postcss-safe-parser.

affects: >=0.4.0

deprecatedOptions passed directly to beasties() are deprecated as of v0.3.0; use nested `options` object.

fix

Move beasties options into the `options` property.

affects: >=0.3.0 <0.4.0

gotchaThe plugin only applies during Vite's build, not dev server.

fix

Use a separate approach for dev (e.g., critical CSS loader).

affects: >=0.3.0

gotchapruneSource deletes inlined CSS from external stylesheets; ensure you have backups.

fix

Set pruneSource: false if you want to keep original stylesheets.

affects: >=0.3.0

Errors

Common errors & fixes

Cannot find module 'beasties'

Missing or unmet peer dependency for beasties

fix

npm install -D beasties

beasties is not a function

Default import used instead of named import

fix

import { beasties } from 'vite-plugin-beasties'

ENOENT: no such file or directory, open '/path/to/style.css'

CSS file referenced in HTML is missing or not resolved by Vite

fix

Ensure the CSS file exists and is included in Vite's build pipeline

Upgrade

Version history

0.4.2latest on npm

Audit

Dependencies

beastiesrequiredCore library for critical CSS extraction and inlining

viterequiredPeer dependency, required as a Vite plugin

Agent activity

6 hits · last 30 days

node

Resources

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

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