v1.24.1

• Disabled CSS transform optimizations using matrix(), which could break transitions and animations. – #694
• Merge @supports declarations with the same property (minus vendor prefix) and value – 6bd2761

v1.24.0

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.

light-dark()

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

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}

Custom property deduplication

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}}

Other bug fixes

• Bump browserslist-rs and browser compat data
• Don't output duplicate properties when incompatible with targets
• Parse a TokenList instead of only a single Token in @property rules

v1.23.0

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.

Downlevel relative colors with unknown alpha

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));
}

Optimized @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 }
}

Deduped @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)
}

StyleSheet visitor function

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.

Other bug fixes

• Fixed serializing grid-auto-flow in custom visitors
• Fixed compatibility data for -webkit-fill-available and -moz-available size values
• Added support for CommonJS in WASM package
• Allowed whitespace or nothing in initial-value of @property rules
• Fixed AST TypeScript types to have correct types for duplicated names

v1.22.1

• Init Wasm module only once in browsers – #615
• Update compat data – e255210
• Fix empty :is() when compiling nesting – b4bbe47

v1.22.0

Added

• 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 browsers, nesting support is now enabled by default (no need to add to the drafts config). 🥳
• Support for parsing the @scope rule

Fixed

• Fix bugs merging rules containing :is and :-webkit-any
• Fix specificity of :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.
• Fix the version selector in the playground on lightningcss.dev
• Updated the Vite usage docs now that it is built in

v1.21.8

• Support bundle and bundleAsync APIs in wasm builds
• Fix type usage of Features
• rust: Make Visitor bounded by ?Sized

v1.21.6

Fixes

• Parse the @starting-style rule
• Fix custom top-level style blocks when not nested
• Remove const enum in Features TS type definition
• Change Buffer to Uint8Array in TS types for non-Node compatibility
• Fix a typo in media_query
• Fix serializing text-size-adjust
• Fix prefixing duplicate backdrop-filter properties
• Fix background-clip prefixing
• Don't put unknown pseudo elements in an :is()
• Make a node specific wasm build that initializes synchronously for stackblitz
• Add freebsd build

v1.21.5

Fixed node segmentation fault when throwing an error in a custom visitor using the bundleAsync API - 50dad7f

v1.21.3

• Fix bundle options type

v1.21.2

Fixes

• Propagate error location info to JS in bundler APIs – 91ec8d3
• Omit analyzeDependencies option from bundler APIs in TypeScript definitions – ae97aa1
• Fix deduplicating multiple copies of the same rule – a8d909a