@mgcrea/react-native-tailwind 0.13.0 → 0.14.0

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" },