applyToClassNameAttributes() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 3 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ applyToClassNameAttributes() — ui Function Reference

Dependency Diagram

graph TD
  e02dab01_6687_6666_d998_78768ab89830["applyToClassNameAttributes()"]
  cef4e429_7112_fef5_ae0b_a838a57ccf71["transform-style-map.ts"]
  e02dab01_6687_6666_d998_78768ab89830 -->|defined in| cef4e429_7112_fef5_ae0b_a838a57ccf71
  69e29c3a_597d_3ecf_b7be_50b09c93f556["transformStyleMap()"]
  69e29c3a_597d_3ecf_b7be_50b09c93f556 -->|calls| e02dab01_6687_6666_d998_78768ab89830
  7ae791a4_b3a5_57c7_68a9_d4375998b5e7["extractCnClassesFromAttribute()"]
  e02dab01_6687_6666_d998_78768ab89830 -->|calls| 7ae791a4_b3a5_57c7_68a9_d4375998b5e7
  b485ec68_aafc_76e7_2137_6da415f1d2ec["cleanCnClassesFromAttribute()"]
  e02dab01_6687_6666_d998_78768ab89830 -->|calls| b485ec68_aafc_76e7_2137_6da415f1d2ec
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3["applyClassesToElement()"]
  e02dab01_6687_6666_d998_78768ab89830 -->|calls| 470d33e5_1a8c_ef52_d881_58cf2d3d50a3
  style e02dab01_6687_6666_d998_78768ab89830 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/styles/transform-style-map.ts lines 149–203

function applyToClassNameAttributes(
  sourceFile: SourceFile,
  styleMap: StyleMap,
  matchedClasses: Set<string>
) {
  sourceFile.forEachDescendant((node) => {
    if (
      !Node.isJsxAttribute(node) ||
      node.getNameNode().getText() !== "className"
    ) {
      return
    }

    const initializer = node.getInitializer()
    if (!initializer) {
      return
    }

    const cnClasses = extractCnClassesFromAttribute(initializer)

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

    const jsxElement = node.getParent()?.getParent()
    if (
      !jsxElement ||
      (!Node.isJsxOpeningElement(jsxElement) &&
        !Node.isJsxSelfClosingElement(jsxElement))
    ) {
      return
    }

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

    if (unmatchedClasses.length === 0) {
      // Even if all classes are already matched, we still need to clean them up
      cleanCnClassesFromAttribute(initializer)
      return
    }

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

    if (tailwindClassesToApply.length > 0) {
      const mergedClasses = tailwindClassesToApply.join(" ")
      applyClassesToElement(jsxElement, mergedClasses)
    } else {
      cleanCnClassesFromAttribute(initializer)
    }
  })
}