Lightning CSS

Lightning CSS is an extremely fast CSS parser, transformer, bundler, and minifier written in Rust. It handles vendor prefixing, syntax lowering for older browsers, CSS modules, and dead code elimination — all in a single pass at speeds that make JavaScript-based CSS tooling look glacial by comparison.

It powers the CSS pipeline in Parcel and is used by Vite as its CSS minifier. It is available both as a Rust library and as a standalone CLI tool.

Features

• Blazing fast — processes hundreds of thousands of lines of CSS per second; typical projects finish in milliseconds
• Browser targets — automatically adds vendor prefixes and downgrades modern CSS syntax (nesting, oklch(), color-mix(), logical properties, etc.) to match your target browser list
• CSS modules — scoped class names and composition, with a JSON output mapping locals to generated names
• Bundling — resolves and inlines @import statements into a single file
• Minification — removes whitespace, shortens values, merges rules, and eliminates dead code
• Source maps — generates accurate source maps throughout all transforms
• Custom media queries — supports the draft @custom-media spec and compiles it for older browsers
• Draft syntax — supports and compiles CSS nesting, @layer, color-mix(), and other draft/modern features

Installation

As a CLI tool

cargo install lightningcss

Or via npm (ships a pre-built binary):

npm install -g lightningcss-cli

# Debian / Fedora
# Use npm install above — works on all Linux distributions

As a Node.js library

npm install lightningcss

CLI Usage

# Minify a CSS file
lightningcss --minify --bundle --targets '>= 0.25%' input.css -o output.css

# Transform for specific browsers without minifying
lightningcss --targets 'last 2 versions' input.css -o output.css

# Enable CSS modules
lightningcss --css-modules input.css -o output.css

# Bundle @imports into a single file
lightningcss --bundle input.css -o output.css

# Generate a source map
lightningcss --minify --sourcemap input.css -o output.css

# Print to stdout
lightningcss --minify input.css

Browserslist targets

Targets are specified using a browserslist-compatible query:

# Target browsers with more than 0.25% global usage
lightningcss --targets '>= 0.25%' input.css -o output.css

# Target the last 2 versions of each browser
lightningcss --targets 'last 2 versions' input.css -o output.css

# Target specific browsers
lightningcss --targets 'chrome >= 95, firefox >= 90, safari >= 15' input.css -o output.css

What gets transformed

Given this modern CSS:

/* CSS nesting (draft syntax) */
.card {
  color: oklch(50% 0.2 240);

  &:hover {
    color: oklch(60% 0.25 240);
  }

  & .title {
    font-size: 1.5rem;
  }
}

Lightning CSS targeting older browsers will output:

.card {
  color: #1a5fb4;
}
.card:hover {
  color: #1c71d8;
}
.card .title {
  font-size: 1.5rem;
}

Node.js API

For build tool integration, the Node.js API offers the most control:

import { transform, bundle } from "lightningcss";

const { code, map } = transform({
  filename: "style.css",
  code: Buffer.from(cssString),
  minify: true,
  sourceMap: true,
  targets: {
    chrome: 95 << 16,
    firefox: 90 << 16,
    safari: (15 << 16) | (1 << 8),
  },
});

Build tool integration

Lightning CSS is available as a plugin or built-in option for several popular build tools:

• Vite — set css.transformer: 'lightningcss' and build.cssMinify: 'lightningcss' in vite.config.js
• Parcel — used automatically as the default CSS transformer
• webpack — via lightningcss-loader
• Rollup / Rolldown — via community plugins

Performance

On a large production stylesheet (500KB), Lightning CSS typically completes in under 10ms. Comparable JavaScript-based tools (cssnano, postcss) often take 500ms–2s for the same input.