NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #4260 most downloaded on npm
A CSS parser, transformer, and minifier written in Rust
Last release 2 months ago
20 Jul 2026
Ships fairly regularly
a new release about every 2 months
Most releases are documented
notes for 37 of 42 stable releases
Nothing withdrawn
no release was ever pulled
4 years old
42 releases · first in 2022
One column per quarter.
Add support for ::highlight by @lucasweng in https://github.com/parcel-bundler/lightningcss/pull/970
::highlight by @lucasweng in https://github.com/parcel-bundler/lightningcss/pull/970:target-before/after/current pseudo-class by @yisibl in https://github.com/parcel-bundler/lightningcss/pull/1185atty with std::io::IsTerminal by @fkeiler in https://github.com/parcel-bundler/lightningcss/pull/1197external to return type of resolve by @sapphi-red in https://github.com/parcel-bundler/lightningcss/pull/1261Enable custom resolvers to mark imports as external. Resolvers may now return {external: string} to mark an import as external. This will leave the @i
{external: string} to mark an import as external. This will leave the @import in the output CSS instead of bundling it. See the docs for details.addDependency function as an option. Dependencies may be used by tools that call Lightning CSS such as bundlers to implement file watching or caching. See the docs for details.mix-blend-mode property supportcolor-scheme keywords as-is instead of normaltransform valuesvar(--foo,) and env(--foo,)scale property or scale() to a numberNothing published for this version
Implement scroll-state container queries
<string> in @property syntaxmigrate to maintained library instead of deprecated `paste`
Fixed crash on process exit when lightningcss was loaded inside a Node.js worker thread on Linux
Fixed crash on process exit when lightningcss was loaded inside a Node.js worker thread on Linux
Note that this was technically a breaking change in the spec. You may need to update code using relative color calculations on percentages to use numb…
@supports rules when already nested in a @supports rule – #878, d398c1b86439dfd243a6c2ba627a8e7981118a44Support for ::details-content and ::target-text selectors – @philipp-spiess in https://github.com/parcel-bundler/lightningcss/pull/930
::details-content and ::target-text selectors – @philipp-spiess in https://github.com/parcel-bundler/lightningcss/pull/930:placeholder-shown selector name across browsers – @Marukome0743 in https://github.com/parcel-bundler/lightningcss/pull/929/* cssmodules-pure-no-check */ comments – @jantimon in https://github.com/parcel-bundler/lightningcss/pull/898Update detect-libc for better compatibility by @nicksrandall in https://github.com/parcel-bundler/lightningcss/pull/923
Browsers::load_browserslist by @CPunisher in https://github.com/parcel-bundler/lightningcss/pull/895Nothing published for this version
Implement view transitions level 2, including the @view-transition rule, view-transition-class and view-transition-group properties, and class selecto
@view-transition rule, view-transition-class and view-transition-group properties, and class selector features of the view transition pseudo elements. This enables CSS module scoping and better minification when using these features. – #885@font-feature-values rule – #840light-dark() function – https://github.com/parcel-bundler/lightningcss/commit/304389600fb655c5b1af55f1946518e9b755b860list-style shorthand property – https://github.com/parcel-bundler/lightningcss/commit/97891d85f1ea3a9912a0996daa532e72d0c86046:nth-child(an + b of X) selectors in CSS modules – https://github.com/parcel-bundler/lightningcss/commit/ed9e659ea0d298a836a7cbe1c4f77c69531ee5c8\0 characters in filenames – https://github.com/parcel-bundler/lightningcss/commit/43707c31547b66c3c611cda393ce7fe5d07090d0composeVisitors – #875Fix duplicate prefixed properties in transition-property – #850 (thanks @RobinMalfait and @LeoniePhiline!)
transition-property – #850 (thanks @RobinMalfait and @LeoniePhiline!)all property is set – d4eec3593fe3c2244693d9e11af3547d6651ce57Nothing published for this version
Add an error for the deprecated @value at-rule of CSS Modules by @kdy1 in https://github.com/parcel-bundler/lightningcss/pull/842
@container names in CSS Modules by @kdy1 in https://github.com/parcel-bundler/lightningcss/pull/835input:placeholder by @kdy1 in https://github.com/parcel-bundler/lightningcss/pull/813@value at-rule of CSS Modules by @kdy1 in https://github.com/parcel-bundler/lightningcss/pull/842calc expression – e3c8e12f989651c51d3ae430d888bee7eb058207calc expression – 378955ed60e88b00791b08c32d9e6d39bea7a4c6clamp function reduction when the comparison between preferred and max value is unknown – ddc9ce868d82d893d579643c83a6774fd966f917Add [content-hash] css module pattern by @rubberpants in https://github.com/parcel-bundler/lightningcss/pull/802. This includes a hash of the file con
[content-hash] css module pattern by @rubberpants in https://github.com/parcel-bundler/lightningcss/pull/802. This includes a hash of the file contents rather than the file path (as [hash] works), which can be used to support multiple versions of the same library simultaneously without conflicts.box-shadow combination of oklch and currentColor by @hi-ogawa in https://github.com/parcel-bundler/lightningcss/pull/801Add support for named timeline ranges in @keyframes by @grimsteel in https://github.com/parcel-bundler/lightningcss/pull/787
@keyframes by @grimsteel in https://github.com/parcel-bundler/lightningcss/pull/787:is(input:checked) by @kdy1 in https://github.com/parcel-bundler/lightningcss/pull/783Fixes a property ordering bug when using the all shorthand.
Fixes a property ordering bug when using the all shorthand.
This release adds more granular options for CSS modules, implements some new CSS properties, and fixes bugs.
This release adds more granular options for CSS modules, implements some new CSS properties, and fixes bugs.
grid, animation, and custom_idents. This may be useful when migrating from other tools. See docs. Thanks @timneutkens! 83839a98dbe0000acbdf039d968f33e1e8c50277all shorthand property to reset other properties except direction and unicode-bidi. d7aeff3db67ee9d15e0fefce9251cf41c0b8ec44animation-timeline property and add support for it in the animation shorthand f4408c7bdbbfa2c4cbdf5731b351811a0323fa8ctranslate: none and scale: none which are distinct from translate: 0 and scale: 1. Thanks @RobinMalfait! a4cc0246d28c364c0f4e16552685bd911444bdc5currentColor keyword. Thanks @magic-akari! 06ba62f6d1af563cd8ad31dba13844f434345720color() function to follow spec change 445def9a77f89aa612fecb2f776261fc2c9d8f66animation shorthand fb4b33488cbf54ba063de8babb42aec016a96ce8Disabled CSS transform optimizations using matrix(), which could break transitions and animations. – https://github.com/parcel-bundler/lightningcss/pu
transform optimizations using matrix(), which could break transitions and animations. – https://github.com/parcel-bundler/lightningcss/pull/694@supports declarations with the same property (minus vendor prefix) and value – 6bd2761badb9d5434783acffcae35ef6c3311e06This release adds support the the light-dark() color function, parses CSS system colors, deduplicates custom properties during minification, merges du
This release adds support the the light-dark() color function, parses CSS system colors, deduplicates custom properties during minification, merges duplicates @keyframes rules, and fixes some bugs.
The light-dark() function allows you to specify a light mode and dark mode color in a single declaration, without needing to write a separate media query rule. In addition, it uses the color-scheme property to control which theme to use, which allows you to set it programmatically. The color-scheme property also inherits so themes can be nested and the nearest ancestor color scheme applies.
Lightning CSS converts the light-dark() function to use CSS variable fallback when your browser targets don't support it natively. For this to work, you must set the color-scheme property on an ancestor element. The following example shows how you can support both operating system and programmatic overrides for the color scheme.
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);
}
compiles to:
html {
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
html {
--lightningcss-light: ;
--lightningcss-dark: initial;
}
}
html[data-theme="light"] {
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light;
}
html[data-theme="dark"] {
--lightningcss-light: ;
--lightningcss-dark: initial;
color-scheme: dark;
}
button {
background: var(--lightningcss-light, #aaa) var(--lightningcss-dark, #444);
}
Check it out in the playground.
CSS system colors are now supported during parsing, meaning they can be safely deduplicated when merging rules.
.a {
background: Highlight;
}
.a {
background: ButtonText;
}
compiles to:
.a{background:buttontext}
CSS custom properties are now deduplicated when merging rules. The last property value always wins.
.a {
--foo: red;
}
.a {
--foo: green;
}
minifies to:
.a{--foo:green}
@keyframes deduplication@keyframes rules are also now deduplicated during minification. The last rule of the same name wins.
@keyframes a {
from { opacity: 0 }
to { opacity: 1 }
}
@keyframes a {
from { color: red }
to { color: blue }
}
compiles to:
@keyframes a{0%{color:red}to{color:#00f}}
This release improves minification for @layer and @property rules, enables relative colors to be compiled in more situations, adds new functionality f
This release improves minification for @layer and @property rules, enables relative colors to be compiled in more situations, adds new functionality for custom visitor plugins, and fixes some bugs.
Lightning CSS can now down level relative colors where the alpha value is unknown (e.g. a variable). For example:
.foo {
color: hsl(from yellow h s l / var(--alpha));
}
becomes:
.foo {
color: hsla(60, 100%, 50%, var(--alpha));
}
@layer rules@layer rules with the same name are now merged together and ordered following their original declared order. For example:
@layer a, b;
@layer b {
.foo { color: red }
}
@layer a {
.foo { background: yellow }
}
@layer b {
.bar { color: red }
}
becomes:
@layer a {
.foo { background: yellow }
}
@layer b {
.foo, .bar { color: red }
}
@property rules@property rules are now deduplicated when they define the same property name. The last rule wins.
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: yellow;
}
.foo {
color: var(--property-name)
}
@property --property-name {
syntax: '<color>';
inherits: true;
initial-value: blue;
}
compiles to:
@property --property-name{
syntax: "<color>";
inherits: true;
initial-value: #00f
}
.foo {
color: var(--property-name)
}
The JS visitor API now supports StyleSheet and StyleSheetExit visitors, allowing you to visit the entire stylesheet at once. This enables things like rule sorting or appending/prepending rules.
let res = transform({
filename: 'test.css',
minify: true,
code: Buffer.from(`
.foo {
width: 32px;
}
.bar {
width: 80px;
}
`),
visitor: {
StyleSheetExit(stylesheet) {
stylesheet.rules.sort((a, b) => a.value.selectors[0][0].name.localeCompare(b.value.selectors[0][0].name));
return stylesheet;
}
}
});
assert.equal(res.code.toString(), '.bar{width:80px}.foo{width:32px}');
Keep in mind that visiting the entire stylesheet can be expensive, due to needing to serialize and deserialize the entire AST to send between Rust and JavaScript. Keep visitors as granular as you can to avoid this.
grid-auto-flow in custom visitors-webkit-fill-available and -moz-available size valuesinitial-value of @property rulesInit Wasm module only once in browsers – https://github.com/parcel-bundler/lightningcss/pull/615
Updated CSS nesting to the latest spec which allows element selectors to be nested without a preceding & selector. Since it is shipping in all major b
& selector. Since it is shipping in all major browsers, nesting support is now enabled by default (no need to add to the drafts config). 🥳:is and :-webkit-any:not selector list down leveling. Instead of :not(.a, .b) compiling to :not(.a):not(.b), it now compiles to :not(:is(.a, .b)) (down leveled to :-webkit-any if needed). This preserves the specificity rather than raising it for each :not.Support bundle and bundleAsync APIs in wasm builds
Nothing published for this version
Fix custom top-level style blocks when not nested
Fixed node segmentation fault when throwing an error in a custom visitor using the bundleAsync API - https://github.com/parcel-bundler/lightningcss/co
Fixed node segmentation fault when throwing an error in a custom visitor using the bundleAsync API - https://github.com/parcel-bundler/lightningcss/commit/50dad7fa57158ea96945924f55809e6b1a0faa9f
Nothing published for this version
* Fix bundle options type
Propagate error location info to JS in bundler APIs – 91ec8d3e6221973fe5bbb649ce1311c583b5bf2d
analyzeDependencies option from bundler APIs in TypeScript definitions – ae97aa1f79d27f72f20161b55dfd743567e04a3cEnsure fallback rules for logical properties are before nested rules – e66d99cd9b41e4cb99c78db0f30fcf3323321c63
::marker pseudo element – cff779d78a7ea9639ed4c28059c19567d4814e0b::part pseudo element – fbf0d247f4d30d24253e2e7642730a9545e57691:is() when we can safely unwrap it – 8d94ea1da0e7b5112e2617ab84832f97c2fe4c0ecurrentColor in color-mix() or relative color syntax – 20c9612694a0aeec0891a56819f690ac7de6e06alightningcss-derive in Rust crate – 1203368b722ef0c9dffb03e70245423e352f6cffThis release includes new features to improve compatibility of output CSS with your browser targets, and safely remove old fallbacks that aren't neede
This release includes new features to improve compatibility of output CSS with your browser targets, and safely remove old fallbacks that aren't needed anymore. It also gives you more control over exactly how CSS is compiled, and fixes some bugs.
Lightning CSS will now preserve manually provided fallback values when some of your browser targets do not support the last one. For example, in the following rule, if some targets didn't support the max function, both declarations would be preserved. Otherwise, if we are sure that all targets support it, Lightning CSS will drop the fallback declaration.
.foo {
margin-right: 22px;
margin-right: max(4%, 22px);
}
This is supported for many types of values such as lengths, colors, gradients, images, font styles, etc. It uses compatibility data from caniuse and MDN to determine if each value is supported.
You can now control exactly how Lightning CSS compiles using the "include" and "exclude" options, in addition to the existing "targets". This allows you to explicitly turn on or off certain features, which overrides the defaults based on the provided browser targets. For example, you might want to only compile colors, and handle auto prefixing or other features with another tool. Or you may want to handle everything except vendor prefixing with Lightning CSS. These options make that possible.
An enum of available feature flags is provided, and you can use the bitwise OR operator to combine flags together, e.g. Features.Nesting | Features.Colors. There are also some flags which turn on multiple other flags at once, e.g. Selectors, Colors, and MediaQueries. The playground has been updated to show these flags and includes checkboxes to turn them on or off.
import {transform, Features, browserslistToTargets} from 'lightningcss';
import browserslist from 'browserslist';
transform({
// ...
// Turn on color and nesting compilation, regardless of browser targets.
include: Features.Colors | Features.Nesting,
targets: browserslistToTargets(browserslist('last 1 Chrome version'))
});
The Rust API has been updated to accept a new Targets struct instead of Browsers. This includes browser targets as a sub-field, along with the include and exclude options. See docs.rs for more details.
Lightning CSS will now automatically split selector lists when your browser targets don't support some selectors. This avoids a case where browsers ignore the whole rule if only some selectors are unsupported. It takes advantage of :is() forgiving selector lists where possible, otherwise generates multiple rules. For example:
:hover, :focus-visible {
color: red;
}
will be compiled to the following if :focus-visible is not supported by one of your targets:
:is(:hover, :focus-visible) {
color: red;
}
If :is() is unsupported, or if the selectors have different specificities, Lightning CSS will output the following instead:
:hover {
color: red;
}
:focus-visible {
color: red;
}
Some frameworks like Angular and View support some non-standard selectors, such as the ::v-deep pseudo element, >>> and /deep/ combinators, and :deep(<selector-list>) syntax. These are now able to be parsed and preserved as is by Lightning CSS. Unknown pseudo elements now allow arbitrary selectors after them unlike normal standard pseudo elements. Unknown functional pseudo selectors will preserve their arguments unmodified. Non-standard combinators can be enabled by adding the following option when compiling:
{
nonStandard: {
deepSelectorCombinator: true
}
}
This release implements tons of new CSS features, including improved media and container query parsing, support for new selectors, improved minificati
This release implements tons of new CSS features, including improved media and container query parsing, support for new selectors, improved minification by removing duplicate rules, updated compat data, and support for compiling multiple files at once in the CLI!
Lightning CSS now parses the values of each media query feature according to the type defined in the specification. This enables it to generate fallbacks for range syntax with the correct types (e.g. (color > 2) compiles to (min-color: 3)).
We now also automatically output modern range syntax when the browser targets allow it, which reduces the size of the output. For example, (min-width: 300px) will compile to (width >= 300px) when targeting modern browsers.
Lightning CSS will now add vendor prefixes to the resolution media query as well. This will generate the -webkit-device-pixel-ratio and -moz-device-pixel-ratio media queries where needed.
For container queries, we now support style queries. This allows you to customize the behavior of an element when a parent container's style matches a certain value.
@container style(--variant: accent) {
.foo {
color: slateblue;
}
}
Finally, in the custom visitor API, you can now return media queries using raw values rather than manually constructing the AST. This wraps each style rule in an @media rule with (min-width: 500px):
transform({
// ...
visitor: {
StyleRule(rule) {
return {
type: "media",
value: {
rules: [rule],
loc: rule.loc,
query: {
mediaQueries: [
{ raw: '(min-width: 500px)' }
]
}
}
};
}
}
});
Lightning CSS now supports the :nth-child(An+B of S) selector, which lets you select the nth child matching a specific selector. For example, you could use article:nth-child(2 of p) to select the 2nd <p> element within an <article>.
We also now support the ::view-transition pseudo elements, which are used by the View Transitions API now implemented in Chrome.
We now implement vendor prefixing for the text-size-adjust property, for the -webkit and -moz prefixes. This property adjusts the size of text on mobile devices.
Lightning CSS will now automatically remove duplicate style rules, even when they are not adjacent. For this to be safe, the rules must have exactly the same selectors and properties, and the last matching rule wins. This could be useful when using atomic CSS libraries which generate a rule per unique property.
.green {
background: green;
}
.red {
background: red;
}
.green {
background: green;
}
is minified to:
.red{background:red}.green{background:green}
We also updated our browser compatibility data, allowing less prefixes and fallbacks to be generated.
:dir and :fullscreen are now natively supported in Safari 16.4The lightningcss CLI can now process multiple files at once! You can specify each filename to compile, or use a glob that your shell expands. When multiple files are input, you need to use the --output-dir or -d option instead of --output-file or stdout. This will output each processed file into a directory with the corresponding filename.
lightningcss --minify -d dist src/*.css
Lightning CSS will also now automatically create any missing directories in the --output-file or --output-dir path, so you don't need to run mkdir beforehand. Thanks to @lucasweng for contributing this!
This release includes several features and improvements for the custom visitor API, including support for defining how to parse custom at rules. In ad
This release includes several features and improvements for the custom visitor API, including support for defining how to parse custom at rules. In addition, lots of bug fixes are included for auto prefixing, selector downleveling, and more.
When Lightning CSS does not know how to parse an unknown at rule, it stores the prelude and body as a list of raw tokens. Without a definition for how a rule should be parsed, Lighting CSS doesn't know how to interpret it. Tokens are fine for simple use cases, but if you are building a custom visitor plugin that processes a custom at-rule, and want it to integrate with the rest of CSS, it is useful to define how the rule should be parsed and interpreted. In this release, a new customAtRules option has been added to the API to enable just that.
For example, here is how you could define an @mixin rule which expects a custom identifier as its prelude, and a style-block as its body. This allows nesting declarations and rules just like other at-rules like @media and @supports.
{
customAtRules: {
mixin: {
prelude: '<custom-ident>',
body: 'style-block'
}
}
}
With that, you can parse code like this:
@mixin foo {
color: red;
&.bar {
color: green;
}
}
Lightning CSS also validates the code and will emit syntax errors when it doesn't conform to the syntax definition. Another nice part is that we use this definition to automatically infer the TypeScript types for these rules when used in custom visitors.
<img src="https://user-images.githubusercontent.com/19409/218497162-a0acfb24-6351-4c46-8ff7-1bd20e3c6ff6.jpeg" height="400">
Check out the documentation to learn more!
raw property on returned declarations in visitors (#385)raw values in visitors that return tokens (f9ed30f9ed8399d1599a9724eb55ce7e0c0ee8ba)substitute_variables function to UnparsedProperty in the Rust API (#388)Implement Property::set_prefix function (a19228dcda0cc0fa6a98f1c9ab19829d9f8c0584)@layer rules (6419d542bad89b4f64dcf5a2f481a4e6b6d8a7a9):scope (44434116f4a0f0182a041971028b6cc729ecadc4)<layer-name> should be escaped (#383):is, :where, and :has (31fc453d9031f5fb4592ee92cd430e31c82697d5):host and ::slotted selectors (482fc40358819c3e006f8c20ffb7e4bce2e1fd05)currentColor (fcf41273a806e9c9245f7ce87c87d69b14a98603)This release adds support for custom transform visitors written in JavaScript, which lets you extend Lightning CSS with support for custom CSS syntax
This release adds support for custom transform visitors written in JavaScript, which lets you extend Lightning CSS with support for custom CSS syntax extensions, perform build time transforms, and more. It also adds support for nested @container and @layer rules, implements vendor prefixing for @supports, adds support for compiling from stdin via the CLI, and reduces compile times for the Rust crate by adding feature flags.
The Lightning CSS visitor API enables you to implement custom non-standard extensions to CSS, making your code easier to author while shipping standard CSS to the browser. You can implement extensions such as custom shorthand properties or additional at-rules (e.g. mixins), build time transforms (e.g. convert units, inline constants, etc.), CSS rule analysis, and much more.
The API is designed to call into JavaScript as little as possible. You provide functions for specific types of values you're interested in such as Length, Url, or specific properties or rules. Lightning CSS fully parses all CSS rules and properties (with individual type definitions!), and only calls your plugin when it visits a value type you need to transform. This granularity improves performance, and also makes it much easier to build plugins since you don't need to worry about parsing values or selectors yourself. You can return a new value from a visitor function, or even remove or replace a value with multiple values in some cases. Check out the docs for more details!
Custom transforms have a build time cost: it can be around 2x slower to compile with a JS visitor than without. That being said, it is around 6x faster than equivalent postcss plugins in my testing. While standard CSS features should continue to be implemented in Rust as part of Lightning CSS core, the plugin API can help you migrate from other tools while supporting non-standard syntax extensions you might use. We look forward to hearing your feedback!
The Lightning CSS playground has also been updated to support visitors, which makes it easy to play around right in your browser. It also has a new editor experience powered by Code Mirror including syntax highlighting and inline errors. Check out an example with a custom visitor to see what it can do.
The Lightning CSS website has also been updated to include documentation for all of the features, including transpilation, CSS modules, bundling, and minification.
@container and @layer block rules nested within style rules – 615893c00386fe154c7ad33fddc116416e25b407Fixed a regression where zero lengths were serialized without a unit in custom properties, which could break calc() usages. 0afccf92d206022cd7f9f62975
Fixed a regression where zero lengths were serialized without a unit in custom properties, which could break calc() usages. 0afccf92d206022cd7f9f62975ed1f11354b68e2
…with an element selector. The @nest rule is deprecated, and will print a warning.
This release includes support for the new nesting syntax, a new Rust visitor API to make building custom transforms easier, support for page margin at rules, and several other improvements and fixes.
The CSS nesting support has been updated to relax some of the rules around where the & selector is required, following the latest spec changes. The & selector is now automatically inserted with a descendant combinator when not already present, unless it starts with an element selector. The @nest rule is deprecated, and will print a warning.
.foo {
color: red;
.bar {
color: blue;
}
}
compiles to:
.foo {
color: red;
}
.foo .bar {
color: blue;
}
The Rust API now includes a Visitor API, allowing you to much more easily traverse the style sheet and implement custom transforms. You can visit rules, properties, and many common value types such as lengths, urls, custom functions, etc.
For example, this visitor converts all pixel values to rems.
struct MyVisitor;
impl<'i> Visitor<'i> for MyVisitor {
const TYPES: VisitTypes = visit_types!(LENGTHS);
fn visit_length(&mut self, length: &mut LengthValue) {
match length {
LengthValue::Px(px) => *length = LengthValue::Rem(*px / 16.0),
_ => {}
}
}
}
stylesheet.visit(&mut MyVisitor);
You must declare what types of values you want to visit with bitflags via the visit_types macro. This enables us to completely skip visiting entire branches of the AST when they don't contain any relevant values, statically, at compile time, which improves performance. For example, if you declare you only want to visit urls, we don't need to visit any properties that don't contain URLs somewhere in their type (recursively). Check out the documentation for more details.
You can also implement support for parsing custom at rules (e.g. Tailwind's @apply), by providing a custom AtRuleParser implementation. The parsed rules are stored in the stylesheet using a generic parameter. See the example for more details.
@page – 80a982a181269aed6dc3e508207fd77007554d40:is() selector when only a single simple selector is provided as an argument – b870d1fcbb7db44147eae1274150ab81394b281bParse :nth-col() and :nth-last-col() selectors – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/302
:nth-col() and :nth-last-col() selectors – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/302:is for non-leading nesting with multiple compound selectors – 865270134da6f25d66ce4a4ec0e4c4b93b90b759border-bottom-right and border-bottom-left in shorthands – @LeoniePhiline in https://github.com/parcel-bundler/lightningcss/pull/308--browserslist option to load browsers list config by @LeoniePhiline in https://github.com/parcel-bundler/lightningcss/pull/324This release adds support for the new relative color syntax, improves support for quoted CSS animation names, and fixes some bugs.
This release adds support for the new relative color syntax, improves support for quoted CSS animation names, and fixes some bugs.
Lightning CSS now supports the new relative color syntax in the CSS Color Level 5 spec! This allows you to use math functions like calc() to manipulate the channel values of a source color, and to convert between color spaces. This is not yet shipping in any browsers, but Lightning CSS will do this manipulation at build time when possible, so that it works in any browser today!
Here's a simple example, which uses the lch color space to darken slateblue by 10%. This is done by using the l channel value in a calc() expression, and preserving the c and h channels as is.
.foo {
color: lch(from slateblue calc(l - 10%) c h);
}
This will output:
.foo {
color: lch(34.5711% 65.7776 296.794);
}
And, when lch colors are not supported by your browser targets, Lightning CSS already supports outputting fallbacks for older browsers:
.foo {
color: #4e42b1;
color: lch(34.5711% 65.7776 296.794);
}
Check it out in the playground!
Note that due to being a build time transform, CSS variables are not supported as source colors since the variable value may change at runtime. We'll have to wait for browser support for that.
border-spacing property – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/294animation: "none" to animation: "none" none – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/295#rrggbbaa color syntax, output transparent instead of rgba(0, 0, 0, 0) – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/296sourcesContent, and improve base64 performance – https://github.com/parcel-bundler/lightningcss/commit/061c0c2dff80bb4e25c857bfa4737c1c4092fbaeFix transformStyleAttribute missing field analyzeDependencies error
This release includes several new features and a bunch of bug fixes.
This release includes several new features and a bunch of bug fixes.
preserveImports option for analyzeDependencies, which preserves the @import rules with placeholder URLs similar to url() dependencies – 676bf1fefc46a75d7098efbc53e744d89d47ba93transformStyleAttribute, used for error messages and dependency locations – 815a1836dbff09bce2cc154c31d1660a4cfedb59@import rules with both layer and import conditions – f66c6d7ddd102a885fb573e1ef5cf3d09eb2dba3flex shorthand – 84298d2a735d3cc1288c0fd5802af7b56c11fe28animation-name property – 7efeef220b9559716dc53daa0343c0fc23ac62eb…lightningcss. The parcel_css Rust crate is deprecated - please use lightningcss going forward.
We are excited to announce that Parcel CSS is now called Lightning CSS! ⚡ This new name makes it clear that the project can be used outside of Parcel, with other build tools, or even standalone.
We also have a brand new website showcasing some of the features, along with the WASM-based playground at lightningcss.dev. This will expand over time to include more documentation and examples.
Going forward, new releases will be under the lightningcss npm package and Rust crate. The @parcel/css package still exists on npm for backward compatibility, but now re-exports lightningcss. The parcel_css Rust crate is deprecated - please use lightningcss going forward.
This release also includes several new features, including major improvements to the bundler.
The node bindings now include a new bundleAsync function in addition to the existing bundle function. bundleAsync runs the bundler asynchronously in a background thread, and returns a promise that lets you know when it has completed. In addition, bundleAsync supports custom JavaScript-based resolvers, which allow you to customize the resolution behavior for @import specifiers, and provide the contents of files from a source other than the file system.
let {code, map} = await css.bundleAsync({
filename: 'style.css',
minify: true,
resolver: {
read(filePath) {
return fs.readFileSync(filePath, 'utf8');
},
resolve(specifier, from) {
return path.resolve(path.dirname(from), specifier);
}
}
});
Note that providing a resolver can negatively affect performance, so only do so when you need to customize things.
Dependencies in CSS modules are now also bundled. For example, the composes property allows you to reference another file. These will now be bundled, and the resolved class name will be included in the output JSON as well.
@font-face tech() becomes plural – @yisibl in https://github.com/parcel-bundler/parcel-css/pull/270@keyframes cannot remove quotes – @yisibl in https://github.com/parcel-bundler/parcel-css/pull/267Your coding agent can read these notes before it upgrades. Set up the MCP server →