{"id":22588,"library":"vite-plugin-beasties","title":"vite-plugin-beasties","description":"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.","status":"active","version":"0.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/danielroe/beasties","tags":["javascript"],"install":[{"cmd":"npm install vite-plugin-beasties","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-beasties","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-beasties","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for critical CSS extraction and inlining","package":"beasties","optional":false},{"reason":"Peer dependency, required as a Vite plugin","package":"vite","optional":false}],"imports":[{"note":"Named export, not default. Must use destructured import.","wrong":"import beasties from 'vite-plugin-beasties'","symbol":"beasties","correct":"import { beasties } from 'vite-plugin-beasties'"},{"note":"Type import for plugin options; available in TypeScript.","wrong":null,"symbol":"VitePluginBeastiesOptions","correct":"import type { VitePluginBeastiesOptions } from 'vite-plugin-beasties'"},{"note":"CommonJS users must destructure the named export.","wrong":"const beasties = require('vite-plugin-beasties')","symbol":"require('vite-plugin-beasties')","correct":"const { beasties } = require('vite-plugin-beasties')"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { beasties } from 'vite-plugin-beasties'\n\nexport default defineConfig({\n  plugins: [\n    beasties({\n      options: {\n        preload: 'swap',\n        pruneSource: true,\n        inlineThreshold: 4000\n      },\n      filter: (path) => path.endsWith('.html')\n    })\n  ]\n})","lang":"typescript","description":"Configures vite-plugin-beasties with swap preload strategy, source pruning, and 4KB inline threshold."},"warnings":[{"fix":"Ensure your CSS is valid or test with postcss-safe-parser.","message":"v0.4.0 now uses postcss-safe-parser to parse mangled CSS; may change behavior for malformed CSS.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Move beasties options into the `options` property.","message":"Options passed directly to beasties() are deprecated as of v0.3.0; use nested `options` object.","severity":"deprecated","affected_versions":">=0.3.0 <0.4.0"},{"fix":"Use a separate approach for dev (e.g., critical CSS loader).","message":"The plugin only applies during Vite's build, not dev server.","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Set pruneSource: false if you want to keep original stylesheets.","message":"pruneSource deletes inlined CSS from external stylesheets; ensure you have backups.","severity":"gotcha","affected_versions":">=0.3.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install -D beasties","cause":"Missing or unmet peer dependency for beasties","error":"Cannot find module 'beasties'"},{"fix":"import { beasties } from 'vite-plugin-beasties'","cause":"Default import used instead of named import","error":"beasties is not a function"},{"fix":"Ensure the CSS file exists and is included in Vite's build pipeline","cause":"CSS file referenced in HTML is missing or not resolved by Vite","error":"ENOENT: no such file or directory, open '/path/to/style.css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}