@mgcrea/react-native-tailwind 0.13.0 → 0.14.0

package/README.md

@@ -27,7 +27,7 @@
     <img src="https://img.shields.io/codecov/c/github/mgcrea/react-native-tailwind?style=for-the-badge" alt="coverage" />
   </a>
   <a href="https://depfu.com/github/mgcrea/react-native-tailwind">
-    <img src="https://img.shields.io/depfu/dependencies/github/mgcrea/react-native-tailwind?style=for-the-badge" alt="dependencies status" />
+    <img src="https://img.shields.io/badge/dependencies-none-brightgreen?style=for-the-badge" alt="dependencies status" />
   </a>
 </p>
 
@@ -37,22 +37,21 @@ Compile-time Tailwind CSS for React Native with zero runtime overhead. Transform
 
 ## Features
 
-- ⚡ **Zero runtime overhead** — All transformations happen at compile time
-- 🔧 **No dependencies** — Direct-to-React-Native style generation without tailwindcss package
-- 🎯 **Babel-only setup** — No Metro configuration required
-- 📝 **TypeScript-first** — Full type safety and autocomplete support
-- 🚀 **Optimized performance** — Compiles down to `StyleSheet.create` for optimal performance
-- 📦 **Small bundle size** — Only includes actual styles used in your app
-- 🎨 **Custom colors** — Extend the default palette via `tailwind.config.*`
-- 📐 **Arbitrary values** — Use custom sizes and borders: `w-[123px]`, `rounded-[20px]`
-- 🔀 **Dynamic className** — Conditional styles with hybrid compile-time optimization
-- 🏃 **Runtime option** — Optional `tw` template tag for fully dynamic styling (~25KB)
-- 🎯 **State modifiers** — `active:`, `hover:`, `focus:`, and `disabled:` modifiers for interactive components
-- 📱 **Platform modifiers** — `ios:`, `android:`, and `web:` modifiers for platform-specific styling
-- 🌓 **Color scheme modifiers** — `dark:` and `light:` modifiers for automatic theme adaptation
-- 🎨 **Scheme modifier** — `scheme:` convenience modifier that expands to both `dark:` and `light:` variants
-- 📜 **Special style props** — Support for `contentContainerClassName`, `columnWrapperClassName`, and more
-- 🎛️ **Custom attributes** — Configure which props to transform with exact matching or glob patterns
+- **⚡ Zero Runtime Overhead** - All transformations happen at compile time
+- **🔧 No Dependencies** - Direct-to-React-Native style generation without tailwindcss package
+- **🎯 Babel-only Setup** - No Metro configuration required
+- **📝 TypeScript-first** - Full type safety and autocomplete support
+- **🚀 Optimized Performance** - Compiles down to StyleSheet.create for optimal performance
+- **🔀 Dynamic className** - Conditional styles support with compile-time optimization
+- **📦 Small Bundle Size** - Only includes actual styles used in your app
+- **🎯 State Modifiers** - `active:`, `hover:`, `focus:`, and `disabled:` modifiers for interactive components
+- **📱 Platform Modifiers** - `ios:`, `android:`, and `web:` modifiers for platform-specific styling
+- **🌓 Color Scheme Modifiers** - `dark:` and `light:` and `scheme:` modifiers for automatic theme adaptation
+- **🎨 Custom Colors** - Extend the default palette via tailwind.config.\*
+- **📐 Arbitrary Values** - Use custom sizes and borders: `w-[123px]`, `rounded-[20px]`
+- **📜 Special Style Props** - Support for `contentContainerClassName`, `columnWrapperClassName`, and more
+
+📊 **[How It Compares](https://mgcrea.github.io/react-native-tailwind/getting-started/how-it-compares/)** - See how this library stacks up against other React Native styling solutions.
 
 ## Demo
 
@@ -200,9 +199,7 @@ import { View, Text } from "react-native";
 export function PlatformCard() {
   return (
     <View className="p-4 ios:p-6 android:p-8 bg-white rounded-lg">
-      <Text className="text-base ios:text-blue-600 android:text-green-600">
-        Platform-specific styles
-      </Text>
+      <Text className="text-base ios:text-blue-600 android:text-green-600">Platform-specific styles</Text>
     </View>
   );
 }
@@ -212,12 +209,14 @@ export function PlatformCard() {
 
 Contributions are welcome! Please read our [Contributing Guide](https://mgcrea.github.io/react-native-tailwind/advanced/contributing/) for details.
 
+## Credits
+
+- [Tailwind CSS](https://tailwindcss.com/) - The utility-first CSS framework that revolutionized the way we style applications. If you enjoy this library, consider supporting them by purchasing [Tailwind Plus](https://tailwindcss.com/plus).
+
 ## Authors
 
 - [Olivier Louvignes](https://github.com/mgcrea) - [@mgcrea](https://twitter.com/mgcrea)
 
-## License
-
 ```text
 MIT License
 

package/dist/babel/index.cjs

@@ -212,6 +212,10 @@ function createInitialState(options, filename, colorSchemeImportSource, colorSch
     needsWindowDimensionsImport: false,
     windowDimensionsVariableName: "_twDimensions",
     windowDimensionsLocalIdentifier: void 0,
+    hasI18nManagerImport: false,
+    needsI18nManagerImport: false,
+    i18nManagerVariableName: "_twIsRTL",
+    i18nManagerLocalIdentifier: void 0,
     customTheme,
     schemeModifierConfig,
     supportedAttributes: exactMatches,
@@ -715,7 +719,9 @@ var BORDER_WIDTH_PROP_MAP = {
   t: "borderTopWidth",
   r: "borderRightWidth",
   b: "borderBottomWidth",
-  l: "borderLeftWidth"
+  l: "borderLeftWidth",
+  s: "borderStartWidth",
+  e: "borderEndWidth"
 };
 var BORDER_RADIUS_CORNER_MAP = {
   tl: "borderTopLeftRadius",
@@ -723,11 +729,19 @@ var BORDER_RADIUS_CORNER_MAP = {
   bl: "borderBottomLeftRadius",
   br: "borderBottomRightRadius"
 };
+var BORDER_RADIUS_LOGICAL_CORNER_MAP = {
+  ss: "borderTopStartRadius",
+  se: "borderTopEndRadius",
+  es: "borderBottomStartRadius",
+  ee: "borderBottomEndRadius"
+};
 var BORDER_RADIUS_SIDE_MAP = {
   t: ["borderTopLeftRadius", "borderTopRightRadius"],
   r: ["borderTopRightRadius", "borderBottomRightRadius"],
   b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
-  l: ["borderTopLeftRadius", "borderBottomLeftRadius"]
+  l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+  s: ["borderTopStartRadius", "borderBottomStartRadius"],
+  e: ["borderTopEndRadius", "borderBottomEndRadius"]
 };
 function parseArbitraryBorderWidth(value) {
   const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
@@ -775,11 +789,11 @@ function parseBorder(cls, customColors) {
   return null;
 }
 function parseBorderWidth(cls, customColors) {
-  const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
+  const dirMatch = cls.match(/^border-([trblse])(?:-(.+))?$/);
   if (dirMatch) {
     const dir = dirMatch[1];
     const valueStr = dirMatch[2] || "";
-    if (valueStr) {
+    if (valueStr && dir !== "s" && dir !== "e") {
       const colorResult = parseColor(cls, customColors);
       if (colorResult !== null) {
         return null;
@@ -843,7 +857,24 @@ function parseBorderRadius(cls) {
     }
     return null;
   }
-  const sideMatch = rest.match(/^([trbl])(?:-(.+))?$/);
+  const logicalCornerMatch = rest.match(/^(ss|se|es|ee)(?:-(.+))?$/);
+  if (logicalCornerMatch) {
+    const corner = logicalCornerMatch[1];
+    const valueStr = logicalCornerMatch[2] || "";
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
+      if (arbitraryValue !== null) {
+        return { [BORDER_RADIUS_LOGICAL_CORNER_MAP[corner]]: arbitraryValue };
+      }
+      return null;
+    }
+    const scaleValue2 = BORDER_RADIUS_SCALE[valueStr];
+    if (scaleValue2 !== void 0) {
+      return { [BORDER_RADIUS_LOGICAL_CORNER_MAP[corner]]: scaleValue2 };
+    }
+    return null;
+  }
+  const sideMatch = rest.match(/^([trblse])(?:-(.+))?$/);
   if (sideMatch) {
     const side = sideMatch[1];
     const valueStr = sideMatch[2] || "";
@@ -1120,6 +1151,52 @@ function parseLayout(cls) {
       return { left: leftValue };
     }
   }
+  const startMatch = cls.match(/^(-?)start-(.+)$/);
+  if (startMatch) {
+    const [, negPrefix, startKey] = startMatch;
+    const isNegative = negPrefix === "-";
+    if (startKey === "auto") {
+      return {};
+    }
+    const arbitraryStart = parseArbitraryInset(startKey);
+    if (arbitraryStart !== null) {
+      if (typeof arbitraryStart === "number") {
+        return { start: isNegative ? -arbitraryStart : arbitraryStart };
+      }
+      if (isNegative && arbitraryStart.endsWith("%")) {
+        const numValue = parseFloat(arbitraryStart);
+        return { start: `${-numValue}%` };
+      }
+      return { start: arbitraryStart };
+    }
+    const startValue = INSET_SCALE[startKey];
+    if (startValue !== void 0) {
+      return { start: isNegative ? -startValue : startValue };
+    }
+  }
+  const endMatch = cls.match(/^(-?)end-(.+)$/);
+  if (endMatch) {
+    const [, negPrefix, endKey] = endMatch;
+    const isNegative = negPrefix === "-";
+    if (endKey === "auto") {
+      return {};
+    }
+    const arbitraryEnd = parseArbitraryInset(endKey);
+    if (arbitraryEnd !== null) {
+      if (typeof arbitraryEnd === "number") {
+        return { end: isNegative ? -arbitraryEnd : arbitraryEnd };
+      }
+      if (isNegative && arbitraryEnd.endsWith("%")) {
+        const numValue = parseFloat(arbitraryEnd);
+        return { end: `${-numValue}%` };
+      }
+      return { end: arbitraryEnd };
+    }
+    const endValue = INSET_SCALE[endKey];
+    if (endValue !== void 0) {
+      return { end: isNegative ? -endValue : endValue };
+    }
+  }
   if (cls.startsWith("inset-x-")) {
     const insetKey = cls.substring(8);
     const arbitraryInset = parseArbitraryInset(insetKey);
@@ -1142,6 +1219,28 @@ function parseLayout(cls) {
       return { top: insetValue, bottom: insetValue };
     }
   }
+  if (cls.startsWith("inset-s-")) {
+    const insetKey = cls.substring(8);
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { start: arbitraryInset };
+    }
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { start: insetValue };
+    }
+  }
+  if (cls.startsWith("inset-e-")) {
+    const insetKey = cls.substring(8);
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { end: arbitraryInset };
+    }
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { end: insetValue };
+    }
+  }
   if (cls.startsWith("inset-")) {
     const insetKey = cls.substring(6);
     const arbitraryInset = parseArbitraryInset(insetKey);
@@ -1467,7 +1566,7 @@ function parseArbitrarySpacing(value) {
   return null;
 }
 function parseSpacing(cls) {
-  const marginMatch = cls.match(/^(-?)m([xytrbls]?)-(.+)$/);
+  const marginMatch = cls.match(/^(-?)m([xytrblse]?)-(.+)$/);
   if (marginMatch) {
     const [, negativePrefix, dir, valueStr] = marginMatch;
     const isNegative = negativePrefix === "-";
@@ -1482,7 +1581,7 @@ function parseSpacing(cls) {
       return getMarginStyle(dir, finalValue);
     }
   }
-  const paddingMatch = cls.match(/^p([xytrbls]?)-(.+)$/);
+  const paddingMatch = cls.match(/^p([xytrblse]?)-(.+)$/);
   if (paddingMatch) {
     const [, dir, valueStr] = paddingMatch;
     const arbitraryValue = parseArbitrarySpacing(valueStr);
@@ -1524,6 +1623,10 @@ function getMarginStyle(dir, value) {
       return { marginBottom: value };
     case "l":
       return { marginLeft: value };
+    case "s":
+      return { marginStart: value };
+    case "e":
+      return { marginEnd: value };
     default:
       return {};
   }
@@ -1544,6 +1647,10 @@ function getPaddingStyle(dir, value) {
       return { paddingBottom: value };
     case "l":
       return { paddingLeft: value };
+    case "s":
+      return { paddingStart: value };
+    case "e":
+      return { paddingEnd: value };
     default:
       return {};
   }
@@ -2032,11 +2139,13 @@ var STATE_MODIFIERS = [
 var PLATFORM_MODIFIERS = ["ios", "android", "web"];
 var COLOR_SCHEME_MODIFIERS = ["dark", "light"];
 var SCHEME_MODIFIERS = ["scheme"];
+var DIRECTIONAL_MODIFIERS = ["rtl", "ltr"];
 var SUPPORTED_MODIFIERS = [
   ...STATE_MODIFIERS,
   ...PLATFORM_MODIFIERS,
   ...COLOR_SCHEME_MODIFIERS,
-  ...SCHEME_MODIFIERS
+  ...SCHEME_MODIFIERS,
+  ...DIRECTIONAL_MODIFIERS
 ];
 function parseModifier(cls) {
   const colonIndex = cls.indexOf(":");
@@ -2071,6 +2180,9 @@ function isColorSchemeModifier(modifier) {
 function isSchemeModifier(modifier) {
   return SCHEME_MODIFIERS.includes(modifier);
 }
+function isDirectionalModifier(modifier) {
+  return DIRECTIONAL_MODIFIERS.includes(modifier);
+}
 function isColorClass(className) {
   return className.startsWith("text-") || className.startsWith("bg-") || className.startsWith("border-");
 }
@@ -2115,11 +2227,24 @@ function expandSchemeModifier(schemeModifier, customColors, darkSuffix = "-dark"
     }
   ];
 }
+var DIRECTIONAL_TEXT_ALIGN_EXPANSIONS = {
+  "text-start": { ltr: "text-left", rtl: "text-right" },
+  "text-end": { ltr: "text-right", rtl: "text-left" }
+};
+function getDirectionalExpansion(cls) {
+  return DIRECTIONAL_TEXT_ALIGN_EXPANSIONS[cls];
+}
 function splitModifierClasses(className) {
   const classes = className.trim().split(/\s+/).filter(Boolean);
   const baseClasses = [];
   const modifierClasses = [];
   for (const cls of classes) {
+    const directionalExpansion = getDirectionalExpansion(cls);
+    if (directionalExpansion) {
+      modifierClasses.push({ modifier: "ltr", baseClass: directionalExpansion.ltr });
+      modifierClasses.push({ modifier: "rtl", baseClass: directionalExpansion.rtl });
+      continue;
+    }
     const parsed = parseModifier(cls);
     if (parsed) {
       modifierClasses.push(parsed);
@@ -2298,6 +2423,40 @@ function getStatePropertyForModifier(modifier) {
   }
 }
 
+// src/babel/utils/directionalModifierProcessing.ts
+function processDirectionalModifiers(directionalModifiers, state, parseClassName2, generateStyleKey2, t) {
+  state.needsI18nManagerImport = true;
+  const modifiersByDirection = /* @__PURE__ */ new Map();
+  for (const mod of directionalModifiers) {
+    const direction = mod.modifier;
+    if (!modifiersByDirection.has(direction)) {
+      modifiersByDirection.set(direction, []);
+    }
+    const directionGroup = modifiersByDirection.get(direction);
+    if (directionGroup) {
+      directionGroup.push(mod);
+    }
+  }
+  const conditionalExpressions = [];
+  for (const [direction, modifiers] of modifiersByDirection) {
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName2(classNames, state.customTheme);
+    if (hasRuntimeDimensions(styleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with directional modifiers (rtl:, ltr:). Found in: "${direction}:${classNames}". Use w-screen/h-screen without modifiers instead.`
+      );
+    }
+    const styleKey = generateStyleKey2(`${direction}_${classNames}`);
+    state.styleRegistry.set(styleKey, styleObject);
+    const rtlVariable = t.identifier(state.i18nManagerVariableName);
+    const directionCheck = direction === "rtl" ? rtlVariable : t.unaryExpression("!", rtlVariable);
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    const conditionalExpression = t.logicalExpression("&&", directionCheck, styleReference);
+    conditionalExpressions.push(conditionalExpression);
+  }
+  return conditionalExpressions;
+}
+
 // src/babel/utils/dynamicProcessing.ts
 function processDynamicExpression(expression, state, parseClassName2, generateStyleKey2, splitModifierClasses2, processPlatformModifiers2, processColorSchemeModifiers2, componentScope, isPlatformModifier2, isColorSchemeModifier2, isSchemeModifier2, expandSchemeModifier2, t) {
   if (t.isTemplateLiteral(expression)) {
@@ -2901,6 +3060,7 @@ function jsxAttributeVisitor(path2, state, t) {
     const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
     const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
     const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+    const directionalModifiers = modifierClasses.filter((m) => isDirectionalModifier(m.modifier));
     const stateModifiers = modifierClasses.filter(
       (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder"
     );
@@ -2923,6 +3083,7 @@ function jsxAttributeVisitor(path2, state, t) {
     }
     const hasPlatformModifiers = platformModifiers.length > 0;
     const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+    const hasDirectionalModifiers = directionalModifiers.length > 0;
     const hasStateModifiers = stateModifiers.length > 0;
     const hasBaseClasses = baseClasses.length > 0;
     let componentScope = null;
@@ -2938,7 +3099,7 @@ function jsxAttributeVisitor(path2, state, t) {
         }
       }
     }
-    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
+    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers || hasDirectionalModifiers)) {
       const jsxOpeningElement = path2.parent;
       const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
       if (componentSupport) {
@@ -2948,7 +3109,7 @@ function jsxAttributeVisitor(path2, state, t) {
           const baseStyleObject = parseClassName(baseClassName, state.customTheme);
           if (hasRuntimeDimensions(baseStyleObject)) {
             throw path2.buildCodeFrameError(
-              `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with state, platform, or color scheme modifiers. Use w-screen/h-screen without modifiers instead.`
+              `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with state, platform, color scheme, or directional modifiers. Use w-screen/h-screen without modifiers instead.`
             );
           }
           const baseStyleKey = generateStyleKey(baseClassName);
@@ -2977,6 +3138,16 @@ function jsxAttributeVisitor(path2, state, t) {
           );
           styleArrayElements.push(...colorSchemeConditionals);
         }
+        if (hasDirectionalModifiers) {
+          const directionalConditionals = processDirectionalModifiers(
+            directionalModifiers,
+            state,
+            parseClassName,
+            generateStyleKey,
+            t
+          );
+          styleArrayElements.push(...directionalConditionals);
+        }
         const modifiersByType = /* @__PURE__ */ new Map();
         for (const mod of stateModifiers) {
           const modType = mod.modifier;
@@ -3016,14 +3187,14 @@ function jsxAttributeVisitor(path2, state, t) {
       } else {
       }
     }
-    if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
+    if ((hasPlatformModifiers || hasColorSchemeModifiers || hasDirectionalModifiers) && !hasStateModifiers) {
       const styleExpressions = [];
       if (hasBaseClasses) {
         const baseClassName = baseClasses.join(" ");
         const baseStyleObject = parseClassName(baseClassName, state.customTheme);
         if (hasRuntimeDimensions(baseStyleObject)) {
           throw path2.buildCodeFrameError(
-            `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with platform or color scheme modifiers. Use w-screen/h-screen without modifiers instead.`
+            `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with platform, color scheme, or directional modifiers. Use w-screen/h-screen without modifiers instead.`
           );
         }
         const baseStyleKey = generateStyleKey(baseClassName);
@@ -3052,6 +3223,16 @@ function jsxAttributeVisitor(path2, state, t) {
         );
         styleExpressions.push(...colorSchemeConditionals);
       }
+      if (hasDirectionalModifiers) {
+        const directionalConditionals = processDirectionalModifiers(
+          directionalModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t
+        );
+        styleExpressions.push(...directionalConditionals);
+      }
       const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
       const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
       if (styleAttribute2) {
@@ -3277,6 +3458,17 @@ function importDeclarationVisitor(path2, state, t) {
       }
       return false;
     });
+    if (node.importKind !== "type") {
+      for (const spec of specifiers) {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          if (spec.imported.name === "I18nManager") {
+            state.hasI18nManagerImport = true;
+            state.i18nManagerLocalIdentifier = spec.local.name;
+            break;
+          }
+        }
+      }
+    }
     if (node.importKind !== "type") {
       for (const spec of specifiers) {
         if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
@@ -3447,6 +3639,71 @@ function injectColorSchemeHook(functionPath, colorSchemeVariableName, hookName,
   body.body.unshift(hookCall);
   return true;
 }
+function addI18nManagerImport(path2, t) {
+  const body = path2.node.body;
+  let existingValueImport = null;
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      if (statement.importKind === "type") {
+        continue;
+      }
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break;
+    }
+  }
+  if (existingValueImport) {
+    const hasI18nManager = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "I18nManager"
+    );
+    if (!hasI18nManager) {
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("I18nManager"), t.identifier("I18nManager"))
+      );
+    }
+  } else {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("I18nManager"), t.identifier("I18nManager"))],
+      t.stringLiteral("react-native")
+    );
+    path2.unshiftContainer("body", importDeclaration);
+  }
+}
+function injectI18nManagerVariable(path2, variableName, localIdentifier, t) {
+  const body = path2.node.body;
+  for (const statement of body) {
+    if (t.isVariableDeclaration(statement) && statement.declarations.length > 0 && t.isVariableDeclarator(statement.declarations[0])) {
+      const declarator = statement.declarations[0];
+      if (t.isIdentifier(declarator.id) && declarator.id.name === variableName) {
+        return;
+      }
+    }
+  }
+  const identifierToUse = localIdentifier ?? "I18nManager";
+  const i18nVariable = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(variableName),
+      t.memberExpression(t.identifier(identifierToUse), t.identifier("isRTL"))
+    )
+  ]);
+  let insertIndex = 0;
+  for (let i = 0; i < body.length; i++) {
+    const statement = body[i];
+    if (t.isExpressionStatement(statement) && t.isStringLiteral(statement.expression)) {
+      insertIndex = i + 1;
+      continue;
+    }
+    if (t.isImportDeclaration(statement)) {
+      insertIndex = i + 1;
+      continue;
+    }
+    break;
+  }
+  body.splice(insertIndex, 0, i18nVariable);
+}
 function addWindowDimensionsImport(path2, t) {
   const body = path2.node.body;
   let existingValueImport = null;
@@ -3534,11 +3791,16 @@ function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
   const body = path2.node.body;
   let insertIndex = 0;
   for (let i = 0; i < body.length; i++) {
-    if (t.isImportDeclaration(body[i])) {
+    const statement = body[i];
+    if (t.isExpressionStatement(statement) && t.isStringLiteral(statement.expression)) {
       insertIndex = i + 1;
-    } else {
-      break;
+      continue;
+    }
+    if (t.isImportDeclaration(statement)) {
+      insertIndex = i + 1;
+      continue;
     }
+    break;
   }
   body.splice(insertIndex, 0, styleSheet);
 }
@@ -3582,8 +3844,9 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   }
   const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
   const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+  const directionalModifiers = modifierClasses.filter((m) => isDirectionalModifier(m.modifier));
   const otherModifiers = modifierClasses.filter(
-    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier)
+    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier) && !isDirectionalModifier(m.modifier)
   );
   const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
   let componentScope = null;
