diff --git a/CHANGELOG.md b/CHANGELOG.md index 035b39c69..a62747d10 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index 63a621c6a..24f31f7bb 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/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() diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 4069268c1..ab0a4fb4d 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/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) }