From 67139ac5955b92c246fe27b5a09034450a21d88a Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 16 Oct 2024 15:48:33 +0200 Subject: [PATCH] Don't overwrite `@keyframes` in theme --- .../compat/apply-keyframes-to-theme.test.ts | 19 +++++++++++++------ .../src/compat/apply-keyframes-to-theme.ts | 7 +------ packages/tailwindcss/src/compat/plugin-api.ts | 2 +- packages/tailwindcss/src/index.ts | 12 +----------- packages/tailwindcss/src/theme.ts | 17 ++++------------- 5 files changed, 20 insertions(+), 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 index 966e5648b0e8..602c9364d2ac 100644 --- 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 index c9255cd8e1a9..f4868d87a702 100644 --- 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, resetThemeKeys: Set, ) { - 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 index b42881d5ae7c..8b9fc3bf8b25 100644 --- 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 index a41830456068..e4e46b0cf854 100644 --- 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 index f7dea186fb4c..6ba289f1ad09 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -13,7 +13,7 @@ export class Theme { constructor( private values = new Map(), - private keyframes = new Set<{ value: Rule; options: ThemeOptions }>([]), + private keyframes = new Set([]), ) {} 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) } }