@mgcrea/react-native-tailwind 0.12.1 → 0.14.0

package/src/parser/colors.test.ts

@@ -391,3 +391,252 @@ describe("parseColor - opacity modifiers", () => {
     });
   });
 });
+
+describe("parseColor - directional border colors", () => {
+  it("should parse directional border colors with preset values", () => {
+    expect(parseColor("border-t-red-500")).toEqual({ borderTopColor: COLORS["red-500"] });
+    expect(parseColor("border-r-blue-500")).toEqual({ borderRightColor: COLORS["blue-500"] });
+    expect(parseColor("border-b-green-500")).toEqual({ borderBottomColor: COLORS["green-500"] });
+    expect(parseColor("border-l-yellow-500")).toEqual({ borderLeftColor: COLORS["yellow-500"] });
+  });
+
+  it("should parse directional border colors with basic values", () => {
+    expect(parseColor("border-t-white")).toEqual({ borderTopColor: "#FFFFFF" });
+    expect(parseColor("border-r-black")).toEqual({ borderRightColor: "#000000" });
+    expect(parseColor("border-b-transparent")).toEqual({ borderBottomColor: "transparent" });
+    expect(parseColor("border-l-white")).toEqual({ borderLeftColor: "#FFFFFF" });
+  });
+
+  it("should parse directional border colors with arbitrary 6-digit hex values", () => {
+    expect(parseColor("border-t-[#ff0000]")).toEqual({ borderTopColor: "#ff0000" });
+    expect(parseColor("border-r-[#3B82F6]")).toEqual({ borderRightColor: "#3B82F6" });
+    expect(parseColor("border-b-[#00ff00]")).toEqual({ borderBottomColor: "#00ff00" });
+    expect(parseColor("border-l-[#cccccc]")).toEqual({ borderLeftColor: "#cccccc" });
+  });
+
+  it("should parse directional border colors with arbitrary 3-digit hex values", () => {
+    expect(parseColor("border-t-[#f00]")).toEqual({ borderTopColor: "#ff0000" });
+    expect(parseColor("border-r-[#abc]")).toEqual({ borderRightColor: "#aabbcc" });
+    expect(parseColor("border-b-[#123]")).toEqual({ borderBottomColor: "#112233" });
+    expect(parseColor("border-l-[#999]")).toEqual({ borderLeftColor: "#999999" });
+  });
+
+  it("should parse directional border colors with arbitrary 8-digit hex values (with alpha)", () => {
+    expect(parseColor("border-t-[#ff0000aa]")).toEqual({ borderTopColor: "#ff0000aa" });
+    expect(parseColor("border-r-[#0000FF50]")).toEqual({ borderRightColor: "#0000FF50" });
+    expect(parseColor("border-b-[#00FF0080]")).toEqual({ borderBottomColor: "#00FF0080" });
+    expect(parseColor("border-l-[#FFFFFF00]")).toEqual({ borderLeftColor: "#FFFFFF00" });
+  });
+
+  it("should parse directional border colors with opacity modifiers", () => {
+    expect(parseColor("border-t-red-500/50")).toEqual({
+      borderTopColor: applyOpacity(COLORS["red-500"], 50),
+    });
+    expect(parseColor("border-r-blue-500/80")).toEqual({
+      borderRightColor: applyOpacity(COLORS["blue-500"], 80),
+    });
+    expect(parseColor("border-b-green-500/30")).toEqual({
+      borderBottomColor: applyOpacity(COLORS["green-500"], 30),
+    });
+    expect(parseColor("border-l-black/25")).toEqual({
+      borderLeftColor: applyOpacity(COLORS.black, 25),
+    });
+  });
+
+  it("should parse directional border colors with arbitrary hex and opacity", () => {
+    expect(parseColor("border-t-[#ff0000]/50")).toEqual({ borderTopColor: "#FF000080" });
+    expect(parseColor("border-r-[#3B82F6]/80")).toEqual({ borderRightColor: "#3B82F6CC" });
+    expect(parseColor("border-b-[#abc]/60")).toEqual({ borderBottomColor: "#AABBCC99" });
+    expect(parseColor("border-l-[#000]/100")).toEqual({ borderLeftColor: "#000000FF" });
+  });
+
+  it("should parse directional border colors with custom colors", () => {
+    const customColors = {
+      "brand-primary": "#FF6B6B",
+      "brand-secondary": "#4ECDC4",
+      accent: "#FFE66D",
+    };
+
+    expect(parseColor("border-t-brand-primary", customColors)).toEqual({
+      borderTopColor: "#FF6B6B",
+    });
+    expect(parseColor("border-r-brand-secondary", customColors)).toEqual({
+      borderRightColor: "#4ECDC4",
+    });
+    expect(parseColor("border-b-accent", customColors)).toEqual({ borderBottomColor: "#FFE66D" });
+    expect(parseColor("border-l-brand-primary", customColors)).toEqual({
+      borderLeftColor: "#FF6B6B",
+    });
+  });
+
+  it("should parse directional border colors with custom colors and opacity", () => {
+    const customColors = { "brand-primary": "#FF6B6B" };
+    expect(parseColor("border-t-brand-primary/50", customColors)).toEqual({
+      borderTopColor: "#FF6B6B80",
+    });
+    expect(parseColor("border-l-brand-primary/75", customColors)).toEqual({
+      borderLeftColor: "#FF6B6BBF",
+    });
+  });
+
+  it("should not match border width classes", () => {
+    // These should be handled by parseBorder
+    expect(parseColor("border-t-2")).toBeNull();
+    expect(parseColor("border-r-4")).toBeNull();
+    expect(parseColor("border-b-8")).toBeNull();
+    expect(parseColor("border-l-0")).toBeNull();
+  });
+
+  it("should not match border width arbitrary values", () => {
+    // These should be handled by parseBorder
+    expect(parseColor("border-t-[3px]")).toBeNull();
+    expect(parseColor("border-r-[8px]")).toBeNull();
+    expect(parseColor("border-b-[5]")).toBeNull();
+    expect(parseColor("border-l-[10px]")).toBeNull();
+  });
+
+  it("should return null for invalid directional border color values", () => {
+    expect(parseColor("border-t-invalid")).toBeNull();
+    expect(parseColor("border-r-notacolor")).toBeNull();
+    expect(parseColor("border-b-xyz")).toBeNull();
+    expect(parseColor("border-l-wrongcolor")).toBeNull();
+  });
+
+  it("should handle all directions with same color", () => {
+    const color = COLORS["blue-500"];
+    expect(parseColor("border-t-blue-500")).toEqual({ borderTopColor: color });
+    expect(parseColor("border-r-blue-500")).toEqual({ borderRightColor: color });
+    expect(parseColor("border-b-blue-500")).toEqual({ borderBottomColor: color });
+    expect(parseColor("border-l-blue-500")).toEqual({ borderLeftColor: color });
+  });
+
+  it("should handle all color families for directional borders", () => {
+    const families = ["gray", "red", "blue", "green", "yellow", "purple", "pink", "orange", "indigo"];
+    families.forEach((family) => {
+      expect(parseColor(`border-t-${family}-500`)).toBeTruthy();
+      expect(parseColor(`border-r-${family}-500`)).toBeTruthy();
+      expect(parseColor(`border-b-${family}-500`)).toBeTruthy();
+      expect(parseColor(`border-l-${family}-500`)).toBeTruthy();
+    });
+  });
+
+  it("should handle directional borders with all opacity levels", () => {
+    expect(parseColor("border-t-black/0")).toEqual({ borderTopColor: "#00000000" });
+    expect(parseColor("border-t-black/25")).toEqual({ borderTopColor: "#00000040" });
+    expect(parseColor("border-t-black/50")).toEqual({ borderTopColor: "#00000080" });
+    expect(parseColor("border-t-black/75")).toEqual({ borderTopColor: "#000000BF" });
+    expect(parseColor("border-t-black/100")).toEqual({ borderTopColor: "#000000FF" });
+  });
+});
+
+describe("parseColor - border-x and border-y colors", () => {
+  it("should parse border-x colors (horizontal: left + right)", () => {
+    expect(parseColor("border-x-red-500")).toEqual({
+      borderLeftColor: COLORS["red-500"],
+      borderRightColor: COLORS["red-500"],
+    });
+    expect(parseColor("border-x-blue-500")).toEqual({
+      borderLeftColor: COLORS["blue-500"],
+      borderRightColor: COLORS["blue-500"],
+    });
+  });
+
+  it("should parse border-y colors (vertical: top + bottom)", () => {
+    expect(parseColor("border-y-green-500")).toEqual({
+      borderTopColor: COLORS["green-500"],
+      borderBottomColor: COLORS["green-500"],
+    });
+    expect(parseColor("border-y-yellow-500")).toEqual({
+      borderTopColor: COLORS["yellow-500"],
+      borderBottomColor: COLORS["yellow-500"],
+    });
+  });
+
+  it("should parse border-x with basic colors", () => {
+    expect(parseColor("border-x-white")).toEqual({
+      borderLeftColor: "#FFFFFF",
+      borderRightColor: "#FFFFFF",
+    });
+    expect(parseColor("border-x-black")).toEqual({
+      borderLeftColor: "#000000",
+      borderRightColor: "#000000",
+    });
+  });
+
+  it("should parse border-y with basic colors", () => {
+    expect(parseColor("border-y-white")).toEqual({
+      borderTopColor: "#FFFFFF",
+      borderBottomColor: "#FFFFFF",
+    });
+    expect(parseColor("border-y-transparent")).toEqual({
+      borderTopColor: "transparent",
+      borderBottomColor: "transparent",
+    });
+  });
+
+  it("should parse border-x with opacity", () => {
+    expect(parseColor("border-x-red-500/50")).toEqual({
+      borderLeftColor: applyOpacity(COLORS["red-500"], 50),
+      borderRightColor: applyOpacity(COLORS["red-500"], 50),
+    });
+  });
+
+  it("should parse border-y with opacity", () => {
+    expect(parseColor("border-y-blue-500/80")).toEqual({
+      borderTopColor: applyOpacity(COLORS["blue-500"], 80),
+      borderBottomColor: applyOpacity(COLORS["blue-500"], 80),
+    });
+  });
+
+  it("should parse border-x with arbitrary hex colors", () => {
+    expect(parseColor("border-x-[#ff0000]")).toEqual({
+      borderLeftColor: "#ff0000",
+      borderRightColor: "#ff0000",
+    });
+    expect(parseColor("border-x-[#abc]")).toEqual({
+      borderLeftColor: "#aabbcc",
+      borderRightColor: "#aabbcc",
+    });
+  });
+
+  it("should parse border-y with arbitrary hex colors", () => {
+    expect(parseColor("border-y-[#00ff00]")).toEqual({
+      borderTopColor: "#00ff00",
+      borderBottomColor: "#00ff00",
+    });
+    expect(parseColor("border-y-[#123]")).toEqual({
+      borderTopColor: "#112233",
+      borderBottomColor: "#112233",
+    });
+  });
+
+  it("should parse border-x with custom colors", () => {
+    const customColors = { "brand-primary": "#FF6B6B" };
+    expect(parseColor("border-x-brand-primary", customColors)).toEqual({
+      borderLeftColor: "#FF6B6B",
+      borderRightColor: "#FF6B6B",
+    });
+  });
+
+  it("should parse border-y with custom colors", () => {
+    const customColors = { accent: "#FFE66D" };
+    expect(parseColor("border-y-accent", customColors)).toEqual({
+      borderTopColor: "#FFE66D",
+      borderBottomColor: "#FFE66D",
+    });
+  });
+
+  it("should not match border-x/border-y width classes", () => {
+    expect(parseColor("border-x-2")).toBeNull();
+    expect(parseColor("border-y-4")).toBeNull();
+    expect(parseColor("border-x-0")).toBeNull();
+    expect(parseColor("border-y-8")).toBeNull();
+  });
+
+  it("should not match border-x/border-y arbitrary width values", () => {
+    expect(parseColor("border-x-[3px]")).toBeNull();
+    expect(parseColor("border-y-[5px]")).toBeNull();
+    expect(parseColor("border-x-[10]")).toBeNull();
+    expect(parseColor("border-y-[8px]")).toBeNull();
+  });
+});

