Registry / web-framework / rollup-plugin-critical

rollup-plugin-critical

library1.0.15jsnpmunverified

Rollup plugin for generating critical CSS using the critical package. Version 1.0.15 is current. It integrates with Rollup build process to extract and inline critical CSS for pages defined by URLs or filesystem paths. Key differentiators: supports multiple pages, custom critical configuration, and optional inlining. Ships TypeScript types. Release cadence: occasional updates. Compared to alternatives like critters, this plugin is specifically designed for Rollup/Vite and offers more configuration flexibility.

web-framework devops

npm install rollup-plugin-critical

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-CRIT

rollup-plugin-critical

web-frameworkjavascriptv1.0.15

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PluginCritical

✓ import PluginCritical from 'rollup-plugin-critical'

✗ const PluginCritical = require('rollup-plugin-critical')

Default export; named export also available as rollupPluginCritical. Since v1.0.13, provides conditional exports for ESM and CJS.

rollupPluginCritical

✓ import { rollupPluginCritical } from 'rollup-plugin-critical'

Named export, same function as default. Use if you prefer named imports.

PluginCriticalOptions

✓ import type { PluginCriticalOptions } from 'rollup-plugin-critical'

TypeScript type for options object. Available in v1.0.6+.

Basic setup for rollup-plugin-critical to generate critical CSS for multiple pages.

// rollup.config.js import PluginCritical from 'rollup-plugin-critical'; export default { input: 'src/index.js', output: { dir: 'dist', format: 'es', }, plugins: [ PluginCritical({ criticalUrl: 'https://example.com', criticalBase: './dist', criticalPages: [ { uri: '', template: 'index' }, { uri: 'about', template: 'about/index' }, ], criticalConfig: { inline: false, width: 1200, height: 1200, }, }), ], };

Debug

Known issues

breakingThe `minify` option was removed in v1.0.8 due to its removal from critical v4.

fix

Remove `minify` from criticalConfig; use an external minifier if needed.

affects: >=1.0.8

breakingCJS/ESM import may fail for projects with `type: module` before v1.0.13 due to missing conditional exports.

fix

Upgrade to v1.0.13 or later.

affects: <1.0.13

breakingIn v1.0.11 the plugin was bundled as CJS, causing issues in ESM projects. v1.0.12 reverted to CJS default, v1.0.13 added proper conditional exports.

fix

Use v1.0.13 or later for both ESM and CJS support.

affects: 1.0.11

deprecatedThe `critical` package is ESM-only since v5; rollup-plugin-critical v1.0.12+ requires Node 14+ and ESM-compatible environment.

fix

Ensure your project can handle ESM. Use Node 14+ and set `type: module` in package.json if needed.

affects: >=1.0.12

gotchaThe `css` option in criticalConfig cannot be set manually; it is overridden by the plugin to include the built CSS files.

fix

Do not provide `css` in criticalConfig; the plugin handles it.

affects: *

Errors

Common errors & fixes

ERR_REQUIRE_ESM: require() of ES Module /path/to/node_modules/critical/... from /path/to/rollup-plugin-critical/... not supported.

The `critical` package is ESM-only, but older versions of rollup-plugin-critical try to require it in CJS.

fix

Upgrade rollup-plugin-critical to v1.0.13+, or switch your project to ESM.

Module not found: Can't resolve 'rollup-plugin-critical'

Missing or outdated package.json exports field; older versions did not have conditional exports.

fix

Update to v1.0.13+ or adjust your import path (e.g., require('rollup-plugin-critical/dist/index.js')).

TypeError: PluginCritical is not a function

Using named import instead of default, or importing from wrong path.

fix

Use default import: `import PluginCritical from 'rollup-plugin-critical'`.

Upgrade

Version history

1.0.15latest on npm

Audit

Dependencies

criticalrequiredCore dependency for generating critical CSS

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nystudio107/rollup-plugin-critical ↗

packagehttps://www.npmjs.com/package/rollup-plugin-critical ↗