Vite plugin for Lightning CSS

0.0.5 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: [vite] Internal server error: lightningcss is not a function ↓

cause Using named import instead of default import.

fix

Use 'import lightningcss from 'vite-plugin-lightningcss'' instead of '{ lightningcss }'.

error Error: Cannot find module 'vite-plugin-lightningcss' ↓

cause Package not installed.

fix

Run 'npm install vite-plugin-lightningcss --save-dev'.

Warnings

gotcha Plugin is in early development (v0.0.5); API may change without major version bump. ↓

fix Pin to exact version or monitor releases for breaking changes.

gotcha Lightning CSS replaces PostCSS; do not use both simultaneously for CSS processing unless explicitly configured. ↓

fix Remove PostCSS plugins from vite.config.js if using lightningcss.

deprecated The 'browserslist' option is deprecated; use 'targets' instead. ↓

fix Replace 'browserslist' with 'targets' in plugin options.

Install

npm install vite-plugin-lightningcss

yarn add vite-plugin-lightningcss

pnpm add vite-plugin-lightningcss

Imports

lightningcss

wrong

const lightningcss = require('vite-plugin-lightningcss')

correct

import lightningcss from 'vite-plugin-lightningcss'

Default export; ESM-only. CommonJS require is not supported.

lightningcss (as function)

wrong

import { lightningcss } from 'vite-plugin-lightningcss'

correct

import lightningcss from 'vite-plugin-lightningcss'; export default { plugins: [lightningcss()] }

The module exports a function as default; named import will fail.

Options
```
import type { Options } from 'vite-plugin-lightningcss'
```
TypeScript users can import the Options type for plugin configuration.

Quickstart

Shows minimal setup to add the plugin to a Vite project.

// vite.config.js
import lightningcss from 'vite-plugin-lightningcss';

export default {
  plugins: [lightningcss()]
};