lightningcss
lightningcss copied to clipboard
`light-dark` is broken when children have different `color-scheme`'s
If you take the following HTML
<p>This text should have a black background</p>
And apply the following CSS:
:root {
--background: light-dark(white, black);
--text: light-dark(black, white);
}
p {
color: var(--text);
background: var(--background);
color-scheme: dark;
}
The text changes to white text on black background, as expected because color-scheme is set to dark.
However, change this to the transpiled CSS generated by lightningcss
:root{--background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);--text:var(--lightningcss-light,#000)var(--lightningcss-dark,#fff)}p{color:var(--text);background:var(--background);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}
And the text is black on white. I believe this is because the polyfill uses css variables which do not recompute if child elements change any of the input variables, where as light-dark seems to do. You currently need to re-apply the :root theme variables on every element that changes color-scheme