@mgcrea/react-native-tailwind 0.13.0 → 0.15.0

package/src/parser/sizing.test.ts

@@ -254,3 +254,59 @@ describe("parseSizing - comprehensive coverage", () => {
     expect(parseSizing("h-full")).toEqual({ height: "100%" });
   });
 });
+
+describe("parseSizing - custom spacing", () => {
+  const customSpacing = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 32,
+    xl: 64,
+    "4": 20, // Override default (16)
+  };
+
+  it("should support custom spacing values for width", () => {
+    expect(parseSizing("w-xs", customSpacing)).toEqual({ width: 4 });
+    expect(parseSizing("w-sm", customSpacing)).toEqual({ width: 8 });
+    expect(parseSizing("w-lg", customSpacing)).toEqual({ width: 32 });
+    expect(parseSizing("w-xl", customSpacing)).toEqual({ width: 64 });
+  });
+
+  it("should support custom spacing values for height", () => {
+    expect(parseSizing("h-xs", customSpacing)).toEqual({ height: 4 });
+    expect(parseSizing("h-md", customSpacing)).toEqual({ height: 16 });
+    expect(parseSizing("h-xl", customSpacing)).toEqual({ height: 64 });
+  });
+
+  it("should support custom spacing values for min/max dimensions", () => {
+    expect(parseSizing("min-w-sm", customSpacing)).toEqual({ minWidth: 8 });
+    expect(parseSizing("min-h-lg", customSpacing)).toEqual({ minHeight: 32 });
+    expect(parseSizing("max-w-xl", customSpacing)).toEqual({ maxWidth: 64 });
+    expect(parseSizing("max-h-md", customSpacing)).toEqual({ maxHeight: 16 });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    expect(parseSizing("w-4", customSpacing)).toEqual({ width: 20 }); // Custom 20, not default 16
+    expect(parseSizing("h-4", customSpacing)).toEqual({ height: 20 }); // Custom 20, not default 16
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseSizing("w-[24px]", customSpacing)).toEqual({ width: 24 }); // Arbitrary wins
+    expect(parseSizing("h-[50]", customSpacing)).toEqual({ height: 50 }); // Arbitrary wins
+  });
+
+  it("should fall back to preset scale for unknown custom keys", () => {
+    expect(parseSizing("w-8", customSpacing)).toEqual({ width: 32 }); // Not overridden, uses preset
+    expect(parseSizing("h-12", customSpacing)).toEqual({ height: 48 }); // Not overridden, uses preset
+  });
+
+  it("should preserve percentage values with custom spacing", () => {
+    expect(parseSizing("w-full", customSpacing)).toEqual({ width: "100%" });
+    expect(parseSizing("h-1/2", customSpacing)).toEqual({ height: "50%" });
+  });
+
+  it("should work without custom spacing (backward compatible)", () => {
+    expect(parseSizing("w-4")).toEqual({ width: 16 }); // Default behavior
+    expect(parseSizing("h-8")).toEqual({ height: 32 }); // Default behavior
+  });
+});

package/src/parser/sizing.ts

@@ -95,8 +95,13 @@ function parseArbitrarySize(value: string): number | string | null {
 
 /**
  * Parse sizing classes
+ * @param cls - The class name to parse
+ * @param customSpacing - Optional custom spacing values from tailwind.config (shared with spacing utilities)
  */
-export function parseSizing(cls: string): StyleObject | null {
+export function parseSizing(cls: string, customSpacing?: Record<string, number>): StyleObject | null {
+  // Merge custom spacing with defaults (custom takes precedence)
+  const sizeMap = customSpacing ? { ...SIZE_SCALE, ...customSpacing } : SIZE_SCALE;
+
   // Width
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
@@ -106,7 +111,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { width: `${RUNTIME_DIMENSIONS_MARKER}width}}` } as StyleObject;
     }
 
-    // Arbitrary values: w-[123px], w-[50%]
+    // Arbitrary values: w-[123px], w-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { width: arbitrarySize };
@@ -118,8 +123,8 @@ export function parseSizing(cls: string): StyleObject | null {
       return { width: percentage };
     }
 
-    // Numeric widths: w-4, w-8, etc.
-    const numericSize = SIZE_SCALE[sizeKey];
+    // Numeric widths: w-4, w-8, etc. (includes custom spacing)
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { width: numericSize };
     }
@@ -139,7 +144,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { height: `${RUNTIME_DIMENSIONS_MARKER}height}}` } as StyleObject;
     }
 
