parcel-bundler / parcel-bundler/lightningcss
Invalid CSS generation with color-scheme and light-dark() function
Open
Nobody has claimed this yet.
pending triage
- Dominant language
- Rust
- Stars
- 7.7k
- Forks
- 302
- PR merge metrics
- No merged PRs in 30d
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;
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the issue's input and output examples and trace the CSS transformation handling for color-scheme and light-dark(). Done means generated color-scheme values preserve only dark and only light, while light-dark() produces the requested root values and dark-mode media behavior without the shown helper-variable output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, rust
- Domain
- compilers
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100