applyClassesToCnCall() — ui Function Reference

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

Function typescript FrameworkTooling CLICore calls 4 called by 1

Entity Profile

FrameworkTooling→ CLICore→ applyClassesToCnCall() — ui Function Reference

Dependency Diagram

graph TD
  b7873427_1a10_b3fd_c967_d6be1f464ff6["applyClassesToCnCall()"]
  cef4e429_7112_fef5_ae0b_a838a57ccf71["transform-style-map.ts"]
  b7873427_1a10_b3fd_c967_d6be1f464ff6 -->|defined in| cef4e429_7112_fef5_ae0b_a838a57ccf71
  6204e861_6180_95ae_9802_dd441b354a37["applyToMergePropsCalls()"]
  6204e861_6180_95ae_9802_dd441b354a37 -->|calls| b7873427_1a10_b3fd_c967_d6be1f464ff6
  19d51d29_43e2_13c5_a0b3_791f6900bbaa["isStringLiteralLike()"]
  b7873427_1a10_b3fd_c967_d6be1f464ff6 -->|calls| 19d51d29_43e2_13c5_a0b3_791f6900bbaa
  e6b2d294_367e_f58a_d0fc_61445043aded["removeCnClasses()"]
  b7873427_1a10_b3fd_c967_d6be1f464ff6 -->|calls| e6b2d294_367e_f58a_d0fc_61445043aded
  3d34ed55_ff23_5016_655f_5f727967b72a["mergeClasses()"]
  b7873427_1a10_b3fd_c967_d6be1f464ff6 -->|calls| 3d34ed55_ff23_5016_655f_5f727967b72a
  450ad62f_60de_6074_bd15_6596ccfbec62["removeEmptyArgumentsFromCnCall()"]
  b7873427_1a10_b3fd_c967_d6be1f464ff6 -->|calls| 450ad62f_60de_6074_bd15_6596ccfbec62
  style b7873427_1a10_b3fd_c967_d6be1f464ff6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/styles/transform-style-map.ts lines 534–587

function applyClassesToCnCall(
  cnCall: CallExpression,
  tailwindClasses: string,
  matchedClasses: Set<string>,
  unmatchedClasses: string[]
) {
  const firstArg = cnCall.getArguments()[0]

  if (isStringLiteralLike(firstArg)) {
    const existing = firstArg.getLiteralText()
    const updated = removeCnClasses(mergeClasses(tailwindClasses, existing))
    firstArg.setLiteralValue(updated)

    // Mark classes as matched
    unmatchedClasses.forEach((cnClass) => matchedClasses.add(cnClass))

    // Clean up cn-* classes from remaining arguments
    for (let i = 1; i < cnCall.getArguments().length; i++) {
      const arg = cnCall.getArguments()[i]
      if (isStringLiteralLike(arg)) {
        const argText = arg.getLiteralText()
        const cleaned = removeCnClasses(argText)
        if (cleaned !== argText) {
          arg.setLiteralValue(cleaned)
        }
      }
    }

    removeEmptyArgumentsFromCnCall(cnCall)
    return
  }

  // If first arg is not a string literal, prepend tailwind classes
  const argumentTexts = cnCall
    .getArguments()
    .map((argument) => {
      if (isStringLiteralLike(argument)) {
        const cleaned = removeCnClasses(argument.getLiteralText())
        return cleaned ? JSON.stringify(cleaned) : null
      }
      return argument.getText()
    })
    .filter((arg): arg is string => arg !== null)

  const updatedArguments = [JSON.stringify(tailwindClasses), ...argumentTexts]

  // Mark classes as matched
  unmatchedClasses.forEach((cnClass) => matchedClasses.add(cnClass))

  const parent = cnCall.getParent()
  if (parent) {
    cnCall.replaceWithText(`cn(${updatedArguments.join(", ")})`)
  }
}