updateBaseLayerPlugin() — ui Function Reference

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

Function typescript FrameworkTooling CLICore called by 1

Entity Profile

FrameworkTooling→ CLICore→ updateBaseLayerPlugin() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 154–227

function updateBaseLayerPlugin({
  tailwindVersion,
}: {
  tailwindVersion?: TailwindVersion
}) {
  return {
    postcssPlugin: "update-base-layer",
    Once(root: Root) {
      const requiredRules = [
        {
          selector: "*",
          apply:
            tailwindVersion === "v4"
              ? "border-border outline-ring/50"
              : "border-border",
        },
        { selector: "body", apply: "bg-background text-foreground" },
      ]

      let baseLayer = root.nodes.find(
        (node): node is AtRule =>
          node.type === "atrule" &&
          node.name === "layer" &&
          node.params === "base" &&
          requiredRules.every(({ selector, apply }) =>
            node.nodes?.some(
              (rule): rule is Rule =>
                rule.type === "rule" &&
                rule.selector === selector &&
                rule.nodes.some(
                  (applyRule): applyRule is AtRule =>
                    applyRule.type === "atrule" &&
                    applyRule.name === "apply" &&
                    applyRule.params === apply
                )
            )
          )
      ) as AtRule | undefined

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

      requiredRules.forEach(({ selector, apply }) => {
        const existingRule = baseLayer?.nodes?.find(
          (node): node is Rule =>
            node.type === "rule" && node.selector === selector
        )

        if (!existingRule) {
          baseLayer?.append(
            postcss.rule({
              selector,
              nodes: [
                postcss.atRule({
                  name: "apply",
                  params: apply,
                  raws: { semicolon: true, before: "\n    " },
                }),
              ],
              raws: { semicolon: true, between: " ", before: "\n  " },
            })
          )
        }
      })
    },
  }
}