Skip to content

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Apr 4, 2025

Discovered while triaging #17556

This PR improves the color-mix(...) polyfill to ensure it works when a theme key links to another theme key via a var(...) call.

Imagine this setup:

 @theme {
  --color-red: var(--color-red-500);
  --color-red-500: oklch(63.7% 0.237 25.331);
}
@source inline("text-red/50");

Since --color-red will link to --color-red-500 which is also a known theme variable, we can inline the value of --color-red-500 into the fallback now:

.text-red\\/50 {
  color: var(--color-red);
}
@supports (color: color-mix(in lab, red, red)) {
  .text-red\\/50 {
    color: color-mix(in oklab, var(--color-red) 50%, transparent);
  }
}

This will allow for slightly less confusing behavior.

The code added also handles recursive definitions where a color is linking to another color that is again linking to the first one (by adding a Set to keep track of already seen variable names).

Test plan

  • Added unit test

@RobinMalfait RobinMalfait force-pushed the fix/color-mix-recursion branch from 8508642 to 91f533b Compare April 7, 2025 09:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants