applyClassesToElement() — ui Function Reference

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

Function typescript FrameworkTooling CLICore calls 5 called by 1

Entity Profile

FrameworkTooling→ CLICore→ applyClassesToElement() — ui Function Reference

Dependency Diagram

graph TD
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3["applyClassesToElement()"]
  cef4e429_7112_fef5_ae0b_a838a57ccf71["transform-style-map.ts"]
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3 -->|defined in| cef4e429_7112_fef5_ae0b_a838a57ccf71
  e02dab01_6687_6666_d998_78768ab89830["applyToClassNameAttributes()"]
  e02dab01_6687_6666_d998_78768ab89830 -->|calls| 470d33e5_1a8c_ef52_d881_58cf2d3d50a3
  19d51d29_43e2_13c5_a0b3_791f6900bbaa["isStringLiteralLike()"]
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3 -->|calls| 19d51d29_43e2_13c5_a0b3_791f6900bbaa
  e6b2d294_367e_f58a_d0fc_61445043aded["removeCnClasses()"]
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3 -->|calls| e6b2d294_367e_f58a_d0fc_61445043aded
  3d34ed55_ff23_5016_655f_5f727967b72a["mergeClasses()"]
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3 -->|calls| 3d34ed55_ff23_5016_655f_5f727967b72a
  1e57bbcb_bd35_08f0_4331_f460319d4a4a["isCnCall()"]
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3 -->|calls| 1e57bbcb_bd35_08f0_4331_f460319d4a4a
  450ad62f_60de_6074_bd15_6596ccfbec62["removeEmptyArgumentsFromCnCall()"]
  470d33e5_1a8c_ef52_d881_58cf2d3d50a3 -->|calls| 450ad62f_60de_6074_bd15_6596ccfbec62
  style 470d33e5_1a8c_ef52_d881_58cf2d3d50a3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/styles/transform-style-map.ts lines 318–416

function applyClassesToElement(element: Node, tailwindClasses: string) {
  if (
    !Node.isJsxOpeningElement(element) &&
    !Node.isJsxSelfClosingElement(element)
  ) {
    return
  }

  const attribute = element
    .getAttributes()
    .find(
      (attr) =>
        Node.isJsxAttribute(attr) &&
        attr.getNameNode().getText() === "className"
    )

  if (!attribute || !Node.isJsxAttribute(attribute)) {
    element.addAttribute({
      name: "className",
      initializer: `{cn(${JSON.stringify(tailwindClasses)})}`,
    })
    return
  }

  const initializer = attribute.getInitializer()

  if (!initializer) {
    attribute.setInitializer(`{cn(${JSON.stringify(tailwindClasses)})}`)
    return
  }

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

  if (!Node.isJsxExpression(initializer)) {
    return
  }

  const expression = initializer.getExpression()

  if (!expression) {
    attribute.setInitializer(`{cn(${JSON.stringify(tailwindClasses)})}`)
    return
  }

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

  if (Node.isCallExpression(expression) && isCnCall(expression)) {
    const firstArg = expression.getArguments()[0]
    if (isStringLiteralLike(firstArg)) {
      const existing = firstArg.getLiteralText()
      const updated = removeCnClasses(mergeClasses(tailwindClasses, existing))
      firstArg.setLiteralValue(updated)

      for (let i = 1; i < expression.getArguments().length; i++) {
        const arg = expression.getArguments()[i]
        if (isStringLiteralLike(arg)) {
          const argText = arg.getLiteralText()
          const cleaned = removeCnClasses(argText)
          if (cleaned !== argText) {
            arg.setLiteralValue(cleaned)
          }
        }
      }

      removeEmptyArgumentsFromCnCall(expression)
      return
    }

    const argumentTexts = expression
      .getArguments()
      .map((argument) => {