lightningcss 1.23.0

v1.23.0

on Node.js NPM

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