rollup-plugin-critical

rollup-plugin-critical

Vite.js & Rollup plugin for generating critical CSS that uses the critical generator under the hood.

Install

npm i -D rollup-plugin-critical

Usage

// rollup.config.js

import PluginCritical from 'rollup-plugin-critical';

export default {
  input: 'index.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [
    PluginCritical({
        criticalUrl: 'https://nystudio107.com/',
        criticalBase: './',
        criticalPages: [
            { uri: '', template: 'index' },
            { uri: 'about', template: 'about/index' },
        ],
        criticalConfig: {
        },
    }),
  ],
}

Options

criticalUrl: string

The base URL to use in combination with the criticalPages uris to determine the URLs to scrape for Critical CSS.

This can also be a file system path. This is combined with criticalPages.uri (see below) to determine pages to scrap for critical CSS.

Determines the criticalConfig.src property (see below)

criticalBase: string

The base file system path to where the generated Critical CSS file should be saved.

This is combined with criticalPages.template (see below) with _critical.min.css appended to it to determine the saved critical CSS file name.

Determines the criticalConfig.target property (see below)

criticalPages: array of objects

An array objects that contain the page uris that are combined with the criticalUrl to determine the URLs to scrape for Critical CSS.

The resulting files are named with the template path, and saved to the criticalBase directory

criticalConfig: object

This is the full config for critical that is passed through to the critical package.

You may optionally override any properties you like here. The default values passed in are:

const defaultCriticalConfig: Partial<CriticalConfig> = {
    inline: false,
    extract: false,
    width: 1200,
    height: 1200,
    penthouse: {
        blockJSRequests: false
    }
};

The following critical config properties are set dynamically by rollup-plugin-critical, but can be overridden via criticalConfig:

• css - set to the css files that are generated in the Rollup build
• base - property is set to criticalBase
• src - derived from criticalUrl and criticalPages.uri
• target - derived from criticalPages.template with _critical.min.css appended to it. If the inline option is set to true, the suffix .html is appended instead.

License

MIT © nystudio107

Changelog

1.0.15 - 2025.02.02

Changed

• Updated to Node 22 & npm 11
• Updated to latest deps