vite-plugin-beasties

A Vite plugin that uses beasties to embed critical CSS in your HTML pages.

Features

• 🚀 Automatically identifies and inlines critical CSS
• 🧹 Supports pruning the CSS files to remove inlined styles from external stylesheets
• 🔄 Works with Vite's build process using the transformIndexHtml hook
• ⚙️ Full access to beasties configuration options

Installation

# npm
npm install -D vite-plugin-beasties

# yarn
yarn add -D vite-plugin-beasties

# pnpm
pnpm add -D vite-plugin-beasties

Usage

Add the plugin to your vite.config.js/ts:

// vite.config.js
import { defineConfig } from 'vite'
import { beasties } from 'vite-plugin-beasties'

export default defineConfig({
  plugins: [
    beasties({
      // Plugin options
      options: {
        // Beasties library options
        preload: 'swap',
        pruneSource: true, // Enable pruning CSS files
        inlineThreshold: 4000, // Inline stylesheets smaller than 4kb
      },
      // Filter to apply beasties only to specific HTML files
      filter: path => path.endsWith('.html'),
    }),
  ],
})

Options

Plugin Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | options | Object | {} | Options passed to the beasties constructor | | filter | Function | (path) => path.endsWith('.html') | Filter function to determine which HTML files to process |

Beasties Options

See the beasties documentation for all available options.

Common options include:

• preload: Strategy for loading non-critical CSS ('js', 'js-lazy', 'media', 'swap', 'swap-high', 'swap-low', false)
• pruneSource: Whether to update external CSS files to remove inlined styles
• inlineThreshold: Size limit in bytes to inline an entire stylesheet
• minimumExternalSize: If the non-critical part of a CSS file is smaller than this, the entire file will be inlined
• additionalStylesheets: Additional stylesheets to consider for critical CSS

💻 Development

• Clone this repository
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

License

MIT

Published under MIT License.