https://github.com/nystudio107/rollup-plugin-critical

Vite.js & Rollup plugin for generating critical CSS
https://github.com/nystudio107/rollup-plugin-critical

critical critical-css rollup rollup-plugin vite vitejs

Last synced: about 1 month ago
JSON representation

Vite.js & Rollup plugin for generating critical CSS

• Host: GitHub
• URL: https://github.com/nystudio107/rollup-plugin-critical
• Owner: nystudio107
• License: mit
• Created: 2021-05-30T01:42:33.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-11-22T23:00:38.000Z (6 months ago)
• Last Synced: 2024-03-25T12:09:19.820Z (about 2 months ago)
• Topics: critical, critical-css, rollup, rollup-plugin, vite, vitejs
• Language: TypeScript
• Homepage:
• Size: 397 KB
• Stars: 86
• Watchers: 6
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Lists

• awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
• awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
• awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
• awesome-viter - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
• awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
• awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)
• awesome-vite - rollup-plugin-critical - Generate critical CSS. (Plugins / Framework-agnostic Plugins)

README

        
![Build](https://github.com/nystudio107/rollup-plugin-critical/actions/workflows/node.js.yml/badge.svg)

![Coverage Badge](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/khalwat/550f6ee414a26e0c8eae7cb6af3c214e/raw/rollup-plugin-critical__heads_master.json)

[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/?branch=master)

[![Code Coverage](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/?branch=master)

[![Build Status](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/badges/build.png?b=master)](https://scrutinizer-ci.com/g/nystudio107/rollup-plugin-critical/build-status/master)

# rollup-plugin-critical

[Vite.js](https://vitejs.dev/) & [Rollup](https://rollupjs.org/) plugin for generating critical CSS that uses the [critical](https://github.com/addyosmani/critical) generator under the hood.

## Install

```bash

npm i -D rollup-plugin-critical

```

## Usage

```js

// 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` `uri`s 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 `uri`s 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](https://github.com/addyosmani/critical#options) that is passed through to the `critical` package.

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

```ts

const defaultCriticalConfig: Partial = {

    inline: false,

    extract: false,

    width: 1200,

    height: 1200,

    penthouse: {

        blockJSRequests: false

    }

};

```

The following [critical config properties](https://github.com/addyosmani/critical#options) 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](LICENSE) © [nystudio107](https://nystudio107.com)