addOrUpdateVars() — ui Function Reference

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

Function typescript FrameworkTooling CLICore called by 1

Entity Profile

FrameworkTooling→ CLICore→ addOrUpdateVars() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 357–391

function addOrUpdateVars(
  baseLayer: AtRule,
  selector: string,
  vars: Record<string, string>
) {
  let ruleNode = baseLayer.nodes?.find(
    (node): node is Rule => node.type === "rule" && node.selector === selector
  )

  if (!ruleNode) {
    if (Object.keys(vars).length > 0) {
      ruleNode = postcss.rule({
        selector,
        raws: { between: " ", before: "\n  " },
      })
      baseLayer.append(ruleNode)
    }
  }

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

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

    existingDecl ? existingDecl.replaceWith(newDecl) : ruleNode?.append(newDecl)
  })
}