applyStyleToCvaString() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 3 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ applyStyleToCvaString() — ui Function Reference

Dependency Diagram

graph TD
  e405253b_cc7a_b5b7_8daf_ff3eda64d06b["applyStyleToCvaString()"]
  cef4e429_7112_fef5_ae0b_a838a57ccf71["transform-style-map.ts"]
  e405253b_cc7a_b5b7_8daf_ff3eda64d06b -->|defined in| cef4e429_7112_fef5_ae0b_a838a57ccf71
  983d9e21_ede7_170e_88fa_6bfb84e023a1["applyToCvaCalls()"]
  983d9e21_ede7_170e_88fa_6bfb84e023a1 -->|calls| e405253b_cc7a_b5b7_8daf_ff3eda64d06b
  36418f07_a757_bf99_cc48_08363c18880c["extractCnClasses()"]
  e405253b_cc7a_b5b7_8daf_ff3eda64d06b -->|calls| 36418f07_a757_bf99_cc48_08363c18880c
  e6b2d294_367e_f58a_d0fc_61445043aded["removeCnClasses()"]
  e405253b_cc7a_b5b7_8daf_ff3eda64d06b -->|calls| e6b2d294_367e_f58a_d0fc_61445043aded
  3d34ed55_ff23_5016_655f_5f727967b72a["mergeClasses()"]
  e405253b_cc7a_b5b7_8daf_ff3eda64d06b -->|calls| 3d34ed55_ff23_5016_655f_5f727967b72a
  style e405253b_cc7a_b5b7_8daf_ff3eda64d06b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/styles/transform-style-map.ts lines 42–80

function applyStyleToCvaString(
  stringNode: StringLiteral,
  styleMap: StyleMap,
  matchedClasses: Set<string>
) {
  const stringValue = stringNode.getLiteralText()
  const cnClasses = extractCnClasses(stringValue)

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

  // Process all cn-* classes, not just the first one
  const unmatchedClasses = cnClasses.filter(
    (cnClass) => !matchedClasses.has(cnClass)
  )

  if (unmatchedClasses.length === 0) {
    // All classes already matched, just clean up non-allowlisted ones
    const updated = removeCnClasses(stringValue)
    stringNode.setLiteralValue(updated)
    return
  }

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

  if (tailwindClassesToApply.length > 0) {
    const mergedClasses = tailwindClassesToApply.join(" ")
    const updated = removeCnClasses(mergeClasses(mergedClasses, stringValue))
    stringNode.setLiteralValue(updated)
    unmatchedClasses.forEach((cnClass) => matchedClasses.add(cnClass))
  } else {
    // No styles to apply, but still need to clean up non-allowlisted classes
    const updated = removeCnClasses(stringValue)
    stringNode.setLiteralValue(updated)
  }
}