Don't overwrite @keyframes in theme

tailwindlabs · Oct 16, 2024 · 67139ac · 67139ac
1 parent 47035e0
commit 67139ac
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 37 deletions.
diff --git a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts
@@ -1,7 +1,7 @@
 import { expect, test } from 'vitest'
 import { decl, rule, toCss } from '../ast'
 import { buildDesignSystem } from '../design-system'
-import { Theme, ThemeOptions } from '../theme'
+import { Theme } from '../theme'
 import { applyKeyframesToTheme } from './apply-keyframes-to-theme'
 import { resolveConfig } from './config/resolve-config'
 
@@ -53,18 +53,17 @@ test('keyframes can be merged into the theme', () => {
   `)
 })
 
-test('will reset default keyframes with overwriting keyframes', () => {
+test('will append to the default keyframes with new keyframes', () => {
   let theme = new Theme()
   let design = buildDesignSystem(theme)
 
-  theme.addKeyframe(
+  theme.addKeyframes(
     rule('@keyframes slide-in', [
       rule('from', [decl('opacity', 'translateX(0%)')]),
       rule('to', [decl('opacity', 'translateX(100%)')]),
     ]),
-    ThemeOptions.DEFAULT,
   )
-  theme.addKeyframe(
+  theme.addKeyframes(
     rule('@keyframes slide-out', [
       rule('from', [decl('opacity', 'translateX(100%)')]),
       rule('to', [decl('opacity', 'translateX(0%)')]),
@@ -97,7 +96,15 @@ test('will reset default keyframes with overwriting keyframes', () => {
   applyKeyframesToTheme(design, resolvedConfig, resetThemeKeys)
 
   expect(toCss(design.theme.getKeyframes())).toMatchInlineSnapshot(`
-    "@keyframes slide-out {
+    "@keyframes slide-in {
+      from {
+        opacity: translateX(0%);
+      }
+      to {
+        opacity: translateX(100%);
+      }
+    }
+    @keyframes slide-out {
       from {
         opacity: translateX(100%);
       }

diff --git a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts
@@ -1,6 +1,5 @@
 import { rule, type Rule } from '../ast'
 import type { DesignSystem } from '../design-system'
-import { ThemeOptions } from '../theme'
 import type { ResolvedConfig } from './config/types'
 import { objectToAst } from './plugin-api'
 
@@ -9,12 +8,8 @@ export function applyKeyframesToTheme(
   resolvedConfig: Pick<ResolvedConfig, 'theme'>,
   resetThemeKeys: Set<string>,
 ) {
-  if (resetThemeKeys.has('keyframes')) {
-    designSystem.theme.clearKeyframes(ThemeOptions.DEFAULT)
-  }
-
   for (let rule of keyframesToRules(resolvedConfig)) {
-    designSystem.theme.addKeyframe(rule)
+    designSystem.theme.addKeyframes(rule)
   }
 }
 

diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts
@@ -204,7 +204,7 @@ export function buildPluginApi(
 
       for (let [name, css] of Object.entries(utils)) {
         if (name.startsWith('@keyframes ')) {
-          designSystem.theme.addKeyframe(rule(name, objectToAst(css)))
+          designSystem.theme.addKeyframes(rule(name, objectToAst(css)))
           continue
         }
 

diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
@@ -285,21 +285,11 @@ async function parseCss(
       // Collect `@keyframes` rules to re-insert with theme variables later,
       // since the `@theme` rule itself will be removed.
       if (child.kind === 'rule' && child.selector.startsWith('@keyframes ')) {
-        theme.addKeyframe(child, themeOptions)
+        theme.addKeyframes(child)
         replaceWith([])
         return WalkAction.Skip
       }
 
-      // Detect `--keyframes-*: initial;` to unset the keyframes list
-      if (
-        child.kind === 'declaration' &&
-        child.property === '--keyframes-*' &&
-        child.value === 'initial'
-      ) {
-        theme.clearKeyframes(ThemeOptions.NONE)
-        return
-      }
-
       if (child.kind === 'comment') return
       if (child.kind === 'declaration' && child.property.startsWith('--')) {
         theme.add(child.property, child.value ?? '', themeOptions)

diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts
@@ -13,7 +13,7 @@ export class Theme {
 
   constructor(
     private values = new Map<string, { value: string; options: ThemeOptions }>(),
-    private keyframes = new Set<{ value: Rule; options: ThemeOptions }>([]),
+    private keyframes = new Set<Rule>([]),
   ) {}
 
   add(key: string, value: string, options = ThemeOptions.NONE): void {
@@ -204,21 +204,12 @@ export class Theme {
     return values
   }
 
-  addKeyframe(value: Rule, options = ThemeOptions.NONE): void {
-    this.keyframes.add({ value, options })
-  }
-
-  clearKeyframes(clearOptions: ThemeOptions) {
-    for (let keyframe of this.keyframes) {
-      if ((keyframe.options & clearOptions) !== clearOptions) {
-        continue
-      }
-      this.keyframes.delete(keyframe)
-    }
+  addKeyframes(value: Rule): void {
+    this.keyframes.add(value)
   }
 
   getKeyframes() {
-    return Array.from(this.keyframes.entries()).map(([{ value }]) => value)
+    return Array.from(this.keyframes)
   }
 }