Remove all @keyframes in reference mode

tailwindlabs · Jan 9, 2025 · 21bc021 · 21bc021
1 parent 76151d4
commit 21bc021
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve performance and memory usage ([#15529](https://github.com/tailwindlabs/tailwindcss/pull/15529))
 - Ensure `@apply` rules are processed in the correct order ([#15542](https://github.com/tailwindlabs/tailwindcss/pull/15542))
 - Allow negative utility names in `@utilty` ([#15573](https://github.com/tailwindlabs/tailwindcss/pull/15573))
+- Remove all `@keyframes` contributed by JavaScript plugins when using `@reference` imports ([#15581](https://github.com/tailwindlabs/tailwindcss/pull/15581))
 - _Upgrade (experimental)_: Do not extract class names from functions (e.g. `shadow` in `filter: 'drop-shadow(…)'`) ([#15566](https://github.com/tailwindlabs/tailwindcss/pull/15566))
 
 ### Changed

diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
@@ -276,14 +276,27 @@ function upgradeToFullPluginSupport({
     }
   }
 
-  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig, {
-    set current(value: number) {
-      features |= value
+  let pluginApiConfig = {
+    designSystem,
+    ast,
+    resolvedConfig,
+    featuresRef: {
+      set current(value: number) {
+        features |= value
+      },
     },
-  })
+  }
+
+  let pluginApi = buildPluginApi({ ...pluginApiConfig, referenceMode: false })
+  let referenceModePluginApi = undefined
 
   for (let { handler, reference } of resolvedConfig.plugins) {
-    handler(reference ? { ...pluginApi, addBase: () => {} } : pluginApi)
+    if (reference) {
+      referenceModePluginApi ||= buildPluginApi({ ...pluginApiConfig, referenceMode: true })
+      handler(referenceModePluginApi)
+    } else {
+      handler(pluginApi)
+    }
   }
 
   // Merge the user-configured theme keys into the design system. The compat

diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts
@@ -86,14 +86,22 @@ export type PluginAPI = {
 
 const IS_VALID_UTILITY_NAME = /^[a-z@][a-zA-Z0-9/%._-]*$/
 
-export function buildPluginApi(
-  designSystem: DesignSystem,
-  ast: AstNode[],
-  resolvedConfig: ResolvedConfig,
-  featuresRef: { current: Features },
-): PluginAPI {
+export function buildPluginApi({
+  designSystem,
+  ast,
+  resolvedConfig,
+  featuresRef,
+  referenceMode,
+}: {
+  designSystem: DesignSystem
+  ast: AstNode[]
+  resolvedConfig: ResolvedConfig
+  featuresRef: { current: Features }
+  referenceMode: boolean
+}): PluginAPI {
   let api: PluginAPI = {
     addBase(css) {
+      if (referenceMode) return
       let baseNodes = objectToAst(css)
       featuresRef.current |= substituteFunctions(baseNodes, designSystem)
       ast.push(atRule('@layer', 'base', baseNodes))
@@ -212,7 +220,9 @@ export function buildPluginApi(
 
       for (let [name, css] of entries) {
         if (name.startsWith('@keyframes ')) {
-          ast.push(rule(name, objectToAst(css)))
+          if (!referenceMode) {
+            ast.push(rule(name, objectToAst(css)))
+          }
           continue
         }
 

diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
@@ -3250,4 +3250,61 @@ describe('`@import "…" reference`', () => {
       }"
     `)
   })
+
+  test.only('removes @keyframes', async () => {
+    await expect(
+      compileCss(
+        css`
+          @media reference {
+            @layer theme, base, components, utilities;
+            @layer theme {
+              @theme {
+                --animate-spin: spin 1s linear infinite;
+                --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+                @keyframes spin {
+                  to {
+                    transform: rotate(360deg);
+                  }
+                }
+              }
+            }
+            @layer base {
+              @keyframes ping {
+                75%,
+                100% {
+                  transform: scale(2);
+                  opacity: 0;
+                }
+              }
+            }
+            @plugin "my-plugin";
+          }
+
+          .bar {
+            @apply animate-spin;
+          }
+        `,
+        ['animate-spin'],
+        {
+          loadModule: async () => ({
+            module: ({ addBase, addUtilities }: PluginAPI) => {
+              addBase({
+                '@keyframes base': { '100%': { opacity: '0' } },
+              })
+              addUtilities({
+                '@keyframes utilities': { '100%': { opacity: '0' } },
+              })
+            },
+            base: '/root',
+          }),
+        },
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      "@layer theme, base, components, utilities;
+
+      .bar {
+        animation: var(--animate-spin);
+      }"
+    `)
+  })
 })