{"id":22111,"library":"rollup-plugin-lightningcss","title":"rollup-plugin-lightningcss","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/thearchitector/rollup-plugin-lightningcss","tags":["javascript","rollup-plugin","lightningcss","css","browserslist","rollup","plugin","minify"],"install":[{"cmd":"npm install rollup-plugin-lightningcss","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-lightningcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-lightningcss","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The plugin is ESM-only; CommonJS require is not supported.","wrong":"const lightningcss = require('rollup-plugin-lightningcss')","symbol":"default","correct":"import lightningcss from 'rollup-plugin-lightningcss'"},{"note":"Default export only; named export does not exist.","wrong":"import { lightningcss } from 'rollup-plugin-lightningcss'","symbol":"lightningcss","correct":"import lightningcss from 'rollup-plugin-lightningcss'"},{"note":"Type import for TypeScript users; Options is exported as a named type.","wrong":"","symbol":"type Options","correct":"import type { Options } from 'rollup-plugin-lightningcss'"}],"quickstart":{"code":"import lightningcss from 'rollup-plugin-lightningcss';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm',\n    sourcemap: true\n  },\n  plugins: [\n    lightningcss({\n      minify: true,\n      sourceMap: true,\n      browserslist: '>= 0.5%'\n    })\n  ]\n};","lang":"typescript","description":"Minifies CSS files using LightningCSS with Rollup, enabling source maps and specifying browserslist."},"warnings":[{"fix":"Use Rollup's assetFileNames option to control output paths if needed, or handle file movement post-build.","message":"CSS output destination is not configurable; all files placed at the same level.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use additional plugins (e.g., @rollup/plugin-styles) if you need CSS module support.","message":"Plugin only transforms separate CSS files; CSS imported in JS via CSS modules not supported.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set sourceMap: true in plugin options to enable source maps.","message":"Source maps only generated if sourceMap option is explicitly set to true.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import syntax or set type: 'module' in package.json.","cause":"Using require() to load an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module not supported"},{"fix":"Use default import: import lightningcss from 'rollup-plugin-lightningcss'.","cause":"Importing the plugin as a named export instead of default.","error":"TypeError: lightningcss is not a function"},{"fix":"Review LightningCSS documentation and ensure options match the expected configuration.","cause":"Invalid options passed to the plugin (e.g., unsupported LightningCSS options).","error":"[!] (plugin lightningcss) Error: ..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}