fix: animation name typings (#2551)

fix: animation name
chakra-ui · May 1, 2024 · c3e797e · c3e797e
1 parent 2116abe
commit c3e797e
Show file tree

Hide file tree

Showing 13 changed files with 18,150 additions and 13,808 deletions.
diff --git a/.changeset/new-brooms-impress.md b/.changeset/new-brooms-impress.md
@@ -0,0 +1,9 @@
+---
+'@pandacss/preset-base': patch
+'@pandacss/generator': patch
+'@pandacss/types': patch
+'@pandacss/core': patch
+---
+
+Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
+available.
diff --git a/packages/core/src/context.ts b/packages/core/src/context.ts
@@ -250,6 +250,7 @@ export class Context {
       separator: config.separator,
       shorthands: config.shorthands,
       strictTokens: config.strictTokens,
+      keyframes: config.theme?.keyframes,
     })
   }
 

diff --git a/packages/core/src/utility.ts b/packages/core/src/utility.ts
@@ -13,6 +13,7 @@ import {
 import type { TokenDictionary } from '@pandacss/token-dictionary'
 import type {
   AnyFunction,
+  CssKeyframes,
   Dict,
   PropertyConfig,
   PropertyTransform,
@@ -30,6 +31,7 @@ export interface UtilityOptions {
   prefix?: string
   shorthands?: boolean
   strictTokens?: boolean
+  keyframes?: CssKeyframes
 }
 
 export class Utility {
@@ -89,7 +91,7 @@ export class Utility {
 
   strictTokens = false
 
-  constructor(options: UtilityOptions) {
+  constructor(private options: UtilityOptions) {
     const { tokens, config = {}, separator, prefix, shorthands, strictTokens } = options
 
     this.tokens = tokens
@@ -268,8 +270,12 @@ export class Utility {
   /**
    * Normalize the property config
    */
-  normalize = (value: PropertyConfig | undefined): PropertyConfig | undefined => {
-    const config = { ...value }
+  normalize = (propertyConfig: PropertyConfig | undefined): PropertyConfig | undefined => {
+    const config = { ...propertyConfig }
+
+    if (config.values === 'keyframes') {
+      config.values = Object.keys(this.options.keyframes ?? {})
+    }
 
     // set graceful defaults for className
     if (config.shorthand && !config.className) {

diff --git a/packages/generator/__tests__/generate-prop-types.test.ts b/packages/generator/__tests__/generate-prop-types.test.ts
@@ -152,6 +152,7 @@ describe('generate property types', () => {
       	transitionDuration: Tokens["durations"];
       	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
       	animation: Tokens["animations"];
+      	animationName: "spin" | "ping" | "pulse" | "bounce";
       	animationTimingFunction: Tokens["easings"];
       	animationDuration: Tokens["durations"];
       	animationDelay: Tokens["durations"];

diff --git a/packages/generator/__tests__/generate-style-props.test.ts b/packages/generator/__tests__/generate-style-props.test.ts
@@ -435,7 +435,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/animation-name
          */
-      animationName?: ConditionalValue<CssProperties["animationName"] | AnyString>
+      animationName?: ConditionalValue<UtilityValues["animationName"] | CssVars | CssProperties["animationName"] | AnyString>
        /**
          * The **\`animation-play-state\`** CSS property sets whether an animation is running or paused.
          *
@@ -7906,7 +7906,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/animation-name
          */
-      animationName?: ConditionalValue<WithEscapeHatch<CssProperties["animationName"]>>
+      animationName?: ConditionalValue<WithEscapeHatch<UtilityValues["animationName"] | CssVars>>
        /**
          * The **\`animation-play-state\`** CSS property sets whether an animation is running or paused.
          *

diff --git a/packages/generator/__tests__/generate-token-dts.test.ts b/packages/generator/__tests__/generate-token-dts.test.ts
@@ -42,8 +42,6 @@ test('[dts] should generate package', () => {
 
     export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 
-    export type AnimationName = "spin" | "ping" | "pulse" | "bounce"
-
     export type Tokens = {
     		aspectRatios: AspectRatioToken
     		borders: BorderToken
@@ -62,7 +60,6 @@ test('[dts] should generate package', () => {
     		sizes: SizeToken
     		animations: AnimationToken
     		breakpoints: BreakpointToken
-    		animationName: AnimationName
     } & { [token: string]: never }
 
     export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets""
@@ -121,8 +118,6 @@ test('[dts] should generate package - custom formatTokenName', () => {
 
     export type BreakpointToken = "$sm" | "$md" | "$lg" | "$xl" | "$2xl"
 
-    export type AnimationName = "spin" | "ping" | "pulse" | "bounce"
-
     export type Tokens = {
     		aspectRatios: AspectRatioToken
     		borders: BorderToken
@@ -141,7 +136,6 @@ test('[dts] should generate package - custom formatTokenName', () => {
     		sizes: SizeToken
     		animations: AnimationToken
     		breakpoints: BreakpointToken
-    		animationName: AnimationName
     } & { [token: string]: never }
 
     export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets""

diff --git a/packages/generator/src/artifacts/types/token-types.ts b/packages/generator/src/artifacts/types/token-types.ts
@@ -29,10 +29,7 @@ const categories = [
 ]
 
 export function generateTokenTypes(ctx: Context) {
-  const {
-    tokens,
-    config: { theme },
-  } = ctx
+  const { tokens } = ctx
 
   const set = new Set<string>()
 
@@ -53,12 +50,6 @@ export function generateTokenTypes(ctx: Context) {
       set.add(`export type ${typeName}Token = ${unionType(value.keys())}`)
       result.add(`\t\t${key}: ${typeName}Token`)
     }
-
-    const keyframes = Object.keys(theme?.keyframes ?? {})
-    if (keyframes.length) {
-      set.add(`export type AnimationName = ${unionType(keyframes)}`)
-      result.add(`\t\tanimationName: AnimationName`)
-    }
   }
 
   result.add('} & { [token: string]: never }')

diff --git a/packages/preset-base/src/utilities/transitions.ts b/packages/preset-base/src/utilities/transitions.ts
@@ -71,7 +71,7 @@ export const transitions: UtilityConfig = {
   },
   animationName: {
     className: 'animation-name',
-    values: 'animationName',
+    values: 'keyframes',
     group: 'Transition',
   },
   animationTimingFunction: {

diff --git a/packages/studio/styled-system/tokens/tokens.d.ts b/packages/studio/styled-system/tokens/tokens.d.ts
@@ -39,8 +39,6 @@ export type AssetToken = "check"
 
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 
-export type AnimationName = "spin" | "ping" | "pulse" | "bounce"
-
 export type Tokens = {
 		aspectRatios: AspectRatioToken
 		borders: BorderToken
@@ -60,7 +58,6 @@ export type Tokens = {
 		colors: ColorToken
 		assets: AssetToken
 		breakpoints: BreakpointToken
-		animationName: AnimationName
 } & { [token: string]: never }
 
 export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"
diff --git a/packages/studio/styled-system/types/prop-type.d.ts b/packages/studio/styled-system/types/prop-type.d.ts
@@ -148,6 +148,7 @@ export interface UtilityValues {
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
+	animationName: "spin" | "ping" | "pulse" | "bounce";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];

diff --git a/packages/studio/styled-system/types/style-props.d.ts b/packages/studio/styled-system/types/style-props.d.ts
@@ -429,7 +429,7 @@ animationIterationCount?: ConditionalValue<CssProperties["animationIterationCoun
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-name
    */
-animationName?: ConditionalValue<CssProperties["animationName"] | AnyString>
+animationName?: ConditionalValue<UtilityValues["animationName"] | CssVars | CssProperties["animationName"] | AnyString>
  /**
    * The **`animation-play-state`** CSS property sets whether an animation is running or paused.
    *

diff --git a/packages/types/src/utility.ts b/packages/types/src/utility.ts
@@ -10,7 +10,7 @@ interface TokenFn {
 type ThemeFn = (token: (path: string) => any) => Record<string, string>
 
 export type PropertyValues =
-  | LiteralUnion<TokenCategory>
+  | LiteralUnion<TokenCategory | 'keyframes'>
   | string[]
   | { type: string }
   | Record<string, string>