{"id":13463,"library":"lightningcss-loader","title":"Webpack Loader and Minifier for LightningCSS","description":"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.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/fz6m/lightningcss-loader","tags":["javascript","css-loader","lightningcss","lightningcss-loader","parcel","webpack-loader","webpack-css-minifier","typescript"],"install":[{"cmd":"npm install lightningcss-loader","lang":"bash","label":"npm"},{"cmd":"yarn add lightningcss-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add lightningcss-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Webpack integration (>=5).","package":"webpack","optional":false},{"reason":"Runtime dependency for CSS processing and minification, must be installed separately and often passed as an 'implementation' option.","package":"lightningcss","optional":false}],"imports":[{"note":"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.","wrong":"const LightningCssMinifyPlugin = require('lightningcss-loader').LightningCssMinifyPlugin;","symbol":"LightningCssMinifyPlugin","correct":"import { LightningCssMinifyPlugin } from 'lightningcss-loader';"},{"note":"Used as a string identifier within Webpack's `module.rules` `use` array to apply the loader.","symbol":"lightningcss-loader (loader string)","correct":"{ loader: 'lightningcss-loader' }"},{"note":"The `lightningcss` package itself, passed as an `implementation` option to the loader or plugin. It is a default export from the `lightningcss` package.","wrong":"import { LightningCSS } from 'lightningcss';","symbol":"LightningCSS (implementation)","correct":"import LightningCSS from 'lightningcss';"}],"quickstart":{"code":"// webpack.config.js\nconst { LightningCssMinifyPlugin } = require('lightningcss-loader');\nconst LightningCSS = require('lightningcss');\n\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new LightningCssMinifyPlugin({\n        implementation: LightningCSS,\n        // other lightningcss options, e.g., targets, drafts\n        // targets: ['chrome 100'],\n        // drafts: {\n        //   customMedia: true\n        // }\n      })\n    ]\n  },\n  // ... rest of your webpack config\n};","lang":"javascript","description":"Demonstrates how to configure `LightningCssMinifyPlugin` in Webpack 5's `optimization` section for efficient CSS minification, including passing the `lightningcss` implementation."},"warnings":[{"fix":"Remove `parcel-css-loader` and `@parcel/css`, then install `lightningcss-loader` and `lightningcss`. Update all references in `webpack.config.js` and `package.json`.","message":"The 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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Isolate `@custom-media` definitions into dedicated CSS files that contain only these custom media queries to avoid duplication.","message":"When 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"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.","message":"Prior to `v2.1.0`, users might encounter errors indicating that `browserslist` cannot be found, requiring explicit configuration or an older loader version.","severity":"gotcha","affected_versions":"<2.1.0"},{"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'`.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Uninstall `parcel-css-loader` and install `lightningcss-loader`. Update all references in `webpack.config.js` and `package.json`.","cause":"Attempting to use the old package name after the `v2.0.0` rename.","error":"Module not found: Error: Can't resolve 'parcel-css-loader' in..."},{"fix":"Ensure `LightningCssMinifyPlugin` is correctly imported as a named export from `lightningcss-loader` and used as `new LightningCssMinifyPlugin()` in your Webpack 5 configuration.","cause":"Incorrectly importing `LightningCssMinifyPlugin` or using the deprecated `ParcelCssMinifyPlugin` name.","error":"TypeError: LightningCssMinifyPlugin is not a constructor (or ReferenceError: ParcelCssMinifyPlugin is not defined)"},{"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.","cause":"Missing `browserslist` configuration in the project or an issue in older versions of the loader (`<v2.1.0`).","error":"Error: Can not find `browserslist`"},{"fix":"Install `lightningcss` (`npm install lightningcss`) and ensure it's passed as a default export, e.g., `new LightningCssMinifyPlugin({ implementation: require('lightningcss') })`.","cause":"The `lightningcss` package was not correctly provided to the `implementation` option, either due to incorrect import or not being installed.","error":"LightningCSS: The `implementation` option must be `lightningcss`."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}