updateTailwindConfigKeyframesPlugin() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 1 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ updateTailwindConfigKeyframesPlugin() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 749–824

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

      const themeNode = upsertThemeNode(root)
      const existingKeyFrameNodes = themeNode.nodes?.filter(
        (node): node is AtRule =>
          node.type === "atrule" && node.name === "keyframes"
      )

      const keyframeValueSchema = z.record(
        z.string(),
        z.record(z.string(), z.string())
      )

      for (const [keyframeName, keyframeValue] of Object.entries(
        tailwindConfig.theme.extend.keyframes
      )) {
        if (typeof keyframeName !== "string") {
          continue
        }

        const parsedKeyframeValue = keyframeValueSchema.safeParse(keyframeValue)

        if (!parsedKeyframeValue.success) {
          continue
        }

        if (
          existingKeyFrameNodes?.find(
            (node): node is postcss.AtRule =>
              node.type === "atrule" &&
              node.name === "keyframes" &&
              node.params === keyframeName
          )
        ) {
          continue
        }

        const keyframeNode = postcss.atRule({
          name: "keyframes",
          params: keyframeName,
          nodes: [],
          raws: { semicolon: true, between: " ", before: "\n  " },
        })

        for (const [key, values] of Object.entries(parsedKeyframeValue.data)) {
          const rule = postcss.rule({
            selector: key,
            nodes: Object.entries(values).map(([key, value]) =>
              postcss.decl({
                prop: key,
                value,
                raws: { semicolon: true, before: "\n      ", between: ": " },
              })
            ),
            raws: { semicolon: true, between: " ", before: "\n    " },
          })
          keyframeNode.append(rule)
        }

        themeNode.append(keyframeNode)
        themeNode.insertBefore(
          keyframeNode,
          postcss.comment({ text: "---break---" })
        )
      }
    },
  }
}