Do not wrap color-mix in a @supports rule if one already exists

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Do not wrap `color-mix` in a `@supports` rule if one already exists ([#19450](https://github.com/tailwindlabs/tailwindcss/pull/19450))
+
 ### Added
 
 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))

packages/tailwindcss/src/ast.ts

@@ -285,6 +285,7 @@ export function optimizeAst(
       if (
         polyfills & Polyfills.ColorMix &&
         node.value.includes('color-mix(') &&
+        !context.supportsColorMix &&
         !context.keyframes
       ) {
         colorMixDeclarations.get(parent).add(node)
@@ -382,6 +383,8 @@ export function optimizeAst(
     else if (node.kind === 'at-rule') {
       if (node.name === '@keyframes') {
         context = { ...context, keyframes: true }
+      } else if (node.name === '@supports' && node.params.includes('color-mix(')) {
+        context = { ...context, supportsColorMix: true }
       }
 
       let copy = { ...node, nodes: [] }

packages/tailwindcss/src/index.test.ts

@@ -5812,6 +5812,28 @@ describe('`color-mix(…)` polyfill', () => {
       }"
     `)
   })
+
+  it('does not apply optimizations when already inside a @supports (color: color-mix... block', async () => {
+    await expect(
+      compileCss(
+        css`
+          @tailwind utilities;
+          @utility mixed {
+            @supports (color: color-mix(in lab, red, red)) {
+              background: color-mix(in oklab, var(--color-1), var(--color-2) 0%);
+            }
+          }
+        `,
+        ['mixed'],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      "@supports (color: color-mix(in lab, red, red)) {
+        .mixed {
+          background: color-mix(in oklab, var(--color-1), var(--color-2) 0%);
+        }
+      }"
+    `)
+  })
 })
 
 describe('`@property` polyfill', async () => {