updateCssPlugin() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 2 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ updateCssPlugin() — ui Function Reference

Dependency Diagram

graph TD
  3ed16854_5fb1_8471_04b6_de34189977ee["updateCssPlugin()"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0["update-css.ts"]
  3ed16854_5fb1_8471_04b6_de34189977ee -->|defined in| 19f89ba1_d1e0_8dcc_df03_c70e9de01ca0
  f51e58e3_7a1b_20d7_d56c_af590db86289["transformCss()"]
  f51e58e3_7a1b_20d7_d56c_af590db86289 -->|calls| 3ed16854_5fb1_8471_04b6_de34189977ee
  5fdcba06_8073_a6b3_1d9d_3aa54f32e553["processRule()"]
  3ed16854_5fb1_8471_04b6_de34189977ee -->|calls| 5fdcba06_8073_a6b3_1d9d_3aa54f32e553
  d726b192_d92b_4580_cf53_b8e46f4dc7cd["processAtRule()"]
  3ed16854_5fb1_8471_04b6_de34189977ee -->|calls| d726b192_d92b_4580_cf53_b8e46f4dc7cd
  style 3ed16854_5fb1_8471_04b6_de34189977ee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css.ts lines 85–375

function updateCssPlugin(css: z.infer<typeof registryItemCssSchema>) {
  return {
    postcssPlugin: "update-css",
    Once(root: Root) {
      for (const [selector, properties] of Object.entries(css)) {
        if (selector.startsWith("@")) {
          // Handle at-rules (@layer, @utility, etc.)
          const atRuleMatch = selector.match(/@([a-zA-Z-]+)\s*(.*)/)
          if (!atRuleMatch) continue

          const [, name, params] = atRuleMatch

          // Special handling for imports - place them at the top.
          if (name === "import") {
            // Check if this import already exists.
            const existingImport = root.nodes?.find(
              (node): node is AtRule =>
                node.type === "atrule" &&
                node.name === "import" &&
                node.params === params
            )

            if (!existingImport) {
              const importRule = postcss.atRule({
                name: "import",
                params,
                raws: { semicolon: true },
              })

              // Find the last import to insert after, or insert at beginning.
              const importNodes = root.nodes?.filter(
                (node): node is AtRule =>
                  node.type === "atrule" && node.name === "import"
              )

              if (importNodes && importNodes.length > 0) {
                // Insert after the last existing import.
                const lastImport = importNodes[importNodes.length - 1]
                importRule.raws.before = "\n"
                root.insertAfter(lastImport, importRule)
              } else {
                // No imports exist, insert at the very beginning.
                // Check if the file is empty.
                if (!root.nodes || root.nodes.length === 0) {
                  importRule.raws.before = ""
                } else {
                  importRule.raws.before = ""
                }
                root.prepend(importRule)
              }
            }
          }
          // Special handling for plugins - place them after imports.
          else if (name === "plugin") {
            // Ensure plugin name is quoted if not already.
            let quotedParams = params
            if (params && !params.startsWith('"') && !params.startsWith("'")) {
              quotedParams = `"${params}"`
            }

            // Normalize params for comparison (remove quotes).
            const normalizeParams = (p: string) => {
              if (p.startsWith('"') && p.endsWith('"')) {
                return p.slice(1, -1)
              }
              if (p.startsWith("'") && p.endsWith("'")) {
                return p.slice(1, -1)
              }
              return p
            }

            // Find existing plugin with same normalized params.
            const existingPlugin = root.nodes?.find((node): node is AtRule => {
              if (node.type !== "atrule" || node.name !== "plugin") {
                return false
              }
              return normalizeParams(node.params) === normalizeParams(params)
            })

            if (!existingPlugin) {
              const pluginRule = postcss.atRule({