processAtRule() — ui Function Reference

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

Function typescript FrameworkTooling CLICore calls 1 called by 1

Entity Profile

FrameworkTooling→ CLICore→ processAtRule() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css.ts lines 377–447

function processAtRule(
  root: Root | AtRule,
  name: string,
  params: string,
  properties: any
) {
  // Find or create the at-rule
  let atRule = root.nodes?.find(
    (node): node is AtRule =>
      node.type === "atrule" && node.name === name && node.params === params
  ) as AtRule | undefined

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

  // Process children of this at-rule
  if (typeof properties === "object") {
    for (const [childSelector, childProps] of Object.entries(properties)) {
      if (childSelector.startsWith("@")) {
        // Nested at-rule
        const nestedMatch = childSelector.match(/@([a-zA-Z-]+)\s*(.*)/)
        if (nestedMatch) {
          const [, nestedName, nestedParams] = nestedMatch
          processAtRule(atRule, nestedName, nestedParams, childProps)
        }
      } else {
        // CSS rule within at-rule
        processRule(atRule, childSelector, childProps)
      }
    }
  } else if (typeof properties === "string") {
    // Direct string content for the at-rule
    try {
      // Parse the CSS string with PostCSS
      const parsed = postcss.parse(`.temp{${properties}}`)
      const tempRule = parsed.first as Rule

      if (tempRule && tempRule.nodes) {
        // Create a rule for the at-rule if needed
        const rule = postcss.rule({
          selector: "temp",
          raws: { semicolon: true, between: " ", before: "\n  " },
        })

        // Copy all declarations from the temp rule to our actual rule
        tempRule.nodes.forEach((node) => {
          if (node.type === "decl") {
            const clone = node.clone()
            clone.raws.before = "\n    "
            rule.append(clone)
          }
        })

        // Only add the rule if it has declarations
        if (rule.nodes?.length) {
          atRule.append(rule)
        }
      }
    } catch (error) {
      console.error("Error parsing at-rule content:", properties, error)
      throw error
    }
  }
}