Ensure @Keyframes are still printed

Author: philipp-spiess

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -90,5 +90,36 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+    transform: translateY(-25%);
+  }
+
+  50% {
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+    transform: none;
+  }
 }"
 `;

packages/tailwindcss/src/index.test.ts

@@ -325,12 +325,6 @@ describe('@apply', () => {
         }
       }
 
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
       @property --tw-translate-x {
         syntax: "*";
         inherits: false;
@@ -347,6 +341,12 @@ describe('@apply', () => {
         syntax: "*";
         inherits: false;
         initial-value: 0;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
       }"
     `)
   })
@@ -1155,6 +1155,12 @@ describe('Parsing theme values from CSS', () => {
 
       .accent-red {
         accent-color: var(--color-red);
+      }
+
+      @keyframes foo {
+        to {
+          opacity: 1;
+        }
       }"
     `)
   })
@@ -1241,6 +1247,12 @@ describe('Parsing theme values from CSS', () => {
 
       .accent-green {
         accent-color: var(--color-green);
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
       }"
     `)
   })
@@ -1288,6 +1300,12 @@ describe('Parsing theme values from CSS', () => {
 
       .accent-green {
         accent-color: var(--color-green);
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
       }"
     `)
   })
@@ -1563,6 +1581,12 @@ describe('Parsing theme values from CSS', () => {
         animation: var(--animate-foobar);
       }
 
+      @keyframes foo {
+        to {
+          opacity: 1;
+        }
+      }
+
       @keyframes foobar {
         to {
           opacity: 0;
@@ -1609,6 +1633,12 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
+      }
+
+      @keyframes unused {
+        to {
+          opacity: 0;
+        }
       }"
     `)
   })
@@ -1685,6 +1715,12 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
+      }
+
+      @keyframes unused {
+        to {
+          opacity: 0;
+        }
       }"
     `)
   })
@@ -1773,6 +1809,12 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
+      }
+
+      @keyframes unused {
+        to {
+          opacity: 0;
+        }
       }"
     `)
   })
@@ -1822,7 +1864,7 @@ describe('Parsing theme values from CSS', () => {
     `)
   })
 
-  test('theme values added as reference are not included in the output as variables', async () => {
+  test('theme values added as reference are not included in the output as variables but emit fallback values', async () => {
     expect(
       await compileCss(
         css`
@@ -1875,6 +1917,16 @@ describe('Parsing theme values from CSS', () => {
     ).toMatchInlineSnapshot(`
       ".animate-foo {
         animation: var(--animate-foo, foo 1s infinite);
+      }
+
+      @keyframes foo {
+        0%, 100% {
+          color: red;
+        }
+
+        50% {
+          color: #00f;
+        }
       }"
     `)
   })
@@ -1916,6 +1968,16 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-pink {
         background-color: var(--color-pink);
+      }
+
+      @keyframes foo {
+        0%, 100% {
+          color: red;
+        }
+
+        50% {
+          color: #00f;
+        }
       }"
     `)
   })
@@ -3696,7 +3758,7 @@ it("should error when `layer(…)` is used, but it's not the first param", async
   )
 })
 
-describe('`@reference "…" reference`', () => {
+describe('`@reference "…" imports`', () => {
   test('recursively removes styles', async () => {
     let loadStylesheet = async (id: string, base: string) => {
       if (id === './foo/baz.css') {
@@ -3851,11 +3913,17 @@ describe('`@reference "…" reference`', () => {
     ).resolves.toMatchInlineSnapshot(`
       ".bar {
         animation: var(--animate-spin, spin 1s linear infinite);
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
       }"
     `)
   })
 
-  test('emits theme variables and keyframes defined inside @reference-ed files', async () => {
+  test('emits CSS variable fallback and keyframes defined inside @reference-ed files', async () => {
     let loadStylesheet = async (id: string, base: string) => {
       switch (id) {
         case './one.css': {
@@ -3915,6 +3983,16 @@ describe('`@reference "…" reference`', () => {
       ".bar {
         animation: var(--animate-wiggle, wiggle 1s ease-in-out infinite);
         color: var(--color-red, red);
+      }
+
+      @keyframes wiggle {
+        0%, 100% {
+          transform: rotate(-3deg);
+        }
+
+        50% {
+          transform: rotate(3deg);
+        }
       }"
     `)
   })

packages/tailwindcss/src/index.ts

@@ -468,10 +468,6 @@ async function parseCss(
         // since the `@theme` rule itself will be removed.
         if (child.kind === 'at-rule' && child.name === '@keyframes') {
           // Do not track/emit `@keyframes`, if they are part of a `@theme reference`.
-          if (themeOptions & ThemeOptions.REFERENCE) {
-            return WalkAction.Skip
-          }
-
           theme.addKeyframes(child)
           return WalkAction.Skip
         }
@@ -544,8 +540,9 @@ async function parseCss(
     let keyframesRules = designSystem.theme.getKeyframes()
     for (let keyframes of keyframesRules) {
       // Wrap `@keyframes` in `AtRoot` so they are hoisted out of `:root` when
-      // printing.
-      nodes.push(atRoot([keyframes]))
+      // printing. We push it to the top-level of the AST so that an eventual
+      // `@reference` does not cut it out when printing the document.
+      ast.push(atRoot([keyframes]))
     }
 
     firstThemeRule.nodes = [context({ theme: true }, nodes)]