Lightning CSS

Lightning CSS

Lightning CSS is an extremely fast CSS parser, transformer, bundler, and minifier written in Rust. It replaces PostCSS + autoprefixer + postcss-preset-env in a single tool.

When to Use This Skill

Use this skill when...	Use something else when...
Configuring CSS processing in Vite	Generating utility classes (use UnoCSS)
Replacing PostCSS/autoprefixer pipeline	Linting CSS rules (use Stylelint)
Setting up browser target transpilation	Writing CSS-in-JS (use framework tooling)
Enabling CSS modules	Formatting CSS code (use Biome/Prettier)
Minifying CSS for production	Need PostCSS plugins with no Lightning CSS equivalent
Bundling CSS @import chains

Core Expertise

• Rust-native: 100x+ faster than PostCSS for transforms
• All-in-one: Replaces autoprefixer, postcss-preset-env, postcss-import, cssnano
• Syntax lowering: Modern CSS to browser-compatible CSS based on targets
• Vendor prefixing: Automatic addition and removal based on targets
• CSS modules: Built-in scoped class names
• Minification: Smaller output than esbuild's CSS minifier
• Bundling: Inlines @import rules with dependency resolution

Installation

# As Vite dependency (most common)
npm add -D lightningcss browserslist

# Standalone CLI
npm add -g lightningcss-cli

# Bun
bun add -d lightningcss browserslist

Vite Integration

Basic Setup

// vite.config.ts
import { defineConfig } from 'vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

With UnoCSS (Recommended Combo)

// vite.config.ts
import UnoCSS from 'unocss/vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  plugins: [UnoCSS()],
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})