Don’t emit color-mix fallback rules inside @keyframes (#19419)

Fixes #19417

Author: thecrypticace

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Validate candidates similarly to Oxide ([#19397](https://github.com/tailwindlabs/tailwindcss/pull/19397))
 - Canonicalization: combine `text-*` and `leading-*` classes ([#19396](https://github.com/tailwindlabs/tailwindcss/pull/19396))
 - Correctly handle duplicate CLI arguments ([#19416](https://github.com/tailwindlabs/tailwindcss/pull/19416))
+- Don’t emit color-mix fallback rules inside `@keyframes` ([#19419](https://github.com/tailwindlabs/tailwindcss/pull/19419))
 
 ### Added
 

packages/tailwindcss/src/ast.test.ts

@@ -290,6 +290,36 @@ it('should not emit exact duplicate declarations in the same rule', () => {
   `)
 })
 
+it('should not emit color-mix() fallbacks inside @keyframes', () => {
+  let ast = CSS.parse(css`
+    @keyframes my-animation {
+      0% {
+        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
+      }
+      100% {
+        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
+      }
+    }
+  `)
+
+  let theme = new Theme()
+  theme.add('--color-emerald-600', 'oklch(59.6% 0.145 163.225)')
+
+  let design = buildDesignSystem(theme)
+
+  expect(toCss(optimizeAst(ast, design))).toMatchInlineSnapshot(`
+    "@keyframes my-animation {
+      0% {
+        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
+      }
+      100% {
+        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
+      }
+    }
+    "
+  `)
+})
+
 it('should only visit children once when calling `replaceWith` with single element array', () => {
   let visited = new Set()
 

packages/tailwindcss/src/ast.ts

@@ -275,13 +275,18 @@ export function optimizeAst(
 
       // Track used animation names
       if (node.property === 'animation') {
-        for (let keyframeName of extractKeyframeNames(node.value))
+        for (let keyframeName of extractKeyframeNames(node.value)) {
           usedKeyframeNames.add(keyframeName)
+        }
       }
 
       // Create fallback values for usages of the `color-mix(…)` function that reference variables
-      // found in the theme config.
-      if (polyfills & Polyfills.ColorMix && node.value.includes('color-mix(')) {
+      // found in the theme config.
+      if (
+        polyfills & Polyfills.ColorMix &&
+        node.value.includes('color-mix(') &&
+        !context.keyframes
+      ) {
         colorMixDeclarations.get(parent).add(node)
       }