{"id":22520,"library":"unplugin-lightningcss","title":"unplugin-lightningcss","description":"Unplugin Lightning CSS is a build tool plugin that integrates Lightning CSS into Vite, Rollup, esbuild, Webpack, Rspack, Farm, and Vue CLI via the unplugin interface. Version 0.4.5 is the latest stable release, published under an MIT license and maintained by the unplugin team. It offers CSS transformation, CSS modules, and minification with full TypeScript support. Key differentiators include zero-config setup, support for multiple bundlers from a single codebase, and the ability to opt-in to experimental CSS features via the `include` option. The package dropped Node.js 18 and CJS builds in recent major versions, requiring Node >=20.19.0 and ESM-only usage.","status":"active","version":"0.4.5","language":"javascript","source_language":"en","source_url":"https://github.com/unplugin/unplugin-lightningcss","tags":["javascript","unplugin","css","rollup","rolldown","vite","esbuild","webpack","rspack","typescript"],"install":[{"cmd":"npm install unplugin-lightningcss","lang":"bash","label":"npm"},{"cmd":"yarn add unplugin-lightningcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add unplugin-lightningcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency providing the unplugin interface for multi-bundler support","package":"unplugin","optional":false},{"reason":"Peer dependency for CSS transformation engine; installed automatically but must be available","package":"lightningcss","optional":false}],"imports":[{"note":"Package is ESM-only since v0.3.0; use dynamic import or ESM in Node >=20.19.0","wrong":"const LightningCSS = require('unplugin-lightningcss/vite')","symbol":"default (LightningCSS plugin factory)","correct":"import LightningCSS from 'unplugin-lightningcss/vite'"},{"note":"Must use the specific bundler subpath export (e.g., /vite, /rollup, /webpack, /esbuild, /rspack, /farm, /vue-cli)","wrong":"import LightningCSS from 'unplugin-lightningcss'","symbol":"Rollup plugin","correct":"import LightningCSS from 'unplugin-lightningcss/rollup'"},{"note":"Webpack configs often use CommonJS, but this package is ESM-only — use dynamic import or set your webpack config as ES module","wrong":"const LightningCSS = require('unplugin-lightningcss/webpack')","symbol":"Webpack plugin","correct":"const { default: LightningCSS } = await import('unplugin-lightningcss/webpack')"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport LightningCSS from 'unplugin-lightningcss/vite';\n\nexport default defineConfig({\n  plugins: [\n    LightningCSS({\n      options: {\n        // Enable CSS nesting and custom media queries\n        include: Features.Nesting | Features.CustomMediaQueries,\n        // Minify output (default: false in dev, true in prod)\n        minify: true,\n        // CSS modules configuration\n        cssModules: {\n          pattern: '[name]_[local]_[hash:base64:5]',\n        },\n      },\n    }),\n  ],\n});","lang":"typescript","description":"Configures unplugin-lightningcss in Vite with nesting, custom media, minification, and CSS modules."},"warnings":[{"fix":"Upgrade Node.js to version 20.19.0 or later","message":"Node.js 18 dropped in v0.4.0; requires Node >=20.19.0","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Use ESM imports (import) or dynamic import() in CommonJS contexts","message":"CJS build removed in v0.3.0; package is ESM-only","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Explicitly set minify: true or false to avoid unexpected behavior","message":"Options property 'minify' defaults to a function of process.env.NODE_ENV; may not be obvious","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Use correct subpath, e.g., 'unplugin-lightningcss/vite'","message":"Must use bundler-specific subpath import (/vite, /rollup, /webpack, etc.); importing from root 'unplugin-lightningcss' does not export plugin factory","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use `const { default: LightningCSS } = await import('unplugin-lightningcss/webpack')`","message":"In Webpack, require() will fail because package is ESM-only; must use dynamic import or configure webpack to handle ESM","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Add 'rollup-plugin-css-only' to your Rollup config alongside unplugin-lightningcss","message":"Rollup requires an additional CSS plugin (like rollup-plugin-css-only) because Rollup doesn't handle CSS natively","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use dynamic import: `const LightningCSS = (await import('unplugin-lightningcss/vite')).default`","cause":"Package is ESM-only since v0.3.0; require() cannot load ESM modules","error":"ERR_REQUIRE_ESM: require() of ES Module /node_modules/unplugin-lightningcss/... not supported"},{"fix":"Change import to 'unplugin-lightningcss/vite' (or /rollup, /webpack, etc.)","cause":"Root import used instead of bundler-specific subpath","error":"Cannot find module 'unplugin-lightningcss/vite' or its corresponding type declarations"},{"fix":"Set your webpack config file type to 'module' or use dynamic import","cause":"Webpack config using CommonJS require() on an ESM-only package","error":"Unexpected token 'export' (in webpack config with require)"},{"fix":"Use default import: `import LightningCSS from 'unplugin-lightningcss/vite'`","cause":"Importing the default export incorrectly (e.g., using named import instead of default)","error":"TypeError: LightningCSS is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}