package/src/parser/colors.ts

@@ -178,5 +178,43 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
     }
   }
 
+  // Directional border colors: border-t-red-500, border-l-blue-500/50, border-r-[#ff0000]
+  const dirBorderMatch = cls.match(/^border-([trblxy])-(.+)$/);
+  if (dirBorderMatch) {
+    const dir = dirBorderMatch[1];
+    const colorKey = dirBorderMatch[2];
+
+    // Skip arbitrary values that don't look like colors (e.g., border-t-[3px] is width)
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
+
+    const color = parseColorWithOpacity(colorKey);
+    if (color) {
+      // Map direction to React Native property/properties
+      // x and y apply to multiple sides (RN doesn't have borderHorizontalColor/borderVerticalColor)
+      if (dir === "x") {
+        return {
+          borderLeftColor: color,
+          borderRightColor: color,
+        };
+      }
+      if (dir === "y") {
+        return {
+          borderTopColor: color,
+          borderBottomColor: color,
+        };
+      }
+
+      const propMap: Record<string, string> = {
+        t: "borderTopColor",
+        r: "borderRightColor",
+        b: "borderBottomColor",
+        l: "borderLeftColor",
+      };
+      return { [propMap[dir]]: color };
+    }
+  }
+
   return null;
 }

package/src/parser/index.ts

