applyRtlMapping() — ui Function Reference

Architecture documentation for the applyRtlMapping() function in transform-rtl.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 1 called by 1

Entity Profile

FrameworkTooling→ CLICore→ applyRtlMapping() — ui Function Reference

Dependency Diagram

graph TD
  7a99391a_676c_f329_e2df_d08e5c98ca85["applyRtlMapping()"]
  800d6a7b_126c_42b5_bf8e_f313b0852251["transform-rtl.ts"]
  7a99391a_676c_f329_e2df_d08e5c98ca85 -->|defined in| 800d6a7b_126c_42b5_bf8e_f313b0852251
  fcd38b0b_e1eb_3e41_c063_65e5902b5c47["transformStringLiteralNode()"]
  fcd38b0b_e1eb_3e41_c063_65e5902b5c47 -->|calls| 7a99391a_676c_f329_e2df_d08e5c98ca85
  35f5833f_e233_d06c_e1a4_06b1e4fca37c["splitClassName()"]
  7a99391a_676c_f329_e2df_d08e5c98ca85 -->|calls| 35f5833f_e233_d06c_e1a4_06b1e4fca37c
  style 7a99391a_676c_f329_e2df_d08e5c98ca85 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-rtl.ts lines 141–247

export function applyRtlMapping(input: string) {
  return input
    .split(" ")
    .flatMap((className) => {
      // Skip classes that already have rtl: or ltr: prefix.
      if (className.startsWith("rtl:") || className.startsWith("ltr:")) {
        return [className]
      }

      // Replace the cn-rtl-flip marker with rtl:rotate-180.
      if (className === RTL_FLIP_MARKER) {
        return ["rtl:rotate-180"]
      }
      const [variant, value, modifier] = splitClassName(className)

      if (!value) {
        return [className]
      }

      // Check for translate-x patterns first (add rtl: variant, don't replace).
      for (const [physical, rtlPhysical] of RTL_TRANSLATE_X_MAPPINGS) {
        if (value.startsWith(physical)) {
          const rtlValue = value.replace(physical, rtlPhysical)
          const rtlClass = variant
            ? `rtl:${variant}:${rtlValue}${modifier ? `/${modifier}` : ""}`
            : `rtl:${rtlValue}${modifier ? `/${modifier}` : ""}`
          return [className, rtlClass]
        }
      }

      // Check for space-x/divide-x patterns (add rtl:*-reverse variant).
      for (const [prefix, reverseClass] of RTL_REVERSE_MAPPINGS) {
        if (value.startsWith(prefix)) {
          const rtlClass = variant
            ? `rtl:${variant}:${reverseClass}`
            : `rtl:${reverseClass}`
          return [className, rtlClass]
        }
      }

      // Check for cursor and other swap patterns (add rtl: variant with swapped value).
      for (const [physical, swapped] of RTL_SWAP_MAPPINGS) {
        if (value === physical) {
          const rtlClass = variant
            ? `rtl:${variant}:${swapped}`
            : `rtl:${swapped}`
          return [className, rtlClass]
        }
      }

      // Check for slide animations inside logical side variants.
      // e.g., data-[side=inline-start]:slide-in-from-right-2 → data-[side=inline-start]:slide-in-from-end-2
      for (const [
        variantPattern,
        physical,
        logical,
      ] of RTL_LOGICAL_SIDE_SLIDE_MAPPINGS) {
        if (variant?.includes(variantPattern) && value.startsWith(physical)) {
          const mappedValue = value.replace(physical, logical)
          const result = modifier
            ? `${variant}:${mappedValue}/${modifier}`
            : `${variant}:${mappedValue}`
          return [result]
        }
      }

      // Skip positioning transformations for physical side variants.
      // e.g., data-[side=left]:-right-1 should NOT become data-[side=left]:-end-1.
      const isPhysicalSideVariant =
        variant?.includes("data-[side=left]") ||
        variant?.includes("data-[side=right]")

      // Find matching RTL mapping for direct replacement.
      let mappedValue = value
      for (const [physical, logical] of RTL_MAPPINGS) {
        if (
          isPhysicalSideVariant &&
          POSITIONING_PREFIXES.some((p) => physical.startsWith(p))
        ) {
          continue
        }