processRule() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync called by 2

Entity Profile

FrameworkTooling→ TemplateSync→ processRule() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css.ts lines 449–526

function processRule(parent: Root | AtRule, selector: string, properties: any) {
  let rule = parent.nodes?.find(
    (node): node is Rule => node.type === "rule" && node.selector === selector
  ) as Rule | undefined

  if (!rule) {
    rule = postcss.rule({
      selector,
      raws: { semicolon: true, between: " ", before: "\n  " },
    })
    parent.append(rule)
  }

  if (typeof properties === "object") {
    for (const [prop, value] of Object.entries(properties)) {
      // Check if this is any at-rule with empty object (no body).
      if (
        prop.startsWith("@") &&
        typeof value === "object" &&
        value !== null &&
        Object.keys(value).length === 0
      ) {
        // Parse the at-rule.
        const atRuleMatch = prop.match(/@([a-zA-Z-]+)\s*(.*)/)
        if (atRuleMatch) {
          const [, atRuleName, atRuleParams] = atRuleMatch
          const atRule = postcss.atRule({
            name: atRuleName,
            params: atRuleParams,
            raws: { semicolon: true, before: "\n    " },
          })
          rule.append(atRule)
        }
      } else if (typeof value === "string") {
        const decl = postcss.decl({
          prop,
          value: value,
          raws: { semicolon: true, before: "\n    " },
        })

        // Replace existing property or add new one.
        const existingDecl = rule.nodes?.find(
          (node): node is Declaration =>
            node.type === "decl" && node.prop === prop
        )

        existingDecl ? existingDecl.replaceWith(decl) : rule.append(decl)
      } else if (typeof value === "object") {
        // Nested selector (including & selectors).
        const nestedSelector = prop.startsWith("&")
          ? selector.replace(/^([^:]+)/, `$1${prop.substring(1)}`)
          : prop // Use the original selector for other nested elements.
        processRule(parent, nestedSelector, value)
      }
    }
  } else if (typeof properties === "string") {
    // Direct string content for the rule
    try {
      // Parse the CSS string with PostCSS
      const parsed = postcss.parse(`.temp{${properties}}`)
      const tempRule = parsed.first as Rule

      if (tempRule && tempRule.nodes) {
        // 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)
          }
        })
      }
    } catch (error) {
      console.error("Error parsing rule content:", selector, properties, error)
      throw error
    }
  }
}