applyToMergePropsCalls() — ui Function Reference

Architecture documentation for the applyToMergePropsCalls() function in transform-style-map.ts from the ui codebase.

Function typescript FrameworkTooling TemplateSync calls 4 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ applyToMergePropsCalls() — ui Function Reference

Dependency Diagram

graph TD
  6204e861_6180_95ae_9802_dd441b354a37["applyToMergePropsCalls()"]
  cef4e429_7112_fef5_ae0b_a838a57ccf71["transform-style-map.ts"]
  6204e861_6180_95ae_9802_dd441b354a37 -->|defined in| cef4e429_7112_fef5_ae0b_a838a57ccf71
  69e29c3a_597d_3ecf_b7be_50b09c93f556["transformStyleMap()"]
  69e29c3a_597d_3ecf_b7be_50b09c93f556 -->|calls| 6204e861_6180_95ae_9802_dd441b354a37
  1e57bbcb_bd35_08f0_4331_f460319d4a4a["isCnCall()"]
  6204e861_6180_95ae_9802_dd441b354a37 -->|calls| 1e57bbcb_bd35_08f0_4331_f460319d4a4a
  059373ea_201b_782a_4e11_f0a44a18c122["extractCnClassesFromCnCall()"]
  6204e861_6180_95ae_9802_dd441b354a37 -->|calls| 059373ea_201b_782a_4e11_f0a44a18c122
  202d5e0e_dd42_da00_b903_9227d5b955fe["cleanCnClassesFromCnCall()"]
  6204e861_6180_95ae_9802_dd441b354a37 -->|calls| 202d5e0e_dd42_da00_b903_9227d5b955fe
  b7873427_1a10_b3fd_c967_d6be1f464ff6["applyClassesToCnCall()"]
  6204e861_6180_95ae_9802_dd441b354a37 -->|calls| b7873427_1a10_b3fd_c967_d6be1f464ff6
  style 6204e861_6180_95ae_9802_dd441b354a37 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/styles/transform-style-map.ts lines 427–509

function applyToMergePropsCalls(
  sourceFile: SourceFile,
  styleMap: StyleMap,
  matchedClasses: Set<string>
) {
  sourceFile.forEachDescendant((node) => {
    if (!Node.isCallExpression(node)) {
      return
    }

    const expression = node.getExpression()
    if (
      !Node.isIdentifier(expression) ||
      expression.getText() !== "mergeProps"
    ) {
      return
    }

    // Look for object literals in mergeProps arguments
    for (const arg of node.getArguments()) {
      if (!Node.isObjectLiteralExpression(arg)) {
        continue
      }

      // Find className property in the object literal
      const classNameProp = arg
        .getProperties()
        .find(
          (prop) =>
            Node.isPropertyAssignment(prop) &&
            Node.isIdentifier(prop.getNameNode()) &&
            prop.getNameNode().getText() === "className"
        )

      if (!classNameProp || !Node.isPropertyAssignment(classNameProp)) {
        continue
      }

      const classNameInitializer = classNameProp.getInitializer()
      if (!classNameInitializer) {
        continue
      }

      // Handle cn() calls in className
      if (
        Node.isCallExpression(classNameInitializer) &&
        isCnCall(classNameInitializer)
      ) {
        const cnClasses = extractCnClassesFromCnCall(classNameInitializer)

        if (cnClasses.length === 0) {
          continue
        }

        const unmatchedClasses = cnClasses.filter(
          (cnClass) => !matchedClasses.has(cnClass)
        )

        if (unmatchedClasses.length === 0) {
          // Clean up cn-* classes even if already matched
          cleanCnClassesFromCnCall(classNameInitializer)
          continue
        }

        const tailwindClassesToApply = unmatchedClasses
          .map((cnClass) => styleMap[cnClass])
          .filter((classes): classes is string => Boolean(classes))

        if (tailwindClassesToApply.length > 0) {
          const mergedClasses = tailwindClassesToApply.join(" ")
          applyClassesToCnCall(
            classNameInitializer,
            mergedClasses,
            matchedClasses,
            unmatchedClasses
          )
        } else {
          cleanCnClassesFromCnCall(classNameInitializer)
        }
      }
    }