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}}