chore(deps): update dependency lightningcss to v1.27.0 - autoclosed

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
lightningcss	1.23.0 -> 1.27.0
lightningcss	1.25.1 -> 1.27.0

---

Release Notes

parcel-bundler/lightningcss (lightningcss)

v1.27.0

Compare Source

v1.26.0

Compare Source

Added

• Add support for named timeline ranges in @keyframes by @​grimsteel in https://github.com/parcel-bundler/lightningcss/pull/787
• Implement animation-range properties – parcel-bundler/lightningcss@39964f1
• Add a lint for unsupported CSS Module selector by @​kdy1 in https://github.com/parcel-bundler/lightningcss/pull/784
• add wasm file to package exports by @​elevatebart in https://github.com/parcel-bundler/lightningcss/pull/755
• Add support for arm64 Windows – parcel-bundler/lightningcss@0bcd896

Fixed

• Fix codegen of :is(input:checked) by @​kdy1 in https://github.com/parcel-bundler/lightningcss/pull/783
• Bump browserslist-rs 0.16.0 by @​chenjiahan in https://github.com/parcel-bundler/lightningcss/pull/772
• update compat data – parcel-bundler/lightningcss@dcbb997

v1.25.1

Compare Source

Fixes a property ordering bug when using the all shorthand.

v1.25.0

Compare Source

This release adds more granular options for CSS modules, implements some new CSS properties, and fixes bugs.

Added

• Add granular options to control which identifiers are scoped in CSS modules. You can turn off scoping for grid, animation, and custom_idents. This may be useful when migrating from other tools. See docs. Thanks @​timneutkens! 83839a9
• Optimize the all shorthand property to reset other properties except direction and unicode-bidi. d7aeff3
• Implement animation-timeline property and add support for it in the animation shorthand f4408c7

Fixed

• Prevent simplifying translate: none and scale: none which are distinct from translate: 0 and scale: 1. Thanks @​RobinMalfait! a4cc024
• Fix crash on box-shadow with currentColor keyword. Thanks @​magic-akari! 06ba62f
• Fix minifier removing zero channels in color() function to follow spec change 445def9
• Fix CSS module scoping with variables in animation shorthand fb4b334
• Update browser compatibility data ec9da43

v1.24.1

Compare Source

• Disabled CSS transform optimizations using matrix(), which could break transitions and animations. – https://github.com/parcel-bundler/lightningcss/pull/694
• Merge @supports declarations with the same property (minus vendor prefix) and value – 6bd2761

v1.24.0

Compare Source

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

---

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 these updates again.

---

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

---

This PR was generated by Mend Renovate. View the repository job log.