Skip to content

chore(deps): update dependency lightningcss to v1.30.1 #908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
renovate wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore(deps): update dependency lightningcss to v1.30.1 #908

renovate wants to merge 1 commit into from

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Jun 1, 2025 •
edited
Loading

This PR contains the following updates:

Package Change Age Confidence
lightningcss 1.20.0 -> 1.30.1 age confidence

Release Notes

parcel-bundler/lightningcss (lightningcss)

v1.30.1

Compare Source

Fixed crash on process exit when lightningcss was loaded inside a Node.js worker thread on Linux

v1.30.0

Compare Source

Features

  • Update relative color parsing to latest spec: colors now support numbers in addition to percentages, and calcs in colors are now always numbers. Note that this was technically a breaking change in the spec. You may need to update code using relative color calculations on percentages to use numbers instead. See the PR for details. – #​465
  • Update nesting implementation for new spec: It is now possible to nest selectors with pseudo elements, and declarations and nested rules can be interleaved. See https://web.dev/blog/css-nesting-cssnesteddeclarations for more details. – parcel-bundler/lightningcss@6c465c1
  • Skip generating unnecessary @supports rules when already nested in a @supports rule – #​878, d398c1b
  • Improve error recovery for media queries – #​954
  • Add support for ::picker, ::picker-icon and ::checkmark – #​957
  • Add build support for Android – #​932

Fixes

v1.29.3

Compare Source

v1.29.2

Compare Source

v1.29.1

Compare Source

v1.29.0

Compare Source

Added

  • Implement view transitions level 2, including the @view-transition rule, view-transition-class and view-transition-group properties, and class selector features of the view transition pseudo elements. This enables CSS module scoping and better minification when using these features. – #​885
  • Support parsing the @font-feature-values rule – #​840
  • Add a feature flag to explicitly enable or disable transpiling the light-dark() function – parcel-bundler/lightningcss@3043896

Fixed

v1.28.2

Compare Source

Fixes

v1.28.1

Compare Source

v1.28.0

Compare Source

Added

Fixed

v1.27.0

Compare Source

Added

Fixed

v1.26.0

Compare Source

Added

Fixed

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

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

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

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

v1.21.7

Compare Source

v1.21.6

Compare Source

Fixes

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

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

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 is behind base branch, 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 was generated by Mend Renovate. View the repository job log.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

bot update

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants