parcel-bundler/lightningcss
### [`v1.20.0`](https://togithub.com/parcel-bundler/lightningcss/releases/tag/v1.20.0)
[Compare Source](https://togithub.com/parcel-bundler/lightningcss/compare/v1.19.0...v1.20.0)
This release implements tons of new CSS features, including improved media and container query parsing, support for new selectors, improved minification by removing duplicate rules, updated compat data, and support for compiling multiple files at once in the CLI!
#### Media and container queries
Lightning CSS now parses the values of each media query feature according to the type defined in the specification. This enables it to generate fallbacks for range syntax with the correct types (e.g. `(color > 2)` compiles to `(min-color: 3)`).
We now also automatically output modern range syntax when the browser targets allow it, which reduces the size of the output. For example, `(min-width: 300px)` will compile to `(width >= 300px)` when targeting modern browsers.
Lightning CSS will now add vendor prefixes to the `resolution` media query as well. This will generate the `-webkit-device-pixel-ratio` and `-moz-device-pixel-ratio` media queries where needed.
For container queries, we now support style queries. This allows you to customize the behavior of an element when a parent container's style matches a certain value.
```css
@container style(--variant: accent) {
.foo {
color: slateblue;
}
}
```
Finally, in the custom visitor API, you can now return media queries using raw values rather than manually constructing the AST. This wraps each style rule in an `@media` rule with `(min-width: 500px)`:
```js
transform({
// ...
visitor: {
StyleRule(rule) {
return {
type: "media",
value: {
rules: [rule],
loc: rule.loc,
query: {
mediaQueries: [
{ raw: '(min-width: 500px)' }
]
}
}
};
}
}
});
```
#### Selectors
Lightning CSS now supports the `:nth-child(An+B of S)` selector, which lets you select the nth child matching a specific selector. For example, you could use `article:nth-child(2 of p)` to select the 2nd `
` element within an ``.
We also now support the `::view-transition` [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#pseudo-elements), which are used by the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) now implemented in Chrome.
#### Properties
We now implement vendor prefixing for the `text-size-adjust` property, for the `-webkit` and `-moz` prefixes. This property adjusts the size of text on mobile devices.
#### Minification
Lightning CSS will now automatically remove duplicate style rules, even when they are not adjacent. For this to be safe, the rules must have exactly the same selectors and properties, and the last matching rule wins. This could be useful when using atomic CSS libraries which generate a rule per unique property.
.green {
background: green;
}
.red {
background: red;
}
.green {
background: green;
}
is minified to:
```css
.red{background:red}.green{background:green}
```
#### Updated compat data
We also updated our browser compatibility data, allowing less prefixes and fallbacks to be generated.
- `:dir` and `:fullscreen` are now natively supported in Safari 16.4
- Native CSS nesting will be output when targeting Chrome 112 or Safari 16.5
- Media query range and interval syntax will be output when targeting Chrome 104, Firefox 102, or Safari 16.4
- lab and oklab colors are now supported in Chrome 111
#### CLI improvements
The `lightningcss` CLI can now process multiple files at once! You can specify each filename to compile, or use a glob that your shell expands. When multiple files are input, you need to use the `--output-dir` or `-d` option instead of `--output-file` or stdout. This will output each processed file into a directory with the corresponding filename.
```sh
lightningcss --minify -d dist src/*.css
```
Lightning CSS will also now automatically create any missing directories in the `--output-file` or `--output-dir` path, so you don't need to run `mkdir` beforehand. Thanks to [@lucasweng](https://togithub.com/lucasweng) for contributing this!
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 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.
This PR contains the following updates:
1.19.0->1.20.0Release Notes
parcel-bundler/lightningcss
### [`v1.20.0`](https://togithub.com/parcel-bundler/lightningcss/releases/tag/v1.20.0) [Compare Source](https://togithub.com/parcel-bundler/lightningcss/compare/v1.19.0...v1.20.0) This release implements tons of new CSS features, including improved media and container query parsing, support for new selectors, improved minification by removing duplicate rules, updated compat data, and support for compiling multiple files at once in the CLI! #### Media and container queries Lightning CSS now parses the values of each media query feature according to the type defined in the specification. This enables it to generate fallbacks for range syntax with the correct types (e.g. `(color > 2)` compiles to `(min-color: 3)`). We now also automatically output modern range syntax when the browser targets allow it, which reduces the size of the output. For example, `(min-width: 300px)` will compile to `(width >= 300px)` when targeting modern browsers. Lightning CSS will now add vendor prefixes to the `resolution` media query as well. This will generate the `-webkit-device-pixel-ratio` and `-moz-device-pixel-ratio` media queries where needed. For container queries, we now support style queries. This allows you to customize the behavior of an element when a parent container's style matches a certain value. ```css @container style(--variant: accent) { .foo { color: slateblue; } } ``` Finally, in the custom visitor API, you can now return media queries using raw values rather than manually constructing the AST. This wraps each style rule in an `@media` rule with `(min-width: 500px)`: ```js transform({ // ... visitor: { StyleRule(rule) { return { type: "media", value: { rules: [rule], loc: rule.loc, query: { mediaQueries: [ { raw: '(min-width: 500px)' } ] } } }; } } }); ``` #### Selectors Lightning CSS now supports the `:nth-child(An+B of S)` selector, which lets you select the nth child matching a specific selector. For example, you could use `article:nth-child(2 of p)` to select the 2nd `` element within an ``.
We also now support the `::view-transition` [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#pseudo-elements), which are used by the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) now implemented in Chrome.
#### Properties
We now implement vendor prefixing for the `text-size-adjust` property, for the `-webkit` and `-moz` prefixes. This property adjusts the size of text on mobile devices.
#### Minification
Lightning CSS will now automatically remove duplicate style rules, even when they are not adjacent. For this to be safe, the rules must have exactly the same selectors and properties, and the last matching rule wins. This could be useful when using atomic CSS libraries which generate a rule per unique property.
.green {
background: green;
}
.red {
background: red;
}
.green {
background: green;
}
is minified to:
```css
.red{background:red}.green{background:green}
```
#### Updated compat data
We also updated our browser compatibility data, allowing less prefixes and fallbacks to be generated.
- `:dir` and `:fullscreen` are now natively supported in Safari 16.4
- Native CSS nesting will be output when targeting Chrome 112 or Safari 16.5
- Media query range and interval syntax will be output when targeting Chrome 104, Firefox 102, or Safari 16.4
- lab and oklab colors are now supported in Chrome 111
#### CLI improvements
The `lightningcss` CLI can now process multiple files at once! You can specify each filename to compile, or use a glob that your shell expands. When multiple files are input, you need to use the `--output-dir` or `-d` option instead of `--output-file` or stdout. This will output each processed file into a directory with the corresponding filename.
```sh
lightningcss --minify -d dist src/*.css
```
Lightning CSS will also now automatically create any missing directories in the `--output-file` or `--output-dir` path, so you don't need to run `mkdir` beforehand. Thanks to [@lucasweng](https://togithub.com/lucasweng) for contributing this!
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 PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR has been generated by Mend Renovate. View repository job log here.