mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
3e9cf87adf
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: ```css @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: ```css .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