{"id":22717,"library":"vite-plugin-lightningcss","title":"Vite plugin for Lightning CSS","description":"A Vite plugin that integrates Lightning CSS, a fast CSS parser, transformer, bundler, and minifier. Version 0.0.5 (early stage). It replaces PostCSS for preprocessing, offering faster performance with built-in autoprefixing, CSS nesting, and minification. Key differentiator: significant speed improvement over PostCSS for large CSS bundles.","status":"active","version":"0.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/lawrencecchen/vite-plugin-lightningcss","tags":["javascript","css","autoprefixer","prefix","vite","typescript"],"install":[{"cmd":"npm install vite-plugin-lightningcss","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-lightningcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-lightningcss","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export; ESM-only. CommonJS require is not supported.","wrong":"const lightningcss = require('vite-plugin-lightningcss')","symbol":"lightningcss","correct":"import lightningcss from 'vite-plugin-lightningcss'"},{"note":"The module exports a function as default; named import will fail.","wrong":"import { lightningcss } from 'vite-plugin-lightningcss'","symbol":"lightningcss (as function)","correct":"import lightningcss from 'vite-plugin-lightningcss'; export default { plugins: [lightningcss()] }"},{"note":"TypeScript users can import the Options type for plugin configuration.","wrong":null,"symbol":"Options","correct":"import type { Options } from 'vite-plugin-lightningcss'"}],"quickstart":{"code":"// vite.config.js\nimport lightningcss from 'vite-plugin-lightningcss';\n\nexport default {\n  plugins: [lightningcss()]\n};","lang":"javascript","description":"Shows minimal setup to add the plugin to a Vite project."},"warnings":[{"fix":"Pin to exact version or monitor releases for breaking changes.","message":"Plugin is in early development (v0.0.5); API may change without major version bump.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Remove PostCSS plugins from vite.config.js if using lightningcss.","message":"Lightning CSS replaces PostCSS; do not use both simultaneously for CSS processing unless explicitly configured.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Replace 'browserslist' with 'targets' in plugin options.","message":"The 'browserslist' option is deprecated; use 'targets' instead.","severity":"deprecated","affected_versions":">=0.0.3"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use 'import lightningcss from 'vite-plugin-lightningcss'' instead of '{ lightningcss }'.","cause":"Using named import instead of default import.","error":"Error: [vite] Internal server error: lightningcss is not a function"},{"fix":"Run 'npm install vite-plugin-lightningcss --save-dev'.","cause":"Package not installed.","error":"Error: Cannot find module 'vite-plugin-lightningcss'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}