@mgcrea/react-native-tailwind 0.12.1 → 0.14.0

package/src/parser/modifiers.test.ts

@@ -4,7 +4,11 @@ import {
   expandSchemeModifier,
   hasModifier,
   isColorClass,
+  isColorSchemeModifier,
+  isDirectionalModifier,
+  isPlatformModifier,
   isSchemeModifier,
+  isStateModifier,
   parseModifier,
   splitModifierClasses,
 } from "./modifiers";
@@ -523,3 +527,205 @@ describe("expandSchemeModifier", () => {
     expect(result).toEqual([]);
   });
 });
+
+describe("parseModifier - directional modifiers (rtl/ltr)", () => {
+  it("should parse rtl modifier", () => {
+    const result = parseModifier("rtl:text-right");
+    expect(result).toEqual({
+      modifier: "rtl",
+      baseClass: "text-right",
+    });
+  });
+
+  it("should parse ltr modifier", () => {
+    const result = parseModifier("ltr:text-left");
+    expect(result).toEqual({
+      modifier: "ltr",
+      baseClass: "text-left",
+    });
+  });
+
+  it("should parse directional modifiers with various base classes", () => {
+    expect(parseModifier("rtl:ms-4")).toEqual({
+      modifier: "rtl",
+      baseClass: "ms-4",
+    });
+    expect(parseModifier("ltr:me-4")).toEqual({
+      modifier: "ltr",
+      baseClass: "me-4",
+    });
+    expect(parseModifier("rtl:flex-row-reverse")).toEqual({
+      modifier: "rtl",
+      baseClass: "flex-row-reverse",
+    });
+  });
+});
+
+describe("modifier type check functions", () => {
+  it("should identify state modifiers", () => {
+    expect(isStateModifier("active")).toBe(true);
+    expect(isStateModifier("hover")).toBe(true);
+    expect(isStateModifier("focus")).toBe(true);
+    expect(isStateModifier("disabled")).toBe(true);
+    expect(isStateModifier("placeholder")).toBe(true);
+    expect(isStateModifier("ios")).toBe(false);
+    expect(isStateModifier("dark")).toBe(false);
+    expect(isStateModifier("rtl")).toBe(false);
+  });
+
+  it("should identify platform modifiers", () => {
+    expect(isPlatformModifier("ios")).toBe(true);
+    expect(isPlatformModifier("android")).toBe(true);
+    expect(isPlatformModifier("web")).toBe(true);
+    expect(isPlatformModifier("active")).toBe(false);
+    expect(isPlatformModifier("dark")).toBe(false);
+    expect(isPlatformModifier("rtl")).toBe(false);
+  });
+
+  it("should identify color scheme modifiers", () => {
+    expect(isColorSchemeModifier("dark")).toBe(true);
+    expect(isColorSchemeModifier("light")).toBe(true);
+    expect(isColorSchemeModifier("active")).toBe(false);
+    expect(isColorSchemeModifier("ios")).toBe(false);
+    expect(isColorSchemeModifier("rtl")).toBe(false);
+  });
+
+  it("should identify directional modifiers", () => {
+    expect(isDirectionalModifier("rtl")).toBe(true);
+    expect(isDirectionalModifier("ltr")).toBe(true);
+    expect(isDirectionalModifier("active")).toBe(false);
+    expect(isDirectionalModifier("ios")).toBe(false);
+    expect(isDirectionalModifier("dark")).toBe(false);
+  });
+
+  it("should identify scheme modifier", () => {
+    expect(isSchemeModifier("scheme")).toBe(true);
+    expect(isSchemeModifier("active")).toBe(false);
+    expect(isSchemeModifier("dark")).toBe(false);
+    expect(isSchemeModifier("rtl")).toBe(false);
+  });
+});
+
+describe("splitModifierClasses - directional modifiers", () => {
+  it("should split directional modifier classes", () => {
+    const result = splitModifierClasses("bg-white rtl:bg-gray-100 ltr:bg-gray-50");
+    expect(result.baseClasses).toEqual(["bg-white"]);
+    expect(result.modifierClasses).toHaveLength(2);
+    expect(result.modifierClasses[0]).toEqual({
+      modifier: "rtl",
+      baseClass: "bg-gray-100",
+    });
+    expect(result.modifierClasses[1]).toEqual({
+      modifier: "ltr",
+      baseClass: "bg-gray-50",
+    });
+  });
+
+  it("should handle mixed modifiers including directional", () => {
+    const result = splitModifierClasses("p-4 rtl:ps-6 ios:p-8 dark:bg-gray-900");
+    expect(result.baseClasses).toEqual(["p-4"]);
+    expect(result.modifierClasses).toHaveLength(3);
+    expect(result.modifierClasses.map((m) => m.modifier)).toContain("rtl");
+    expect(result.modifierClasses.map((m) => m.modifier)).toContain("ios");
+    expect(result.modifierClasses.map((m) => m.modifier)).toContain("dark");
+  });
+});
+
+describe("splitModifierClasses - text-start/text-end expansion", () => {
+  it("should expand text-start to ltr:text-left rtl:text-right", () => {
+    const result = splitModifierClasses("text-start");
+    expect(result.baseClasses).toEqual([]);
+    expect(result.modifierClasses).toHaveLength(2);
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "ltr",
+      baseClass: "text-left",
+    });
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "rtl",
+      baseClass: "text-right",
+    });
+  });
+
+  it("should expand text-end to ltr:text-right rtl:text-left", () => {
+    const result = splitModifierClasses("text-end");
+    expect(result.baseClasses).toEqual([]);
+    expect(result.modifierClasses).toHaveLength(2);
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "ltr",
+      baseClass: "text-right",
+    });
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "rtl",
+      baseClass: "text-left",
+    });
+  });
+
+  it("should handle text-start with other classes", () => {
+    const result = splitModifierClasses("p-4 text-start bg-white");
+    expect(result.baseClasses).toEqual(["p-4", "bg-white"]);
+    expect(result.modifierClasses).toHaveLength(2);
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "ltr",
+      baseClass: "text-left",
+    });
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "rtl",
+      baseClass: "text-right",
+    });
+  });
+
+  it("should handle both text-start and text-end in same className", () => {
+    // This is unusual but should work
+    const result = splitModifierClasses("text-start text-end");
+    expect(result.baseClasses).toEqual([]);
+    expect(result.modifierClasses).toHaveLength(4);
+    // text-start expands
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "ltr",
+      baseClass: "text-left",
+    });
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "rtl",
+      baseClass: "text-right",
+    });
+    // text-end expands
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "ltr",
+      baseClass: "text-right",
+    });
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "rtl",
+      baseClass: "text-left",
+    });
+  });
+
+  it("should not affect text-left and text-right (no expansion)", () => {
+    const result = splitModifierClasses("text-left text-right text-center");
+    expect(result.baseClasses).toEqual(["text-left", "text-right", "text-center"]);
+    expect(result.modifierClasses).toEqual([]);
+  });
+
+  it("should handle text-start/text-end with other modifiers", () => {
+    const result = splitModifierClasses("text-start active:bg-blue-500 rtl:pr-4");
+    expect(result.baseClasses).toEqual([]);
+    expect(result.modifierClasses).toHaveLength(4);
+    // text-start expansion
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "ltr",
+      baseClass: "text-left",
+    });
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "rtl",
+      baseClass: "text-right",
+    });
+    // explicit modifiers
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "active",
+      baseClass: "bg-blue-500",
+    });
+    expect(result.modifierClasses).toContainEqual({
+      modifier: "rtl",
+      baseClass: "pr-4",
+    });
+  });
+});