-    // Arbitrary values: h-[123px], h-[50%]
+    // Arbitrary values: h-[123px], h-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { height: arbitrarySize };
@@ -151,8 +156,8 @@ export function parseSizing(cls: string): StyleObject | null {
       return { height: percentage };
     }
 
-    // Numeric heights: h-4, h-8, etc.
-    const numericSize = SIZE_SCALE[sizeKey];
+    // Numeric heights: h-4, h-8, etc. (includes custom spacing)
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { height: numericSize };
     }
@@ -167,7 +172,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("min-w-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: min-w-[123px], min-w-[50%]
+    // Arbitrary values: min-w-[123px], min-w-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { minWidth: arbitrarySize };
@@ -178,7 +183,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { minWidth: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { minWidth: numericSize };
     }
@@ -188,7 +193,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("min-h-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: min-h-[123px], min-h-[50%]
+    // Arbitrary values: min-h-[123px], min-h-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { minHeight: arbitrarySize };
@@ -199,7 +204,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { minHeight: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { minHeight: numericSize };
     }
@@ -209,7 +214,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("max-w-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: max-w-[123px], max-w-[50%]
+    // Arbitrary values: max-w-[123px], max-w-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { maxWidth: arbitrarySize };
@@ -220,7 +225,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { maxWidth: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { maxWidth: numericSize };
     }
@@ -230,7 +235,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("max-h-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: max-h-[123px], max-h-[50%]
+    // Arbitrary values: max-h-[123px], max-h-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { maxHeight: arbitrarySize };
@@ -241,7 +246,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { maxHeight: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { maxHeight: numericSize };
     }

package/src/parser/spacing.test.ts

@@ -349,3 +349,126 @@ 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 });
+  });
+});
+
+describe("parseSpacing - custom spacing", () => {
+  const customSpacing = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 32,
+    xl: 64,
+    "4": 20, // Override default (16)
+  };
+
+  it("should support custom spacing values for margin", () => {
+    expect(parseSpacing("m-xs", customSpacing)).toEqual({ margin: 4 });
+    expect(parseSpacing("m-sm", customSpacing)).toEqual({ margin: 8 });
+    expect(parseSpacing("m-lg", customSpacing)).toEqual({ margin: 32 });
+    expect(parseSpacing("mx-xl", customSpacing)).toEqual({ marginHorizontal: 64 });
+    expect(parseSpacing("mt-md", customSpacing)).toEqual({ marginTop: 16 });
+  });
+
+  it("should support custom spacing values for padding", () => {
+    expect(parseSpacing("p-xs", customSpacing)).toEqual({ padding: 4 });
+    expect(parseSpacing("p-sm", customSpacing)).toEqual({ padding: 8 });
+    expect(parseSpacing("px-lg", customSpacing)).toEqual({ paddingHorizontal: 32 });
+    expect(parseSpacing("pt-xl", customSpacing)).toEqual({ paddingTop: 64 });
+  });
+
+  it("should support custom spacing values for gap", () => {
+    expect(parseSpacing("gap-xs", customSpacing)).toEqual({ gap: 4 });
+    expect(parseSpacing("gap-md", customSpacing)).toEqual({ gap: 16 });
+    expect(parseSpacing("gap-xl", customSpacing)).toEqual({ gap: 64 });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    expect(parseSpacing("m-4", customSpacing)).toEqual({ margin: 20 }); // Custom 20, not default 16
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseSpacing("m-[24px]", customSpacing)).toEqual({ margin: 24 }); // Arbitrary wins
+    expect(parseSpacing("p-[50]", customSpacing)).toEqual({ padding: 50 }); // Arbitrary wins
+  });
+
+  it("should support negative margins with custom spacing", () => {
+    expect(parseSpacing("-m-xs", customSpacing)).toEqual({ margin: -4 });
+    expect(parseSpacing("-m-lg", customSpacing)).toEqual({ margin: -32 });
+    expect(parseSpacing("-mx-xl", customSpacing)).toEqual({ marginHorizontal: -64 });
+  });
+
+  it("should fall back to preset scale for unknown custom keys", () => {
+    expect(parseSpacing("m-8", customSpacing)).toEqual({ margin: 32 }); // Not overridden, uses preset
+    expect(parseSpacing("p-12", customSpacing)).toEqual({ padding: 48 }); // Not overridden, uses preset
+  });
+
+  it("should work without custom spacing (backward compatible)", () => {
+    expect(parseSpacing("m-4")).toEqual({ margin: 16 }); // Default behavior
+    expect(parseSpacing("p-8")).toEqual({ padding: 32 }); // Default behavior
+  });
+});

