Registry / devops / lightningcss-loader

lightningcss-loader

library3.0.1jsnpmunverified

lightningcss-loader is a Webpack loader and minifier plugin that integrates the high-performance `lightningcss` engine into the Webpack build process. It provides a fast alternative for CSS processing, including features like prefixing, transpilation, and minification. The current stable version is `3.0.1`, with releases occurring regularly, including major updates that align with `lightningcss` capabilities. A key differentiator is its ability to replace functionality commonly provided by `postcss-loader` (specifically `autoprefixer` and `postcss-preset-env`) due to `lightningcss`'s built-in capabilities, leading to potentially significant build time improvements. It also offers a dedicated `LightningCssMinifyPlugin` for `optimization.minimizer` in Webpack 5.

devops web-framework

npm install lightningcss-loader

github ↗package ↗

INSTALL

IMPORT

SIG · LIGHTNINGCSS-LOADE

lightningcss-loader

devopsjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

LightningCssMinifyPlugin

✓ import { LightningCssMinifyPlugin } from 'lightningcss-loader';

✗ const LightningCssMinifyPlugin = require('lightningcss-loader').LightningCssMinifyPlugin;

Used in `webpack.config.js` for CSS minification. Supports both CommonJS `require` (via destructuring) and ES module `import` syntax. The README shows `require` for configuration files.

lightningcss-loader (loader string)

✓ { loader: 'lightningcss-loader' }

Used as a string identifier within Webpack's `module.rules` `use` array to apply the loader.

LightningCSS (implementation)

✓ import LightningCSS from 'lightningcss';

✗ import { LightningCSS } from 'lightningcss';

The `lightningcss` package itself, passed as an `implementation` option to the loader or plugin. It is a default export from the `lightningcss` package.

Demonstrates how to configure `LightningCssMinifyPlugin` in Webpack 5's `optimization` section for efficient CSS minification, including passing the `lightningcss` implementation.

// webpack.config.js const { LightningCssMinifyPlugin } = require('lightningcss-loader'); const LightningCSS = require('lightningcss'); module.exports = { optimization: { minimize: true, minimizer: [ new LightningCssMinifyPlugin({ implementation: LightningCSS, // other lightningcss options, e.g., targets, drafts // targets: ['chrome 100'], // drafts: { // customMedia: true // } }) ] }, // ... rest of your webpack config };

Debug

Known issues

breakingThe package and plugin were renamed from `parcel-css-loader` to `lightningcss-loader` and `ParcelCssMinifyPlugin` to `LightningCssMinifyPlugin` in `v2.0.0`. Projects must update package names and configuration.

fix

Remove `parcel-css-loader` and `@parcel/css`, then install `lightningcss-loader` and `lightningcss`. Update all references in `webpack.config.js` and `package.json`.

affects: >=2.0.0

gotchaWhen processing `Custom media queries`, the loader uses a heuristic method. If `@custom-media` rules are defined in files containing other CSS, it may lead to duplicate CSS output and increased bundle size.

fix

Isolate `@custom-media` definitions into dedicated CSS files that contain only these custom media queries to avoid duplication.

affects: >=3.0.0

gotchaPrior to `v2.1.0`, users might encounter errors indicating that `browserslist` cannot be found, requiring explicit configuration or an older loader version.

fix

Ensure `browserslist` is configured in your `package.json` or a separate config file. Upgrade to `lightningcss-loader@^2.1.0` or newer to get the fix for this issue.

affects: <2.1.0

gotchaThe `implementation` option for both the loader and the plugin requires the `lightningcss` package to be installed as a separate dependency and correctly passed (e.g., `require('lightningcss')`). Incorrect import or missing installation will lead to runtime errors.

fix

Install `lightningcss` separately via `npm install lightningcss` or `pnpm add lightningcss`. Ensure it's imported as a default export: `const LightningCSS = require('lightningcss')` or `import LightningCSS from 'lightningcss'`.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'parcel-css-loader' in...

Attempting to use the old package name after the `v2.0.0` rename.

fix

Uninstall `parcel-css-loader` and install `lightningcss-loader`. Update all references in `webpack.config.js` and `package.json`.

TypeError: LightningCssMinifyPlugin is not a constructor (or ReferenceError: ParcelCssMinifyPlugin is not defined)

Incorrectly importing `LightningCssMinifyPlugin` or using the deprecated `ParcelCssMinifyPlugin` name.

fix

Ensure `LightningCssMinifyPlugin` is correctly imported as a named export from `lightningcss-loader` and used as `new LightningCssMinifyPlugin()` in your Webpack 5 configuration.

Error: Can not find `browserslist`

Missing `browserslist` configuration in the project or an issue in older versions of the loader (`<v2.1.0`).

fix

Provide a `browserslist` configuration in your `package.json` or a dedicated file (e.g., `.browserslistrc`). If using an older version of the loader, upgrade to `lightningcss-loader@^2.1.0` or newer.

LightningCSS: The `implementation` option must be `lightningcss`.

The `lightningcss` package was not correctly provided to the `implementation` option, either due to incorrect import or not being installed.

fix

Install `lightningcss` (`npm install lightningcss`) and ensure it's passed as a default export, e.g., `new LightningCssMinifyPlugin({ implementation: require('lightningcss') })`.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

webpackrequiredPeer dependency for Webpack integration (>=5).

lightningcssrequiredRuntime dependency for CSS processing and minification, must be installed separately and often passed as an 'implementation' option.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/fz6m/lightningcss-loader ↗

packagehttps://www.npmjs.com/package/lightningcss-loader ↗