package/src/parser/modifiers.ts

@@ -1,19 +1,22 @@
 /**
- * Modifier parsing utilities for state-based, platform-specific, and color scheme class names
+ * Modifier parsing utilities for state-based, platform-specific, color scheme, and directional class names
  * - State modifiers: active:, hover:, focus:, disabled:, placeholder:
  * - Platform modifiers: ios:, android:, web:
  * - Color scheme modifiers: dark:, light:
+ * - Directional modifiers: rtl:, ltr: (RTL-aware styling)
  */
 
 export type StateModifierType = "active" | "hover" | "focus" | "disabled" | "placeholder";
 export type PlatformModifierType = "ios" | "android" | "web";
 export type ColorSchemeModifierType = "dark" | "light";
 export type SchemeModifierType = "scheme";
+export type DirectionalModifierType = "rtl" | "ltr";
 export type ModifierType =
   | StateModifierType
   | PlatformModifierType
   | ColorSchemeModifierType
-  | SchemeModifierType;
+  | SchemeModifierType
+  | DirectionalModifierType;
 
 export type ParsedModifier = {
   modifier: ModifierType;
@@ -47,13 +50,19 @@ const COLOR_SCHEME_MODIFIERS: readonly ColorSchemeModifierType[] = ["dark", "lig
 const SCHEME_MODIFIERS: readonly SchemeModifierType[] = ["scheme"] as const;
 
 /**
- * All supported modifiers (state + platform + color scheme + scheme)
+ * Supported directional modifiers that map to I18nManager.isRTL values
+ */
+const DIRECTIONAL_MODIFIERS: readonly DirectionalModifierType[] = ["rtl", "ltr"] as const;
+
+/**
+ * All supported modifiers (state + platform + color scheme + scheme + directional)
  */
 const SUPPORTED_MODIFIERS: readonly ModifierType[] = [
   ...STATE_MODIFIERS,
   ...PLATFORM_MODIFIERS,
   ...COLOR_SCHEME_MODIFIERS,
   ...SCHEME_MODIFIERS,
+  ...DIRECTIONAL_MODIFIERS,
 ] as const;
 
 /**
@@ -149,6 +158,16 @@ export function isSchemeModifier(modifier: ModifierType): modifier is SchemeModi
   return SCHEME_MODIFIERS.includes(modifier as SchemeModifierType);
 }
 
+/**
+ * Check if a modifier is a directional modifier (rtl, ltr)
+ *
+ * @param modifier - Modifier type to check
+ * @returns true if modifier is a directional modifier
+ */
+export function isDirectionalModifier(modifier: ModifierType): modifier is DirectionalModifierType {
+  return DIRECTIONAL_MODIFIERS.includes(modifier as DirectionalModifierType);
+}
+
 /**
  * Check if a class name is a color-based utility class
  *
@@ -242,6 +261,26 @@ export function expandSchemeModifier(
   ];
 }
 
+/**
+ * Classes that expand to directional modifiers for true RTL support
+ * text-start -> ltr:text-left rtl:text-right (start = left in LTR, right in RTL)
+ * text-end -> ltr:text-right rtl:text-left (end = right in LTR, left in RTL)
+ */
+const DIRECTIONAL_TEXT_ALIGN_EXPANSIONS: Record<string, { ltr: string; rtl: string }> = {
+  "text-start": { ltr: "text-left", rtl: "text-right" },
+  "text-end": { ltr: "text-right", rtl: "text-left" },
+};
+
+/**
+ * Check if a class should be expanded to directional modifiers
+ *
+ * @param cls - Class name to check
+ * @returns Expansion object if class should expand, undefined otherwise
+ */
+export function getDirectionalExpansion(cls: string): { ltr: string; rtl: string } | undefined {
+  return DIRECTIONAL_TEXT_ALIGN_EXPANSIONS[cls];
+}
+
 /**
  * Split a space-separated className string into base and modifier classes
  *
@@ -257,6 +296,17 @@ export function expandSchemeModifier(
  * //     { modifier: "active", baseClass: "p-6" }
  * //   ]
  * // }
+ *
+ * @example
+ * // text-start/text-end auto-expand to directional modifiers for true RTL support
+ * splitModifierClasses("text-start p-4")
+ * // {
+ * //   baseClasses: ["p-4"],
+ * //   modifierClasses: [
+ * //     { modifier: "ltr", baseClass: "text-left" },
+ * //     { modifier: "rtl", baseClass: "text-right" }
+ * //   ]
+ * // }
  */
 export function splitModifierClasses(className: string): {
   baseClasses: string[];
@@ -267,6 +317,15 @@ export function splitModifierClasses(className: string): {
   const modifierClasses: ParsedModifier[] = [];
 
   for (const cls of classes) {
+    // Check for directional text alignment expansion (text-start, text-end)
+    const directionalExpansion = getDirectionalExpansion(cls);
+    if (directionalExpansion) {
+      // Expand to ltr: and rtl: modifiers for true RTL support
+      modifierClasses.push({ modifier: "ltr", baseClass: directionalExpansion.ltr });
+      modifierClasses.push({ modifier: "rtl", baseClass: directionalExpansion.rtl });
+      continue;
+    }
+
     const parsed = parseModifier(cls);
     if (parsed) {
       modifierClasses.push(parsed);

package/src/parser/sizing.ts

@@ -2,6 +2,7 @@
  * Sizing utilities (width, height, min/max)
  */
 
+import { RUNTIME_DIMENSIONS_MARKER } from "../config/markers";
 import type { StyleObject } from "../types";
 
 // Size scale (in pixels/percentages)
@@ -100,6 +101,11 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
 
+    // Screen width (requires runtime hook)
+    if (sizeKey === "screen") {
+      return { width: `${RUNTIME_DIMENSIONS_MARKER}width}}` } as StyleObject;
+    }
+
     // Arbitrary values: w-[123px], w-[50%]
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
@@ -128,6 +134,11 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("h-")) {
     const sizeKey = cls.substring(2);
 
+    // Screen height (requires runtime hook)
+    if (sizeKey === "screen") {
+      return { height: `${RUNTIME_DIMENSIONS_MARKER}height}}` } as StyleObject;
+    }
+
     // Arbitrary values: h-[123px], h-[50%]
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {

package/src/parser/spacing.test.ts

@@ -349,3 +349,69 @@ describe("parseSpacing - comprehensive coverage", () => {
     expect(parseSpacing("pl-[50px]")).toEqual({ paddingLeft: 50 });
   });
 });
+
+describe("parseSpacing - logical margin (RTL-aware)", () => {
+  it("should parse margin start", () => {
+    expect(parseSpacing("ms-0")).toEqual({ marginStart: 0 });
+    expect(parseSpacing("ms-4")).toEqual({ marginStart: 16 });
+    expect(parseSpacing("ms-8")).toEqual({ marginStart: 32 });
+  });
+
+  it("should parse margin end", () => {
+    expect(parseSpacing("me-0")).toEqual({ marginEnd: 0 });
+    expect(parseSpacing("me-4")).toEqual({ marginEnd: 16 });
+    expect(parseSpacing("me-8")).toEqual({ marginEnd: 32 });
+  });
+
+  it("should parse margin start/end with fractional values", () => {
+    expect(parseSpacing("ms-0.5")).toEqual({ marginStart: 2 });
+    expect(parseSpacing("me-1.5")).toEqual({ marginEnd: 6 });
+    expect(parseSpacing("ms-2.5")).toEqual({ marginStart: 10 });
+  });
+
+  it("should parse margin start/end with arbitrary values", () => {
+    expect(parseSpacing("ms-[16px]")).toEqual({ marginStart: 16 });
+    expect(parseSpacing("ms-[16]")).toEqual({ marginStart: 16 });
+    expect(parseSpacing("me-[24px]")).toEqual({ marginEnd: 24 });
+    expect(parseSpacing("me-[24]")).toEqual({ marginEnd: 24 });
+  });
+
+  it("should parse negative margin start/end", () => {
+    expect(parseSpacing("-ms-4")).toEqual({ marginStart: -16 });
+    expect(parseSpacing("-me-4")).toEqual({ marginEnd: -16 });
+    expect(parseSpacing("-ms-8")).toEqual({ marginStart: -32 });
+    expect(parseSpacing("-me-8")).toEqual({ marginEnd: -32 });
+  });
+
+  it("should parse negative margin start/end with arbitrary values", () => {
+    expect(parseSpacing("-ms-[16px]")).toEqual({ marginStart: -16 });
+    expect(parseSpacing("-me-[24]")).toEqual({ marginEnd: -24 });
+  });
+});
+
+describe("parseSpacing - logical padding (RTL-aware)", () => {
+  it("should parse padding start", () => {
+    expect(parseSpacing("ps-0")).toEqual({ paddingStart: 0 });
+    expect(parseSpacing("ps-4")).toEqual({ paddingStart: 16 });
+    expect(parseSpacing("ps-8")).toEqual({ paddingStart: 32 });
+  });
+
+  it("should parse padding end", () => {
+    expect(parseSpacing("pe-0")).toEqual({ paddingEnd: 0 });
+    expect(parseSpacing("pe-4")).toEqual({ paddingEnd: 16 });
+    expect(parseSpacing("pe-8")).toEqual({ paddingEnd: 32 });
+  });
+
+  it("should parse padding start/end with fractional values", () => {
+    expect(parseSpacing("ps-0.5")).toEqual({ paddingStart: 2 });
+    expect(parseSpacing("pe-1.5")).toEqual({ paddingEnd: 6 });
+    expect(parseSpacing("ps-2.5")).toEqual({ paddingStart: 10 });
+  });
+
+  it("should parse padding start/end with arbitrary values", () => {
+    expect(parseSpacing("ps-[16px]")).toEqual({ paddingStart: 16 });
+    expect(parseSpacing("ps-[16]")).toEqual({ paddingStart: 16 });
+    expect(parseSpacing("pe-[24px]")).toEqual({ paddingEnd: 24 });
+    expect(parseSpacing("pe-[24]")).toEqual({ paddingEnd: 24 });
+  });
+});

package/src/parser/spacing.ts

@@ -69,12 +69,13 @@ function parseArbitrarySpacing(value: string): number | null {
 
 /**
  * Parse spacing classes (margin, padding, gap)
- * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], pl-[4.5px], -m-4, -mt-[10px]
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], pl-[4.5px], -m-4, -mt-[10px], ms-4, pe-2
  */
 export function parseSpacing(cls: string): StyleObject | null {
-  // Margin: m-4, mx-2, mt-8, m-[16px], -m-4, -mt-2, etc.
+  // Margin: m-4, mx-2, mt-8, ms-4, me-2, m-[16px], -m-4, -mt-2, etc.
   // Supports negative values for margins (but not padding or gap)
-  const marginMatch = cls.match(/^(-?)m([xytrbls]?)-(.+)$/);
+  // s = start (RTL-aware), e = end (RTL-aware)
+  const marginMatch = cls.match(/^(-?)m([xytrblse]?)-(.+)$/);
   if (marginMatch) {
     const [, negativePrefix, dir, valueStr] = marginMatch;
     const isNegative = negativePrefix === "-";
@@ -94,8 +95,9 @@ export function parseSpacing(cls: string): StyleObject | null {
     }
   }
 
-  // Padding: p-4, px-2, pt-8, p-[16px], etc.
-  const paddingMatch = cls.match(/^p([xytrbls]?)-(.+)$/);
+  // Padding: p-4, px-2, pt-8, ps-4, pe-2, p-[16px], etc.
+  // s = start (RTL-aware), e = end (RTL-aware)
+  const paddingMatch = cls.match(/^p([xytrblse]?)-(.+)$/);
   if (paddingMatch) {
     const [, dir, valueStr] = paddingMatch;
 
@@ -152,6 +154,10 @@ function getMarginStyle(dir: string, value: number): StyleObject {
       return { marginBottom: value };
     case "l":
       return { marginLeft: value };
+    case "s":
+      return { marginStart: value };
+    case "e":
+      return { marginEnd: value };
     default:
       return {};
   }
@@ -176,6 +182,10 @@ function getPaddingStyle(dir: string, value: number): StyleObject {
       return { paddingBottom: value };
     case "l":
       return { paddingLeft: value };
+    case "s":
+      return { paddingStart: value };
+    case "e":
+      return { paddingEnd: value };
     default:
       return {};
   }

package/src/parser/typography.test.ts

@@ -91,6 +91,14 @@ describe("parseTypography - text alignment", () => {
     expect(parseTypography("text-right")).toEqual({ textAlign: "right" });
     expect(parseTypography("text-justify")).toEqual({ textAlign: "justify" });
   });
+
+  it("should not parse text-start/text-end (handled via directional modifier expansion)", () => {
+    // text-start/text-end are now handled by splitModifierClasses() in modifiers.ts
+    // They expand to ltr:text-left rtl:text-right and ltr:text-right rtl:text-left
+    // respectively for true RTL support
+    expect(parseTypography("text-start")).toBeNull();
+    expect(parseTypography("text-end")).toBeNull();
+  });
 });
 
 describe("parseTypography - text decoration", () => {

package/src/parser/typography.ts

@@ -58,6 +58,10 @@ const FONT_STYLE_MAP: Record<string, StyleObject> = {
 };
 
 // Text alignment utilities
+// Note: text-start and text-end are handled via automatic expansion to directional modifiers
+// in splitModifierClasses() for true RTL support:
+//   text-start -> ltr:text-left rtl:text-right
+//   text-end -> ltr:text-right rtl:text-left
 const TEXT_ALIGN_MAP: Record<string, StyleObject> = {
   "text-left": { textAlign: "left" },
   "text-center": { textAlign: "center" },