chore(deps): update dependency lightningcss to v1.24.1
This MR contains the following updates:
Package | Type | Update | Change |
---|---|---|---|
lightningcss | devDependencies | minor | 1.22.0 -> 1.24.1 |
Release Notes
parcel-bundler/lightningcss (lightningcss)
v1.24.1
- Disabled CSS
transform
optimizations usingmatrix()
, 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
v1.23.0
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));
}
@layer
rules
Optimized @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 }
}
@property
rules
Deduped @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
v1.22.1
- 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
Configuration
-
If you want to rebase/retry this MR, check this box
This MR has been generated by Renovate Bot.