@@ -3717,6 +3980,62 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
       );
     }
   }
+  const hasDirectionalModifiers = directionalModifiers.length > 0;
+  if (hasDirectionalModifiers) {
+    state.needsI18nManagerImport = true;
+    const directionalConditionals = processDirectionalModifiers(
+      directionalModifiers,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      t
+    );
+    const styleProperty = objectProperties.find(
+      (prop) => t.isIdentifier(prop.key) && prop.key.name === "style"
+    );
+    if (styleProperty && t.isArrayExpression(styleProperty.value)) {
+      styleProperty.value.elements.push(...directionalConditionals);
+    } else {
+      const styleArrayElements = [];
+      if (baseClasses.length > 0) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+        const baseStyleKey = generateStyleKey2(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleArrayElements.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+        );
+      }
+      styleArrayElements.push(...directionalConditionals);
+      objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    }
+    const rtlModifiers = directionalModifiers.filter((m) => m.modifier === "rtl");
+    const ltrModifiers = directionalModifiers.filter((m) => m.modifier === "ltr");
+    if (rtlModifiers.length > 0) {
+      const rtlClassNames = rtlModifiers.map((m) => m.baseClass).join(" ");
+      const rtlStyleObject = parseClassName2(rtlClassNames, state.customTheme);
+      const rtlStyleKey = generateStyleKey2(`rtl_${rtlClassNames}`);
+      state.styleRegistry.set(rtlStyleKey, rtlStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("rtlStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(rtlStyleKey))
+        )
+      );
+    }
+    if (ltrModifiers.length > 0) {
+      const ltrClassNames = ltrModifiers.map((m) => m.baseClass).join(" ");
+      const ltrStyleObject = parseClassName2(ltrClassNames, state.customTheme);
+      const ltrStyleKey = generateStyleKey2(`ltr_${ltrClassNames}`);
+      state.styleRegistry.set(ltrStyleKey, ltrStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("ltrStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(ltrStyleKey))
+        )
+      );
+    }
+  }
   const modifiersByType = /* @__PURE__ */ new Map();
   for (const mod of otherModifiers) {
     if (!modifiersByType.has(mod.modifier)) {
@@ -3773,7 +4092,7 @@ function programExit(path2, state, t) {
   if (state.hasTwImport) {
     removeTwImports(path2, t);
   }
-  if (!state.hasClassNames && !state.needsWindowDimensionsImport && !state.needsColorSchemeImport) {
+  if (!state.hasClassNames && !state.needsWindowDimensionsImport && !state.needsColorSchemeImport && !state.needsI18nManagerImport) {
     return;
   }
   if (!state.hasStyleSheetImport && state.styleRegistry.size > 0) {
@@ -3782,6 +4101,12 @@ function programExit(path2, state, t) {
   if (state.needsPlatformImport && !state.hasPlatformImport) {
     addPlatformImport(path2, t);
   }
+  if (state.needsI18nManagerImport && !state.hasI18nManagerImport) {
+    addI18nManagerImport(path2, t);
+  }
+  if (state.needsI18nManagerImport) {
+    injectI18nManagerVariable(path2, state.i18nManagerVariableName, state.i18nManagerLocalIdentifier, t);
+  }
   if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
     addColorSchemeImport(path2, state.colorSchemeImportSource, state.colorSchemeHookName, t);
   }

package/dist/babel/plugin/state.d.ts

@@ -94,6 +94,10 @@ export type PluginState = PluginPass & {
     needsWindowDimensionsImport: boolean;
     windowDimensionsVariableName: string;
     windowDimensionsLocalIdentifier?: string;
+    hasI18nManagerImport: boolean;
+    needsI18nManagerImport: boolean;
+    i18nManagerVariableName: string;
+    i18nManagerLocalIdentifier?: string;
     customTheme: CustomTheme;
     schemeModifierConfig: SchemeModifierConfig;
     supportedAttributes: Set<string>;