@@ -50,10 +50,10 @@ export function parseClassName(className: string, customTheme?: CustomTheme): St
 export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject {
   // Try each parser in order
   // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
-  // parseColor and parseTypography get custom theme, others don't need it
+  // parseBorder, parseColor and parseTypography get custom theme
   const parsers: Array<(cls: string) => StyleObject | null> = [
     parseSpacing,
-    parseBorder,
+    (cls: string) => parseBorder(cls, customTheme?.colors),
     (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
     (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),
@@ -97,6 +97,7 @@ export {
   hasModifier,
   isColorClass,
   isColorSchemeModifier,
+  isDirectionalModifier,
   isPlatformModifier,
   isSchemeModifier,
   isStateModifier,
@@ -105,6 +106,7 @@ export {
 } from "./modifiers";
 export type {
   ColorSchemeModifierType,
+  DirectionalModifierType,
   ModifierType,
   ParsedModifier,
   PlatformModifierType,

package/src/parser/layout.test.ts

@@ -645,3 +645,77 @@ describe("parseLayout - specific property coverage", () => {
     expect(insetY).not.toHaveProperty("right");
   });
 });
+
+describe("parseLayout - logical positioning (RTL-aware)", () => {
+  it("should parse start positioning with preset values", () => {
+    expect(parseLayout("start-0")).toEqual({ start: 0 });
+    expect(parseLayout("start-4")).toEqual({ start: 16 });
+    expect(parseLayout("start-8")).toEqual({ start: 32 });
+    expect(parseLayout("start-0.5")).toEqual({ start: 2 });
+    expect(parseLayout("start-2.5")).toEqual({ start: 10 });
+  });
+
+  it("should parse end positioning with preset values", () => {
+    expect(parseLayout("end-0")).toEqual({ end: 0 });
+    expect(parseLayout("end-4")).toEqual({ end: 16 });
+    expect(parseLayout("end-8")).toEqual({ end: 32 });
+    expect(parseLayout("end-0.5")).toEqual({ end: 2 });
+    expect(parseLayout("end-2.5")).toEqual({ end: 10 });
+  });
+
+  it("should parse start/end with arbitrary pixel values", () => {
+    expect(parseLayout("start-[10px]")).toEqual({ start: 10 });
+    expect(parseLayout("start-[50]")).toEqual({ start: 50 });
+    expect(parseLayout("end-[10px]")).toEqual({ end: 10 });
+    expect(parseLayout("end-[50]")).toEqual({ end: 50 });
+  });
+
+  it("should parse start/end with arbitrary percentage values", () => {
+    expect(parseLayout("start-[10%]")).toEqual({ start: "10%" });
+    expect(parseLayout("start-[50%]")).toEqual({ start: "50%" });
+    expect(parseLayout("end-[10%]")).toEqual({ end: "10%" });
+    expect(parseLayout("end-[50%]")).toEqual({ end: "50%" });
+  });
+
+  it("should parse negative start/end with preset values", () => {
+    expect(parseLayout("-start-4")).toEqual({ start: -16 });
+    expect(parseLayout("-start-8")).toEqual({ start: -32 });
+    expect(parseLayout("-end-4")).toEqual({ end: -16 });
+    expect(parseLayout("-end-8")).toEqual({ end: -32 });
+  });
+
+  it("should parse negative start/end with arbitrary values", () => {
+    expect(parseLayout("-start-[10px]")).toEqual({ start: -10 });
+    expect(parseLayout("-start-[50]")).toEqual({ start: -50 });
+    expect(parseLayout("-end-[10px]")).toEqual({ end: -10 });
+    expect(parseLayout("-end-[50]")).toEqual({ end: -50 });
+    expect(parseLayout("-start-[10%]")).toEqual({ start: "-10%" });
+    expect(parseLayout("-end-[25%]")).toEqual({ end: "-25%" });
+  });
+
+  it("should handle auto value for start/end", () => {
+    expect(parseLayout("start-auto")).toEqual({});
+    expect(parseLayout("end-auto")).toEqual({});
+  });
+});
+
+describe("parseLayout - logical inset (RTL-aware)", () => {
+  it("should parse inset-s (start) with preset values", () => {
+    expect(parseLayout("inset-s-0")).toEqual({ start: 0 });
+    expect(parseLayout("inset-s-4")).toEqual({ start: 16 });
+    expect(parseLayout("inset-s-8")).toEqual({ start: 32 });
+  });
+
+  it("should parse inset-e (end) with preset values", () => {
+    expect(parseLayout("inset-e-0")).toEqual({ end: 0 });
+    expect(parseLayout("inset-e-4")).toEqual({ end: 16 });
+    expect(parseLayout("inset-e-8")).toEqual({ end: 32 });
+  });
+
+  it("should parse inset-s/inset-e with arbitrary values", () => {
+    expect(parseLayout("inset-s-[10px]")).toEqual({ start: 10 });
+    expect(parseLayout("inset-s-[20%]")).toEqual({ start: "20%" });
+    expect(parseLayout("inset-e-[10px]")).toEqual({ end: 10 });
+    expect(parseLayout("inset-e-[20%]")).toEqual({ end: "20%" });
+  });
+});

package/src/parser/layout.ts

@@ -339,6 +339,68 @@ export function parseLayout(cls: string): StyleObject | null {
     }
   }
 
+  // Start positioning (RTL-aware): start-0, start-4, start-[10px], -start-4, etc.
+  const startMatch = cls.match(/^(-?)start-(.+)$/);
+  if (startMatch) {
+    const [, negPrefix, startKey] = startMatch;
+    const isNegative = negPrefix === "-";
+
+    // Auto value - return empty object (no-op, removes the property)
+    if (startKey === "auto") {
+      return {};
+    }
+
+    // Arbitrary values: start-[123px], start-[50%], -start-[10px]
+    const arbitraryStart = parseArbitraryInset(startKey);
+    if (arbitraryStart !== null) {
+      if (typeof arbitraryStart === "number") {
+        return { start: isNegative ? -arbitraryStart : arbitraryStart };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryStart.endsWith("%")) {
+        const numValue = parseFloat(arbitraryStart);
+        return { start: `${-numValue}%` };
+      }
+      return { start: arbitraryStart };
+    }
+
+    const startValue = INSET_SCALE[startKey];
+    if (startValue !== undefined) {
+      return { start: isNegative ? -startValue : startValue };
+    }
+  }
+
+  // End positioning (RTL-aware): end-0, end-4, end-[10px], -end-4, etc.
+  const endMatch = cls.match(/^(-?)end-(.+)$/);
+  if (endMatch) {
+    const [, negPrefix, endKey] = endMatch;
+    const isNegative = negPrefix === "-";
+
+    // Auto value - return empty object (no-op, removes the property)
+    if (endKey === "auto") {
+      return {};
+    }
+
+    // Arbitrary values: end-[123px], end-[50%], -end-[10px]
+    const arbitraryEnd = parseArbitraryInset(endKey);
+    if (arbitraryEnd !== null) {
+      if (typeof arbitraryEnd === "number") {
+        return { end: isNegative ? -arbitraryEnd : arbitraryEnd };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryEnd.endsWith("%")) {
+        const numValue = parseFloat(arbitraryEnd);
+        return { end: `${-numValue}%` };
+      }
+      return { end: arbitraryEnd };
+    }
+
+    const endValue = INSET_SCALE[endKey];
+    if (endValue !== undefined) {
+      return { end: isNegative ? -endValue : endValue };
+    }
+  }
+
   // Inset X (left and right): inset-x-0, inset-x-4, inset-x-[10px], etc.
   if (cls.startsWith("inset-x-")) {
     const insetKey = cls.substring(8);
@@ -371,6 +433,38 @@ export function parseLayout(cls: string): StyleObject | null {
     }
   }
 
+  // Inset S (start, RTL-aware): inset-s-0, inset-s-4, inset-s-[10px], etc.
+  if (cls.startsWith("inset-s-")) {
+    const insetKey = cls.substring(8);
+
+    // Arbitrary values: inset-s-[123px], inset-s-[50%]
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { start: arbitraryInset };
+    }
+
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== undefined) {
+      return { start: insetValue };
+    }
+  }
+
+  // Inset E (end, RTL-aware): inset-e-0, inset-e-4, inset-e-[10px], etc.
+  if (cls.startsWith("inset-e-")) {
+    const insetKey = cls.substring(8);
+
+    // Arbitrary values: inset-e-[123px], inset-e-[50%]
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { end: arbitraryInset };
+    }
+
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== undefined) {
+      return { end: insetValue };
+    }
+  }
+
   // Inset (all sides): inset-0, inset-4, inset-[10px], etc.
   if (cls.startsWith("inset-")) {
     const insetKey = cls.substring(6);