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 critical from 'rollup-plugin-critical'

export default {
  input: 'index.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [
    critical({
        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

matthiasott/rollup-plugin-critical