Skip to content

chore(deps): update dependency lightningcss to v1.24.0

RenovateBot requested to merge renovate/lightningcss-1.x into main

This MR contains the following updates:

Package Type Update Change
lightningcss devDependencies minor 1.22.0 -> 1.24.0

Release Notes

parcel-bundler/lightningcss (lightningcss)

v1.24.0

Compare Source

v1.23.0

Compare Source

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)
}
@&#8203;property --property-name {
  syntax: '<color>';
  inherits: true;
  initial-value: blue;
}

compiles to:

@&#8203;property --property-name{
  syntax: "<color>";
  inherits: true;
  initial-value: #&#8203;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

Compare Source


Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this MR and you won't be reminded about this update again.


  • If you want to rebase/retry this MR, check this box

This MR has been generated by Renovate Bot.

Edited by RenovateBot

Merge request reports