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

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
lightningcss	1.20.0 -> 1.23.0

---

Release Notes

parcel-bundler/lightningcss (lightningcss)

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:

@​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

• Init Wasm module only once in browsers – https://github.com/parcel-bundler/lightningcss/pull/615
• Update compat data – e255210
• Fix empty :is() when compiling nesting – b4bbe47

v1.22.0

Compare Source

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

Compare Source

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

v1.21.7

Compare Source

v1.21.6

Compare Source

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

Compare Source

Fixed node segmentation fault when throwing an error in a custom visitor using the bundleAsync API - parcel-bundler/lightningcss@50dad7f

v1.21.4

Compare Source

v1.21.3

Compare Source

• Fix bundle options type

v1.21.2

Compare Source

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

v1.21.1

Compare Source

Fixes

• Ensure fallback rules for logical properties are before nested rules – e66d99c
• Fix Safari compat data for ::marker pseudo element – cff779d
• Add compat data for ::part pseudo element – fbf0d24
• Avoid splitting and vendor prefixing :is() when we can safely unwrap it – 8d94ea1
• Ensure split incompatible rules get the correct vendor prefix – d6e1295
• Add semicolon after declarations if preserving nesting – acde78b
• Preserve license comments at the start of a stylesheet – 5cec8be
• Do not crash on currentColor in color-mix() or relative color syntax – 20c9612
• Specify exact version of lightningcss-derive in Rust crate – 1203368

v1.21.0

Compare Source

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.

Preserve manual fallbacks

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.

Include and exclude options

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.

Split selector lists when unsupported

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

Non-standard selector compatibility

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

More

• Fix merging rules with vendor prefixes
• Fix unparsed mask property order
• Fix handling of duplicate transform properties
• Add support for element display state pseudo classes
• Parse the aspect-ratio property
• Implement into_owned for parser errors
• Make the fields of the TrackRepeat struct public
• docs: fix transforms example
• fix: missing placeholder prop on ImportDependency type

---

Configuration

📅 Schedule: Branch creation - "before 5pm on the first day of the month" (UTC), Automerge - At any time (no schedule defined).

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

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

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

---

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

---

This PR has been generated by Mend Renovate. View repository job log here.

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update (1.23.0). You will get a PR once a newer version is released. To ignore this dependency forever, add it to the ignoreDeps array of your Renovate config.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.