DEV Community

Alex Spinov
Alex Spinov

Posted on

Lightning CSS Has a Free Rust-Powered CSS Tool — Here's How to Use It

#css #rust #performance #webdev

PostCSS with autoprefixer, cssnano, and CSS modules takes seconds on large projects. Lightning CSS does all three in one tool — 100x faster, written in Rust.

What Is Lightning CSS?

Lightning CSS is an extremely fast CSS parser, transformer, bundler, and minifier. It handles vendor prefixes, CSS modules, nesting, and minification — all in one pass.

Speed Comparison

Task PostCSS + plugins Lightning CSS
Autoprefixer 200ms 2ms
Minification 150ms 1ms
CSS Modules 100ms 1ms
All combined 450ms 4ms

Quick Start 

npm install -D lightningcss-cli
npx lightningcss --minify --bundle input.css -o output.css
Enter fullscreen mode Exit fullscreen mode

What It Replaces

Lightning CSS replaces multiple PostCSS plugins:

PostCSS Plugin Lightning CSS
autoprefixer Built-in (--targets)
cssnano Built-in (--minify)
postcss-nesting Built-in
postcss-custom-media Built-in
postcss-modules Built-in (--css-modules)

Usage

CLI 

# Minify + autoprefix for specific browsers
npx lightningcss --minify --targets '>= 0.25%' input.css -o output.css

# CSS Modules
npx lightningcss --css-modules input.css -o output.css

# Bundle (resolve @import)
npx lightningcss --bundle --minify entry.css -o output.css
Enter fullscreen mode Exit fullscreen mode

Node.js API 

import { transform, bundle } from 'lightningcss';

const { code, map } = transform({
  filename: 'style.css',
  code: Buffer.from(cssString),
  minify: true,
  targets: { chrome: 95 << 16, firefox: 90 << 16, safari: 14 << 16 },
  cssModules: true,
});
Enter fullscreen mode Exit fullscreen mode

Vite Integration 

// vite.config.ts
export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%')),
    },
  },
  build: {
    cssMinify: 'lightningcss',
  },
};
Enter fullscreen mode Exit fullscreen mode

Modern CSS Features (Auto-Downgraded)

Lightning CSS transforms modern CSS for older browsers automatically:

/* You write modern CSS */
.card {
  color: oklch(70% 0.15 200);
  @media (width >= 768px) {
    display: grid;
    gap: 1rem;
  }
  & .title {
    font-size: 1.5rem;
  }
}

/* Lightning CSS outputs compatible CSS */
.card {
  color: #2aa3a3;
}
@media (min-width: 768px) {
  .card {
    display: grid;
    gap: 1rem;
  }
}
.card .title {
  font-size: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

Key Features

  • 100x faster than PostCSS
  • Autoprefixer — automatic vendor prefixes
  • Minification — smaller than cssnano output
  • CSS Modules — scoped class names
  • Nesting — native CSS nesting support
  • Bundling — resolve @import statements
  • Modern CSS — oklch, container queries, cascade layers

Get Started

Optimizing your web app? My Apify scrapers deliver optimized data feeds. Custom solutions: spinov001@gmail.com

Top comments (0)