Description
Bug description
I was investigating an issue in Lightning CSS related to light-dark() and CSS variables and came across a related issue in PostCSS in my testing. The issue is that variables defined on an element outside of where color-scheme is set have a different result than native, which computes the color at the usage site rather than the variable definition site.
PostCSS seems to try to deal with this by defining a * selector to re-define the variables on each child element. However, if you re-define the same variable on an inner element between where the variable is first-defined with light-dark() and where it is used the * selector wins because it goes "deeper".
Source CSS
html {
--bg-postcss: light-dark(white, black);
--color-postcss: light-dark(black, white);
}
body {
--bg-postcss: pink;
}
.scheme-dark {
color-scheme: dark;
}
.postcss {
background: var(--bg-postcss);
color: var(--color-postcss);
}applied to the following DOM structure:
<html>
<body>
<div class="scheme-dark">
<div class="native">Native</div>
<div class="postcss">PostCSS</div>
</div>
</body>
</html>Expected CSS
TBH I'm not sure this is possible to compile correctly...
Actual CSS
html {
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) black;
--bg-postcss: var(--csstools-light-dark-toggle--0, white);
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) white;
--color-postcss: var(--csstools-light-dark-toggle--1, black);
}
@supports (color: light-dark(red, red)) {
html {
--bg-postcss: light-dark(white, black);
--color-postcss: light-dark(black, white);
}
}
@supports not (color: light-dark(tan, tan)) {
html * {
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) black;
--bg-postcss: var(--csstools-light-dark-toggle--0, white);
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) white;
--color-postcss: var(--csstools-light-dark-toggle--1, black);
}
}
body {
--bg-postcss: pink;
}
.scheme-dark {
--csstools-color-scheme--light: ;
color-scheme: dark;
}
.postcss {
background: var(--bg-postcss);
color: var(--color-postcss);
}Playgound example
Here's a codepen with both the native result and PostCSS result. I've removed the @supports rules generated by PostCSS so you can see the incorrect result in any browser. https://codepen.io/devongovett/pen/dPbvrOB
Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?
None
Debug output
No response
Extra config
No response
What plugin are you experiencing this issue on?
No response
Plugin version
playground
What OS are you experiencing this on?
No response
Node Version
N/A
Validations
- Follow our Code of Conduct
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Would you like to open a PR for this bug?
- I'm willing to open a PR
Activity