updateCssVarsPluginV4() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 2 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ updateCssVarsPluginV4() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 393–496

function updateCssVarsPluginV4(
  cssVars: z.infer<typeof registryItemCssVarsSchema>,
  options: {
    overwriteCssVars?: boolean
  }
) {
  return {
    postcssPlugin: "update-css-vars-v4",
    Once(root: Root) {
      Object.entries(cssVars).forEach(([key, vars]) => {
        let selector = key === "light" ? ":root" : `.${key}`

        if (key === "theme") {
          selector = "@theme"
          const themeNode = upsertThemeNode(root)
          Object.entries(vars).forEach(([key, value]) => {
            const prop = `--${key.replace(/^--/, "")}`
            const newDecl = postcss.decl({
              prop,
              value,
              raws: { semicolon: true },
            })

            const existingDecl = themeNode?.nodes?.find(
              (node): node is postcss.Declaration =>
                node.type === "decl" && node.prop === prop
            )

            // Only overwrite if overwriteCssVars is true
            // i.e for registry:theme and registry:style
            // We do not want new components to overwrite existing vars.
            // Keep user defined vars.
            if (options.overwriteCssVars) {
              if (existingDecl) {
                existingDecl.replaceWith(newDecl)
              } else {
                themeNode?.append(newDecl)
              }
            } else {
              if (!existingDecl) {
                themeNode?.append(newDecl)
              }
            }
          })
          return
        }

        let ruleNode = root.nodes?.find(
          (node): node is Rule =>
            node.type === "rule" && node.selector === selector
        )

        if (!ruleNode && Object.keys(vars).length > 0) {
          ruleNode = postcss.rule({
            selector,
            nodes: [],
            raws: { semicolon: true, between: " ", before: "\n" },
          })
          root.append(ruleNode)
          root.insertBefore(ruleNode, postcss.comment({ text: "---break---" }))
        }

        Object.entries(vars).forEach(([key, value]) => {
          let prop = `--${key.replace(/^--/, "")}`

          // Special case for sidebar-background.
          if (prop === "--sidebar-background") {
            prop = "--sidebar"
          }

          if (isLocalHSLValue(value)) {
            value = `hsl(${value})`
          }

          const newDecl = postcss.decl({
            prop,
            value,
            raws: { semicolon: true },
          })
          const existingDecl = ruleNode?.nodes.find(
            (node): node is postcss.Declaration =>