Releases: parcel-bundler/lightningcss
v1.28.0
Added
- Add option to avoid hashing
@container
names in CSS Modules by @kdy1 in #835 - Improve error message of
input:placeholder
by @kdy1 in #813 - Add an error for the deprecated
@value
at-rule of CSS Modules by @kdy1 in #842
Fixed
- Don't panic when passing system-color to color-mix by @inottn in #819
- Dependency updates by @kornelski in #814
- Fix order of fallback width, height, and other size related properties – 22a8b6f
- Fix stack overflow parsing
calc
expression – e3c8e12 - Fix crash when parsing an invalid
calc
expression – 378955e - Skip
clamp
function reduction when the comparison between preferred and max value is unknown – ddc9ce8 - Update browser compatibility data – f6b033f
- docs: Update help command docs by @DylanPiercey in #812
- docs: fix link to visitor type definitions by @mayank99 in #823
v1.27.0
Added
- Add
[content-hash]
css module pattern by @rubberpants in #802. This includes a hash of the file contents rather than the file path (as[hash]
works), which can be used to support multiple versions of the same library simultaneously without conflicts. - Improve error message for pseudo elements followed by selectors by @kdy1 in #797
- Implement pure mode lints for CSS Modules by @kdy1 in #796. This option enforces the use of a class or id selector in each rule.
Fixed
- Fix
box-shadow
combination ofoklch
andcurrentColor
by @hi-ogawa in #801 - Add missing browserslist import in docs.md by @cpeaustriajc in #798
- Update broken selectors link in homepage by @20jasper in #750
- Make CLI example work with Windows by @tim-we in #726
- Update copyright year on main page by @log101 in #790
- Update browser compat data - 54390b4
v1.26.0
Added
- Add support for named timeline ranges in
@keyframes
by @grimsteel in #787 - Implement animation-range properties – 39964f1
- Add a lint for unsupported CSS Module selector by @kdy1 in #784
- add wasm file to package exports by @elevatebart in #755
- Add support for arm64 Windows – 0bcd896
Fixed
- Fix codegen of
:is(input:checked)
by @kdy1 in #783 - Bump browserslist-rs 0.16.0 by @chenjiahan in #772
- update compat data – dcbb997
v1.25.1
Fixes a property ordering bug when using the all
shorthand.
v1.25.0
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
, andcustom_idents
. This may be useful when migrating from other tools. See docs. Thanks @timneutkens! 83839a9 - Optimize the
all
shorthand property to reset other properties exceptdirection
andunicode-bidi
. d7aeff3 - Implement
animation-timeline
property and add support for it in theanimation
shorthand f4408c7
Fixed
- Prevent simplifying
translate: none
andscale: none
which are distinct fromtranslate: 0
andscale: 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
v1.24.0
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
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)
}
@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
v1.22.0
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 thedrafts
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