rollup-plugin-lightningcss

1.0.0 verified Mon Apr 27 auth: no javascript

A Rollup plugin that uses Parcel's LightningCSS for CSS transformation and minification. Version 1.0.0, released recently. It integrates LightningCSS into Rollup's build pipeline, supporting CSS minification and source map generation via the `generateBundle` hook. Compared to other CSS plugins (e.g., rollup-plugin-postcss), it leverages LightningCSS's native performance and modern CSS features. Currently, CSS files are output at the same level as the entrypoint; output destination is not configurable.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported ↓

cause Using require() to load an ESM-only package.

fix

Use import syntax or set type: 'module' in package.json.

error TypeError: lightningcss is not a function ↓

cause Importing the plugin as a named export instead of default.

fix

Use default import: import lightningcss from 'rollup-plugin-lightningcss'.

error [!] (plugin lightningcss) Error: ... ↓

cause Invalid options passed to the plugin (e.g., unsupported LightningCSS options).

fix

Review LightningCSS documentation and ensure options match the expected configuration.

Warnings

breaking CSS output destination is not configurable; all files placed at the same level. ↓

fix Use Rollup's assetFileNames option to control output paths if needed, or handle file movement post-build.

gotcha Plugin only transforms separate CSS files; CSS imported in JS via CSS modules not supported. ↓

fix Use additional plugins (e.g., @rollup/plugin-styles) if you need CSS module support.

gotcha Source maps only generated if sourceMap option is explicitly set to true. ↓

fix Set sourceMap: true in plugin options to enable source maps.

Install

npm install rollup-plugin-lightningcss

yarn add rollup-plugin-lightningcss

pnpm add rollup-plugin-lightningcss

Imports

default

wrong

const lightningcss = require('rollup-plugin-lightningcss')

correct

import lightningcss from 'rollup-plugin-lightningcss'

The plugin is ESM-only; CommonJS require is not supported.

lightningcss

wrong

import { lightningcss } from 'rollup-plugin-lightningcss'

correct

import lightningcss from 'rollup-plugin-lightningcss'

Default export only; named export does not exist.

type Options
```
import type { Options } from 'rollup-plugin-lightningcss'
```
Type import for TypeScript users; Options is exported as a named type.

Quickstart

Minifies CSS files using LightningCSS with Rollup, enabling source maps and specifying browserslist.

import lightningcss from 'rollup-plugin-lightningcss';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    lightningcss({
      minify: true,
      sourceMap: true,
      browserslist: '>= 0.5%'
    })
  ]
};