Do not wrap color-mix in a @supports rule if one already exists (#19450)

Related issue: #19445 

## Summary

Fixes an issue where tailwindcss wraps `color-mix` inside a `@supports`
block even if the original code already checks for support.

Uncompiled Code:

```css
@Utility foo {
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in lab, var(--color-1), var(--color-2));
  }
}
```

### Compiled code: Current behavior

https://play.tailwindcss.com/KSvR7wefdh?file=css

```css
@layer utilities {
  .foo {
    @supports (color: color-mix(in lab, red, red)) {
      background: var(--color-1);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in lab, var(--color-1), var(--color-2));
      }
    }
}
```

### Compiled code: Fixed behavior

```css
@layer utilities {
  @supports (color: color-mix(in lab, red, red)) {
    .foo {
      background: color-mix(in lab, var(--color-1), var(--color-2));
    }
}
```

## Test plan

I have tested this by writing a new test that was at first failing. Now
it passes.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

Author: hirasso

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 () => {