updateTailwindConfigAnimationPlugin() — ui Function Reference

Architecture documentation for the updateTailwindConfigAnimationPlugin() function in update-css-vars.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 1 called by 1

Entity Profile

FrameworkTooling→ CLICore→ updateTailwindConfigAnimationPlugin() — ui Function Reference

Dependency Diagram

graph TD
  1662bbcf_2db2_62d6_ddb3_663c71236ffd["updateTailwindConfigAnimationPlugin()"]
  09244f5d_7fce_b385_220b_05945bb9e93b["update-css-vars.ts"]
  1662bbcf_2db2_62d6_ddb3_663c71236ffd -->|defined in| 09244f5d_7fce_b385_220b_05945bb9e93b
  4b9d28e9_450c_12b3_5ef0_44434fa9535b["transformCssVars()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 1662bbcf_2db2_62d6_ddb3_663c71236ffd
  3662dc7c_005d_b2d3_9a08_eb02c2acaad8["upsertThemeNode()"]
  1662bbcf_2db2_62d6_ddb3_663c71236ffd -->|calls| 3662dc7c_005d_b2d3_9a08_eb02c2acaad8
  style 1662bbcf_2db2_62d6_ddb3_663c71236ffd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 826–868

function updateTailwindConfigAnimationPlugin(
  tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"]
) {
  return {
    postcssPlugin: "update-tailwind-config-animation",
    Once(root: Root) {
      if (!tailwindConfig?.theme?.extend?.animation) {
        return
      }

      const themeNode = upsertThemeNode(root)
      const existingAnimationNodes = themeNode.nodes?.filter(
        (node): node is postcss.Declaration =>
          node.type === "decl" && node.prop.startsWith("--animate-")
      )

      const parsedAnimationValue = z
        .record(z.string(), z.string())
        .safeParse(tailwindConfig.theme.extend.animation)
      if (!parsedAnimationValue.success) {
        return
      }

      for (const [key, value] of Object.entries(parsedAnimationValue.data)) {
        const prop = `--animate-${key}`
        if (
          existingAnimationNodes?.find(
            (node): node is postcss.Declaration => node.prop === prop
          )
        ) {
          continue
        }

        const animationNode = postcss.decl({
          prop,
          value,
          raws: { semicolon: true, between: ": ", before: "\n  " },
        })
        themeNode.append(animationNode)
      }
    },
  }
}