ui Architecture Docs
Home / Function/ transformTwPrefixes() — ui Function Reference

transformTwPrefixes() — ui Function Reference

Architecture documentation for the transformTwPrefixes() function in transform-tw-prefix.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 2

Entity Profile

Dependency Diagram

graph TD
  6c4f61dd_79b1_2539_0578_e04b4256898d["transformTwPrefixes()"]
  7edb575e_bbe2_1d90_7009_48ce3cf289ac["transform-tw-prefix.ts"]
  6c4f61dd_79b1_2539_0578_e04b4256898d -->|defined in| 7edb575e_bbe2_1d90_7009_48ce3cf289ac
  b37690ec_c82c_c272_b63f_a755b319db6c["getProjectTailwindVersionFromConfig()"]
  6c4f61dd_79b1_2539_0578_e04b4256898d -->|calls| b37690ec_c82c_c272_b63f_a755b319db6c
  14f18958_6010_0c1c_63b2_3aada202d09f["applyPrefix()"]
  6c4f61dd_79b1_2539_0578_e04b4256898d -->|calls| 14f18958_6010_0c1c_63b2_3aada202d09f
  style 6c4f61dd_79b1_2539_0578_e04b4256898d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-tw-prefix.ts lines 10–184

export const transformTwPrefixes: Transformer = async ({
  sourceFile,
  config,
}) => {
  if (!config.tailwind?.prefix) {
    return sourceFile
  }
  const tailwindVersion = await getProjectTailwindVersionFromConfig(config)

  // Find the cva function calls.
  sourceFile
    .getDescendantsOfKind(SyntaxKind.CallExpression)
    .filter((node) => node.getExpression().getText() === "cva")
    .forEach((node) => {
      // cva(base, ...)
      if (node.getArguments()[0]?.isKind(SyntaxKind.StringLiteral)) {
        const defaultClassNames = node.getArguments()[0]
        if (defaultClassNames) {
          defaultClassNames.replaceWithText(
            `"${applyPrefix(
              defaultClassNames.getText()?.replace(/"|'/g, ""),
              config.tailwind.prefix,
              tailwindVersion
            )}"`
          )
        }
      }

      // cva(..., { variants: { ... } })
      if (node.getArguments()[1]?.isKind(SyntaxKind.ObjectLiteralExpression)) {
        node
          .getArguments()[1]
          ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
          .find((node) => node.getName() === "variants")
          ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
          .forEach((node) => {
            node
              .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
              .forEach((node) => {
                const classNames = node.getInitializerIfKind(
                  SyntaxKind.StringLiteral
                )
                if (classNames) {
                  classNames?.replaceWithText(
                    `"${applyPrefix(
                      classNames.getText()?.replace(/"|'/g, ""),
                      config.tailwind.prefix,
                      tailwindVersion
                    )}"`
                  )
                }
              })
          })
      }
    })

  // Find all jsx attributes with the name className.
  sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute).forEach((node) => {
    if (node.getNameNode().getText() === "className") {
      // className="..."
      if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
        const value = node.getInitializer()
        if (value) {
          value.replaceWithText(
            `"${applyPrefix(
              value.getText()?.replace(/"|'/g, ""),
              config.tailwind.prefix,
              tailwindVersion
            )}"`
          )
        }
      }

      // className={...}
      if (node.getInitializer()?.isKind(SyntaxKind.JsxExpression)) {
        // Check if it's a call to cn().
        const callExpression = node
          .getInitializer()
          ?.getDescendantsOfKind(SyntaxKind.CallExpression)
          .find((node) => node.getExpression().getText() === "cn")
        if (callExpression) {

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does transformTwPrefixes() do?
transformTwPrefixes() is a function in the ui codebase, defined in packages/shadcn/src/utils/transformers/transform-tw-prefix.ts.
Where is transformTwPrefixes() defined?
transformTwPrefixes() is defined in packages/shadcn/src/utils/transformers/transform-tw-prefix.ts at line 10.
What does transformTwPrefixes() call?
transformTwPrefixes() calls 2 function(s): applyPrefix, getProjectTailwindVersionFromConfig.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free