Make polyfill work when the theme variable resolves to another var

[philipp-spiess]

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