package/src/parser/spacing.ts

@@ -69,44 +69,51 @@ 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
+ * @param cls - The class name to parse
+ * @param customSpacing - Optional custom spacing values from tailwind.config
  */
-export function parseSpacing(cls: string): StyleObject | null {
-  // Margin: m-4, mx-2, mt-8, m-[16px], -m-4, -mt-2, etc.
+export function parseSpacing(cls: string, customSpacing?: Record<string, number>): StyleObject | null {
+  // Merge custom spacing with defaults (custom takes precedence)
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
+
+  // 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 === "-";
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
       const finalValue = isNegative ? -arbitraryValue : arbitraryValue;
       return getMarginStyle(dir, finalValue);
     }
 
-    // Try preset scale
-    const scaleValue = SPACING_SCALE[valueStr];
+    // Try spacing scale (includes custom spacing)
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== undefined) {
       const finalValue = isNegative ? -scaleValue : scaleValue;
       return getMarginStyle(dir, finalValue);
     }
   }
 
-  // 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;
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
       return getPaddingStyle(dir, arbitraryValue);
     }
 
-    // Try preset scale
-    const scaleValue = SPACING_SCALE[valueStr];
+    // Try spacing scale (includes custom spacing)
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== undefined) {
       return getPaddingStyle(dir, scaleValue);
     }
@@ -117,14 +124,14 @@ export function parseSpacing(cls: string): StyleObject | null {
   if (gapMatch) {
     const valueStr = gapMatch[1];
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
       return { gap: arbitraryValue };
     }
 
-    // Try preset scale
-    const scaleValue = SPACING_SCALE[valueStr];
+    // Try spacing scale (includes custom spacing)
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== undefined) {
       return { gap: scaleValue };
     }
@@ -152,6 +159,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 +187,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/transforms.test.ts

@@ -316,3 +316,60 @@ describe("parseTransform - case sensitivity", () => {
     expect(parseTransform("ROTATE-45")).toBeNull();
   });
 });
