Lightning CSS

An extremely fast CSS parser, transformer, bundler, and minifier.

Playground • Docs • Rust docs • npm • GitHub

Light speed

Lightning CSS is over 100x faster than comparable JavaScript-based tools. It can minify over 2.7 million lines of code per second on a single thread.

Lightning CSS is written in Rust, a native systems programming language. It was built with performance in mind from the start, designed to make efficient use of memory, and limit AST passes.

Get started →

Time to minify Bootstrap 4 (~10,000 lines). See the readme for more benchmarks.

Live in the future

Lightning CSS lets you use modern CSS features and future syntax today. Features such as CSS nesting, custom media queries, high gamut color spaces, logical properties, and new selector features are automatically converted to more compatible syntax based on your browser targets.

Lightning CSS also automatically adds vendor prefixes for your browser targets, so you can keep your source code clean and repetition free.

Learn more →

Target Browsers

last 2 versions

Input

.foo {
  color: oklab(59.686% 0.1009 0.1192);
}

Output

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

Crush it!

Lightning CSS is not only fast when it comes to build time. It produces smaller output, so your website loads faster too.

The Lightning CSS minifier combines longhand properties into shorthands, removes unnecessary vendor prefixes, merges compatible adjacent rules, removes unnecessary default values, reduces calc() expressions, shortens colors, minifies gradients, and much more.

Details →

Output size after minifying Bootstrap 4 (~10,000 lines). See the readme for more benchmarks.

CSS modules

Lightning CSS supports CSS modules, which locally scope classes, ids, @keyframes, CSS variables, and more. This ensures that there are no unintended name clashes between different CSS files.

Lightning CSS generates a mapping of the original names to scoped names, which can be used from your JavaScript. This also enables unused classes and variables to be tree-shaken.

Documentation →

.heading {
  composes: typography from './typography.css';
  color: gray;
}
.EgL3uq_heading {
  color: gray;
}
{
  "heading": {
    "name": "EgL3uq_heading",
    "composes": [{
      "type": "dependency",
      "name": "typography",
      "specifier": "./typography.css"
    }]
  }
}

Browser grade

Lightning CSS is written in Rust, using the cssparser and selectors crates created by Mozilla and used by Firefox. These provide a solid CSS-parsing foundation on top of which Lightning CSS implements support for all specific CSS rules and properties.

Lightning CSS fully parses every CSS rule, property, and value just as a browser would. This reduces duplicate work for transformers, leading to improved performance and minification.

Custom transforms →

Background([Background {
  image: Url(Url { url: "img.png" }),
  color: CssColor(RGBA(RGBA { red: 0, green: 0, blue: 0, alpha: 0 })),
  position: Position {
    x: Length(Dimension(Px(20.0))),
    y: Length(Dimension(Px(10.0))),
  },
  repeat: BackgroundRepeat {
    x: Repeat,
    y: Repeat,
  },
  size: Explicit {
    width: LengthPercentage(Dimension(Px(50.0))),
    height: LengthPercentage(Dimension(Px(100.0))),
  },
  attachment: Scroll,
  origin: PaddingBox,
  clip: BorderBox,
}])