parcel-bundler / parcel-bundler/lightningcss

Invalid CSS generation with color-scheme and light-dark() function

Open
#873 7 comments 9 reactions 0 assignees View on GitHub

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 only and dark || light words, which is invalid, it has to be only dark || only light. 1
  • lightningcss transpiles light-dark() function --lightningcss-light and --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 :root or 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.