applyPrefix() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 1 called by 2

Entity Profile

FrameworkTooling→ TemplateSync→ applyPrefix() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-tw-prefix.ts lines 186–217

export function applyPrefix(
  input: string,
  prefix: string = "",
  tailwindVersion: TailwindVersion
) {
  if (tailwindVersion === "v3") {
    return input
      .split(" ")
      .map((className) => {
        const [variant, value, modifier] = splitClassName(className)
        if (variant) {
          return modifier
            ? `${variant}:${prefix}${value}/${modifier}`
            : `${variant}:${prefix}${value}`
        } else {
          return modifier
            ? `${prefix}${value}/${modifier}`
            : `${prefix}${value}`
        }
      })
      .join(" ")
  }

  return input
    .split(" ")
    .map((className) =>
      className.indexOf(`${prefix}:`) === 0
        ? className
        : `${prefix}:${className.trim()}`
    )
    .join(" ")
}