updateCssVarsPlugin() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 1 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ updateCssVarsPlugin() — ui Function Reference

Dependency Diagram

graph TD
  eaa1e229_af9a_45f5_064f_bf1836cd5445["updateCssVarsPlugin()"]
  09244f5d_7fce_b385_220b_05945bb9e93b["update-css-vars.ts"]
  eaa1e229_af9a_45f5_064f_bf1836cd5445 -->|defined in| 09244f5d_7fce_b385_220b_05945bb9e93b
  4b9d28e9_450c_12b3_5ef0_44434fa9535b["transformCssVars()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| eaa1e229_af9a_45f5_064f_bf1836cd5445
  58468d43_8548_d5ee_740d_a822964b1aeb["addOrUpdateVars()"]
  eaa1e229_af9a_45f5_064f_bf1836cd5445 -->|calls| 58468d43_8548_d5ee_740d_a822964b1aeb
  style eaa1e229_af9a_45f5_064f_bf1836cd5445 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 229–267

function updateCssVarsPlugin(
  cssVars: z.infer<typeof registryItemCssVarsSchema>
) {
  return {
    postcssPlugin: "update-css-vars",
    Once(root: Root) {
      let baseLayer = root.nodes.find(
        (node) =>
          node.type === "atrule" &&
          node.name === "layer" &&
          node.params === "base"
      ) as AtRule | undefined

      if (!(baseLayer instanceof AtRule)) {
        baseLayer = postcss.atRule({
          name: "layer",
          params: "base",
          nodes: [],
          raws: {
            semicolon: true,
            before: "\n",
            between: " ",
          },
        })
        root.append(baseLayer)
        root.insertBefore(baseLayer, postcss.comment({ text: "---break---" }))
      }

      if (baseLayer !== undefined) {
        // Add variables for each key in cssVars
        Object.entries(cssVars).forEach(([key, vars]) => {
          const selector = key === "light" ? ":root" : `.${key}`
          // TODO: Fix typecheck.
          addOrUpdateVars(baseLayer as AtRule, selector, vars)
        })
      }
    },
  }
}