Invalid CSS generation with color-scheme and light-dark() function #873
Description
Problems:
- lightningcss switches up the
onlyanddark||lightwords, which is invalid, it has to beonly dark||only light. 1 - lightningcss transpiles
light-dark()function--lightningcss-lightand--lightningcss-dark; with theme one of them is set to initial and other one is left as none, but if you ask me the best approach would be having@media (prefers-color-scheme: dark)and setting it there as the dark of light-dark() function's second argument and in:rootor where it's declared, creating it as normal.
Input Example Code:
:root {
color-scheme: light dark;
--bg: light-dark(var(--white), var(--black));
--fg: light-dark(var(--black), var(--white));
}
body {
background-color: var(--bg);
color: var(--fg);
}
.dark {
color-scheme: only dark;
}
.light {
color-scheme: only light;
}Output Example Code:
:root {
--black:#000;
--white:#fff;
--lightningcss-light:initial;
--lightningcss-dark: ;
color-scheme:light dark;
--bg:var(--lightningcss-light,var(--white))var(--lightningcss-dark,var(--black));
--fg:var(--lightningcss-light,var(--black))var(--lightningcss-dark,var(--white))
}
@media (prefers-color-scheme:dark) {
:root {
--lightningcss-light: ;
--lightningcss-dark:initial
}
}
.dark {
--lightningcss-light: ;
--lightningcss-dark:initial;
color-scheme:dark only;
}
.light {
--lightningcss-light:initial;
--lightningcss-dark: ;
color-scheme:light only;
}What it should be?
:root {
color-scheme: light dark;
--bg: white;
--fg: black;
}
@media (prefers-color-scheme: dark) {
--bg: black;
--fg: white;
}
body {
background-color: var(--bg);
color: var(--fg);
}
.dark {
color-scheme: only dark;
}
.light {
color-scheme: only light;
}