Account based inUnited States
About this account
- Account based in
- United States
- Connected via
- United States App Store
Account-level information from X, not a live location or the device used for a specific post.
An extremely fast CSS parser, transformer, bundler, and minifier.
- Tweets59
- Following2
- Followers1.8K
- Likes2
ALT Screenshot of WPT results for Lightning CSS. Shows 24,000 test cases, with a nested tree of test cases by CSS property (e.g. color, background-image, and grid-template-columns).
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
![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);
}](/pic/https%3A%2F%2Fpbs%2Etwimg%2Ecom%2Fmedia%2FGG%2D8VqRWgAAuiYu%2Epng%3Fname%3Dsmall%26format%3Dwebp)
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.