addCustomImport() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ addCustomImport() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 656–702

function addCustomImport({ params }: { params: string }) {
  return {
    postcssPlugin: "add-custom-import",
    Once(root: Root) {
      const importNodes = root.nodes.filter(
        (node): node is AtRule =>
          node.type === "atrule" && node.name === "import"
      )

      // Find custom variant node (to ensure we insert before it)
      const customVariantNode = root.nodes.find(
        (node): node is AtRule =>
          node.type === "atrule" && node.name === "custom-variant"
      )

      // Check if our specific import already exists
      const hasImport = importNodes.some(
        (node) => node.params.replace(/["']/g, "") === params
      )

      if (!hasImport) {
        const importNode = postcss.atRule({
          name: "import",
          params: `"${params}"`,
          raws: { semicolon: true, before: "\n" },
        })

        if (importNodes.length > 0) {
          // If there are existing imports, add after the last import
          const lastImport = importNodes[importNodes.length - 1]
          root.insertAfter(lastImport, importNode)
        } else if (customVariantNode) {
          // If no imports but has custom-variant, insert before it
          root.insertBefore(customVariantNode, importNode)
          root.insertBefore(
            customVariantNode,
            postcss.comment({ text: "---break---" })
          )
        } else {
          // If no imports and no custom-variant, insert at the start
          root.prepend(importNode)
          root.insertAfter(importNode, postcss.comment({ text: "---break---" }))
        }
      }
    },
  }
}