Preserve custom properties in keyframes (#16376)

Closes #16374

Ensure we don't remove custom properties from within `@keyframe`
declarations.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>

Author: 3 people

packages/tailwindcss/src/ast.ts

@@ -286,7 +286,9 @@ export function optimizeAst(
 
       // Track variables defined in `@theme`
       if (context.theme && node.property[0] === '-' && node.property[1] === '-') {
-        cssThemeVariables.get(parent).add(node)
+        if (!context.keyframes) {
+          cssThemeVariables.get(parent).add(node)
+        }
       }
 
       // Track used CSS variables
@@ -354,6 +356,10 @@ export function optimizeAst(
 
     // AtRule
     else if (node.kind === 'at-rule') {
+      if (node.name === '@keyframes') {
+        context = { ...context, keyframes: true }
+      }
+
       let copy = { ...node, nodes: [] }
       for (let child of node.nodes) {
         transform(child, copy.nodes, context, depth + 1)

packages/tailwindcss/src/index.test.ts

@@ -1613,6 +1613,44 @@ describe('Parsing theme values from CSS', () => {
     `)
   })
 
+  // https://github.com/tailwindlabs/tailwindcss/issues/16374
+  test('custom properties in keyframes preserved', async () => {
+    expect(
+      await compileCss(
+        css`
+          @theme {
+            --animate-foo: used 1s infinite;
+
+            @keyframes used {
+              to {
+                --other: var(--angle);
+                --angle: 360deg;
+              }
+            }
+          }
+
+          @tailwind utilities;
+        `,
+        ['animate-foo'],
+      ),
+    ).toMatchInlineSnapshot(`
+      ":root, :host {
+        --animate-foo: used 1s infinite;
+      }
+
+      .animate-foo {
+        animation: var(--animate-foo);
+      }
+
+      @keyframes used {
+        to {
+          --other: var(--angle);
+          --angle: 360deg;
+        }
+      }"
+    `)
+  })
+
   test('keyframes are generated when used in an animation using `@theme inline`', async () => {
     expect(
       await compileCss(