feat(rtl): add support

apps/www/public/schema.json

@@ -20,6 +20,9 @@
         },
         "cssVariables": {
           "type": "boolean"
+        },
+        "rtl": {
+          "type": "boolean"
         }
       },
       "required": ["config", "css", "baseColor", "cssVariables"]

packages/cli/src/commands/init.ts

@@ -105,6 +105,14 @@ export async function promptForConfig(
         value: style.name,
       })),
     },
+    {
+      type: "toggle",
+      name: "rtl",
+      message: `Would you like to support ${highlight("RTL")}?`,
+      initial: defaultConfig?.tailwind?.rtl ?? false,
+      active: "yes",
+      inactive: "no",
+    },
     {
       type: "select",
       name: "tailwindBaseColor",
@@ -164,8 +172,9 @@ export async function promptForConfig(
     $schema: "https://ui.shadcn.com/schema.json",
     style: options.style,
     tailwind: {
-      config: options.tailwindConfig,
+      rtl: options.rtl,
       css: options.tailwindCss,
+      config: options.tailwindConfig,
       baseColor: options.tailwindBaseColor,
       cssVariables: options.tailwindCssVariables,
     },

packages/cli/src/utils/get-config.ts

@@ -24,9 +24,10 @@ export const rawConfigSchema = z
     rsc: z.coerce.boolean().default(false),
     tsx: z.coerce.boolean().default(true),
     tailwind: z.object({
-      config: z.string(),
       css: z.string(),
+      config: z.string(),
       baseColor: z.string(),
+      rtl: z.boolean().default(false),
       cssVariables: z.boolean().default(true),
     }),
     aliases: z.object({

packages/cli/src/utils/transformers/index.ts

@@ -3,6 +3,7 @@ import { tmpdir } from "os"
 import path from "path"
 import { Config } from "@/src/utils/get-config"
 import { registryBaseColorSchema } from "@/src/utils/registry/schema"
+import { transformRtl } from "@/src/utils/transformers//transform-rtl"
 import { transformCssVars } from "@/src/utils/transformers/transform-css-vars"
 import { transformImport } from "@/src/utils/transformers/transform-import"
 import { transformJsx } from "@/src/utils/transformers/transform-jsx"
@@ -27,6 +28,7 @@ const transformers: Transformer[] = [
   transformImport,
   transformRsc,
   transformCssVars,
+  transformRtl,
 ]
 
 const project = new Project({

packages/cli/src/utils/transformers/transform-rtl.ts

@@ -0,0 +1,76 @@
+import { Transformer } from "@/src/utils/transformers"
+import { SyntaxKind } from "ts-morph"
+
+import { splitClassName } from "./transform-css-vars"
+
+// Transformer to update string literals for RTL support
+export const transformRtl: Transformer = async ({ sourceFile, config }) => {
+  // If RTL support is not configured, do not transform the source file
+  if (!config.tailwind?.rtl) {
+    return sourceFile
+  }
+
+  // Iterate over all StringLiteral nodes in the file
+  sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
+    const textValue = node.getText()
+    if (textValue) {
+      // Apply direction mappings to each class name in the string
+      const updatedValue = applyRtlClassMappings(textValue)
+      // Replace the current node text with the updated classes text
+      node.replaceWithText(`"${updatedValue.trim()}"`)
+    }
+  })
+
+  return sourceFile
+}
+
+// Define mappings of class prefixes for right-to-left (RTL) support
+const PREFIXES_MAP = new Map([
+  ["pl-", "ps-"],
+  ["ml-", "ms-"],
+  ["pr-", "pe-"],
+  ["mr-", "me-"],
+  ["right-", "end-"],
+  ["left-", "start-"],
+  ["text-right", "text-end"],
+  ["border-l-", "border-s-"],
+  ["border-r-", "border-e-"],
+  ["text-left", "text-start"],
+])
+
+// Define additional RTL specific class replacements
+const ADDITIONAL_CLASSES = new Map([
+  ["space-x-", "rtl:space-x-reverse"],
+  ["divide-x-", "rtl:divide-x-reverse"],
+])
+
+// Apply RTL class mappings to a space-separated list of class names
+export function applyRtlClassMappings(input: string): string {
+  // Split the input into individual class names
+  const classNames = input.split(" ")
+  const rtlSupported = new Set<string>()
+
+  for (let className of classNames) {
+    const [, value] = splitClassName(className)
+    // Find and apply prefix replacement, if exists
+    const rtlPrefix = Array.from(PREFIXES_MAP).find(([prefix]) => {
+      return value?.startsWith(prefix)
+    })
+
+    if (!rtlPrefix) {
+      rtlSupported.add(className)
+      continue
+    }
+
+    rtlSupported.add(className.replace(rtlPrefix[0], rtlPrefix[1]))
+  }
+
+  for (const [prefix, className] of Array.from(ADDITIONAL_CLASSES)) {
+    if (input.indexOf(prefix) !== -1) {
+      rtlSupported.add(className)
+    }
+  }
+
+  // Reassemble the class list and trim any excess whitespace
+  return Array.from(rtlSupported).join(" ").trim()
+}

templates/next-template/components.json

@@ -2,6 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "default",
   "tailwind": {
+    "rtl": true,
     "config": "tailwind.config.js",
     "css": "app/globals.css",
     "baseColor": "slate",