ALT Lightning CSS is now used for CSS minification by default. You can use the build.cssMinify: 'esbuild' option to switch back to esbuild. Note that you need to install esbuild as a devDependency.

ALT oxvg total time: 30.85ms, optimisation time 25.32ms svgo (node) total time: 383.36ms, optimization time: 89ms svgo (bun) total time: 222.16ms, optimization time: 69ms

ALT Chart of lightningcss downloads from npm in the last year, trending up. Between May 31st and June 6th, 2024, there were 1,015,361 downloads.

ALT In a real large-scale web application, we have integrated the Rsbuild Lightning CSS plugin and used Rsdoctor to analyze the changes in build time: CSS compilation time was reduced from 8.4s to 0.12s, a 70x improvement. The overall build time was reduced from 33.1s to 25.4s, a 30% increase.

ALT Screenshot of PR merging lightningcss support into next.js

ALT html { color-scheme: light dark; } html[data-theme=light] { color-scheme: light; } html[data-theme=dark] { color-scheme: dark; } button { background: light-dark(#aaa, #444); }

ALT Input CSS sets `color-scheme: dark light` on the `:root`, and overrides it to light or dark based on the data-theme attribute. The `.foo` selector sets `color: light-dark(yellow, green)`. The output CSS adds definitions for the `--lightningcss-light` and `--lightningcss-dark` variables wherever `color-scheme` is set. When light, `--lightningcss-light` is set to `initial`, and when dark it is set to whitespace. The color is compiled to ` var(--lightningcss-light, #ff0) var(--lightningcss-dark, green)` so that variable fallback generates the right value based on the theme.

ALT .foo { color: hsl(from yellow h s l / var(--alpha)); } becomes: .foo { color: hsla(60, 100%, 50%, var(--alpha)); }