+
+describe("parseTransform - custom spacing", () => {
+  const customSpacing = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 32,
+    xl: 64,
+    "4": 20, // Override default (16)
+  };
+
+  it("should support custom spacing values for translateX", () => {
+    expect(parseTransform("translate-x-xs", customSpacing)).toEqual({ transform: [{ translateX: 4 }] });
+    expect(parseTransform("translate-x-sm", customSpacing)).toEqual({ transform: [{ translateX: 8 }] });
+    expect(parseTransform("translate-x-lg", customSpacing)).toEqual({ transform: [{ translateX: 32 }] });
+    expect(parseTransform("translate-x-xl", customSpacing)).toEqual({ transform: [{ translateX: 64 }] });
+  });
+
+  it("should support custom spacing values for translateY", () => {
+    expect(parseTransform("translate-y-xs", customSpacing)).toEqual({ transform: [{ translateY: 4 }] });
+    expect(parseTransform("translate-y-md", customSpacing)).toEqual({ transform: [{ translateY: 16 }] });
+    expect(parseTransform("translate-y-xl", customSpacing)).toEqual({ transform: [{ translateY: 64 }] });
+  });
+
+  it("should support negative custom spacing for translate", () => {
+    expect(parseTransform("-translate-x-sm", customSpacing)).toEqual({ transform: [{ translateX: -8 }] });
+    expect(parseTransform("-translate-y-lg", customSpacing)).toEqual({ transform: [{ translateY: -32 }] });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    expect(parseTransform("translate-x-4", customSpacing)).toEqual({ transform: [{ translateX: 20 }] }); // Custom 20, not default 16
+    expect(parseTransform("translate-y-4", customSpacing)).toEqual({ transform: [{ translateY: 20 }] }); // Custom 20, not default 16
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseTransform("translate-x-[24px]", customSpacing)).toEqual({ transform: [{ translateX: 24 }] }); // Arbitrary wins
+    expect(parseTransform("translate-y-[50]", customSpacing)).toEqual({ transform: [{ translateY: 50 }] }); // Arbitrary wins
+  });
+
+  it("should fall back to preset scale for unknown custom keys", () => {
+    expect(parseTransform("translate-x-8", customSpacing)).toEqual({ transform: [{ translateX: 32 }] }); // Not overridden, uses preset
+    expect(parseTransform("translate-y-12", customSpacing)).toEqual({ transform: [{ translateY: 48 }] }); // Not overridden, uses preset
+  });
+
+  it("should work without custom spacing (backward compatible)", () => {
+    expect(parseTransform("translate-x-4")).toEqual({ transform: [{ translateX: 16 }] }); // Default behavior
+    expect(parseTransform("translate-y-8")).toEqual({ transform: [{ translateY: 32 }] }); // Default behavior
+  });
+
+  it("should not affect non-translate transforms", () => {
+    // Scale, rotate, skew, perspective should not use custom spacing
+    expect(parseTransform("scale-110", customSpacing)).toEqual({ transform: [{ scale: 1.1 }] });
+    expect(parseTransform("rotate-45", customSpacing)).toEqual({ transform: [{ rotate: "45deg" }] });
+    expect(parseTransform("skew-x-6", customSpacing)).toEqual({ transform: [{ skewX: "6deg" }] });
+    expect(parseTransform("perspective-500", customSpacing)).toEqual({ transform: [{ perspective: 500 }] });
+  });
+});

package/src/parser/transforms.ts

@@ -164,8 +164,12 @@ function parseArbitraryPerspective(value: string): number | null {
 /**
  * Parse transform classes
  * Each transform class returns a transform array with a single transform object
+ * @param cls - The class name to parse
+ * @param customSpacing - Optional custom spacing values from tailwind.config (for translate utilities)
  */
-export function parseTransform(cls: string): StyleObject | null {
+export function parseTransform(cls: string, customSpacing?: Record<string, number>): StyleObject | null {
+  // Merge custom spacing with defaults for translate utilities
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
   // Transform origin warning (not supported in React Native)
   if (cls.startsWith("origin-")) {
     /* v8 ignore next 5 */
@@ -320,7 +324,7 @@ export function parseTransform(cls: string): StyleObject | null {
       return { transform: [{ translateX: value }] };
     }
 
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== undefined) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateX: value }] };
@@ -346,7 +350,7 @@ export function parseTransform(cls: string): StyleObject | null {
       return { transform: [{ translateY: value }] };
     }
 
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== undefined) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateY: value }] };

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