GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing lightningcss.dev — Lightning CSS

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 →

Build time

0ms

150ms

300ms

450ms

600ms

544.81ms

17.2ms

4.16ms

CSSNano

ESBuild

Lightning CSS

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

0 KB

40 KB

80 KB

120 KB

160 KB

155.89 KB

156.57 KB

139.74 KB

CSSNano

ESBuild

Lightning CSS

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,
}])

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.