addCustomVariant() — ui Function Reference

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

Function typescript FrameworkTooling CLICore called by 1

Entity Profile

FrameworkTooling→ CLICore→ addCustomVariant() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 619–654

function addCustomVariant({ params }: { params: string }) {
  return {
    postcssPlugin: "add-custom-variant",
    Once(root: Root) {
      const customVariant = root.nodes.find(
        (node): node is AtRule =>
          node.type === "atrule" && node.name === "custom-variant"
      )

      if (!customVariant) {
        // Find all import nodes
        const importNodes = root.nodes.filter(
          (node): node is AtRule =>
            node.type === "atrule" && node.name === "import"
        )

        const variantNode = postcss.atRule({
          name: "custom-variant",
          params,
          raws: { semicolon: true, before: "\n" },
        })

        if (importNodes.length > 0) {
          // Insert after the last import
          const lastImport = importNodes[importNodes.length - 1]
          root.insertAfter(lastImport, variantNode)
        } else {
          // If no imports, insert after the first node
          root.insertAfter(root.nodes[0], variantNode)
        }

        root.insertBefore(variantNode, postcss.comment({ text: "---break---" }))
      }
    },
  }
}