tailwindcss/packages
Philipp Spiess 3e9cf87adf
Make polyfill work when the theme variable resolves to another var (#17562)
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
2025-04-07 11:42:02 +02:00
..
@tailwindcss-browser Prepare v4.1.3 release (#17563) 2025-04-04 19:54:23 +02:00
@tailwindcss-cli Prepare v4.1.3 release (#17563) 2025-04-04 19:54:23 +02:00
@tailwindcss-node Prepare v4.1.3 release (#17563) 2025-04-04 19:54:23 +02:00
@tailwindcss-postcss Prepare v4.1.3 release (#17563) 2025-04-04 19:54:23 +02:00
@tailwindcss-standalone Prepare v4.1.3 release (#17563) 2025-04-04 19:54:23 +02:00
@tailwindcss-upgrade Prepare v4.1.3 release (#17563) 2025-04-04 19:54:23 +02:00
@tailwindcss-vite Prepare v4.1.3 release (#17563) 2025-04-04 19:54:23 +02:00
internal-example-plugin Prefix internal modules with internal-* (#14074) 2024-07-29 10:58:07 -04:00
tailwindcss Make polyfill work when the theme variable resolves to another var (#17562) 2025-04-07 11:42:02 +02:00
tsconfig.base.json Improve debug logs (#15303) 2024-12-11 15:27:20 +01:00