@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/src/parser/layout.test.ts

@@ -0,0 +1,459 @@
+import { describe, expect, it } from "vitest";
+import { parseLayout } from "./layout";
+
+describe("parseLayout - display utilities", () => {
+  it("should parse display flex", () => {
+    expect(parseLayout("flex")).toEqual({ display: "flex" });
+  });
+
+  it("should parse display hidden", () => {
+    expect(parseLayout("hidden")).toEqual({ display: "none" });
+  });
+});
+
+describe("parseLayout - flex direction utilities", () => {
+  it("should parse flex row", () => {
+    expect(parseLayout("flex-row")).toEqual({ flexDirection: "row" });
+  });
+
+  it("should parse flex row reverse", () => {
+    expect(parseLayout("flex-row-reverse")).toEqual({ flexDirection: "row-reverse" });
+  });
+
+  it("should parse flex column", () => {
+    expect(parseLayout("flex-col")).toEqual({ flexDirection: "column" });
+  });
+
+  it("should parse flex column reverse", () => {
+    expect(parseLayout("flex-col-reverse")).toEqual({ flexDirection: "column-reverse" });
+  });
+});
+
+describe("parseLayout - flex wrap utilities", () => {
+  it("should parse flex wrap", () => {
+    expect(parseLayout("flex-wrap")).toEqual({ flexWrap: "wrap" });
+  });
+
+  it("should parse flex wrap reverse", () => {
+    expect(parseLayout("flex-wrap-reverse")).toEqual({ flexWrap: "wrap-reverse" });
+  });
+
+  it("should parse flex nowrap", () => {
+    expect(parseLayout("flex-nowrap")).toEqual({ flexWrap: "nowrap" });
+  });
+});
+
+describe("parseLayout - flex utilities", () => {
+  it("should parse flex-1", () => {
+    expect(parseLayout("flex-1")).toEqual({ flex: 1 });
+  });
+
+  it("should parse flex-auto", () => {
+    expect(parseLayout("flex-auto")).toEqual({ flex: 1 });
+  });
+
+  it("should parse flex-none", () => {
+    expect(parseLayout("flex-none")).toEqual({ flex: 0 });
+  });
+});
+
+describe("parseLayout - flex grow/shrink utilities", () => {
+  it("should parse grow", () => {
+    expect(parseLayout("grow")).toEqual({ flexGrow: 1 });
+  });
+
+  it("should parse grow-0", () => {
+    expect(parseLayout("grow-0")).toEqual({ flexGrow: 0 });
+  });
+
+  it("should parse shrink", () => {
+    expect(parseLayout("shrink")).toEqual({ flexShrink: 1 });
+  });
+
+  it("should parse shrink-0", () => {
+    expect(parseLayout("shrink-0")).toEqual({ flexShrink: 0 });
+  });
+});
+
+describe("parseLayout - justify content utilities", () => {
+  it("should parse justify-start", () => {
+    expect(parseLayout("justify-start")).toEqual({ justifyContent: "flex-start" });
+  });
+
+  it("should parse justify-end", () => {
+    expect(parseLayout("justify-end")).toEqual({ justifyContent: "flex-end" });
+  });
+
+  it("should parse justify-center", () => {
+    expect(parseLayout("justify-center")).toEqual({ justifyContent: "center" });
+  });
+
+  it("should parse justify-between", () => {
+    expect(parseLayout("justify-between")).toEqual({ justifyContent: "space-between" });
+  });
+
+  it("should parse justify-around", () => {
+    expect(parseLayout("justify-around")).toEqual({ justifyContent: "space-around" });
+  });
+
+  it("should parse justify-evenly", () => {
+    expect(parseLayout("justify-evenly")).toEqual({ justifyContent: "space-evenly" });
+  });
+});
+
+describe("parseLayout - align items utilities", () => {
+  it("should parse items-start", () => {
+    expect(parseLayout("items-start")).toEqual({ alignItems: "flex-start" });
+  });
+
+  it("should parse items-end", () => {
+    expect(parseLayout("items-end")).toEqual({ alignItems: "flex-end" });
+  });
+
+  it("should parse items-center", () => {
+    expect(parseLayout("items-center")).toEqual({ alignItems: "center" });
+  });
+
+  it("should parse items-baseline", () => {
+    expect(parseLayout("items-baseline")).toEqual({ alignItems: "baseline" });
+  });
+
+  it("should parse items-stretch", () => {
+    expect(parseLayout("items-stretch")).toEqual({ alignItems: "stretch" });
+  });
+});
+
+describe("parseLayout - align self utilities", () => {
+  it("should parse self-auto", () => {
+    expect(parseLayout("self-auto")).toEqual({ alignSelf: "auto" });
+  });
+
+  it("should parse self-start", () => {
+    expect(parseLayout("self-start")).toEqual({ alignSelf: "flex-start" });
+  });
+
+  it("should parse self-end", () => {
+    expect(parseLayout("self-end")).toEqual({ alignSelf: "flex-end" });
+  });
+
+  it("should parse self-center", () => {
+    expect(parseLayout("self-center")).toEqual({ alignSelf: "center" });
+  });
+
+  it("should parse self-stretch", () => {
+    expect(parseLayout("self-stretch")).toEqual({ alignSelf: "stretch" });
+  });
+
+  it("should parse self-baseline", () => {
+    expect(parseLayout("self-baseline")).toEqual({ alignSelf: "baseline" });
+  });
+});
+
+describe("parseLayout - align content utilities", () => {
+  it("should parse content-start", () => {
+    expect(parseLayout("content-start")).toEqual({ alignContent: "flex-start" });
+  });
+
+  it("should parse content-end", () => {
+    expect(parseLayout("content-end")).toEqual({ alignContent: "flex-end" });
+  });
+
+  it("should parse content-center", () => {
+    expect(parseLayout("content-center")).toEqual({ alignContent: "center" });
+  });
+
+  it("should parse content-between", () => {
+    expect(parseLayout("content-between")).toEqual({ alignContent: "space-between" });
+  });
+
+  it("should parse content-around", () => {
+    expect(parseLayout("content-around")).toEqual({ alignContent: "space-around" });
+  });
+
+  it("should parse content-stretch", () => {
+    expect(parseLayout("content-stretch")).toEqual({ alignContent: "stretch" });
+  });
+});
+
+describe("parseLayout - position utilities", () => {
+  it("should parse absolute", () => {
+    expect(parseLayout("absolute")).toEqual({ position: "absolute" });
+  });
+
+  it("should parse relative", () => {
+    expect(parseLayout("relative")).toEqual({ position: "relative" });
+  });
+});
+
+describe("parseLayout - overflow utilities", () => {
+  it("should parse overflow-hidden", () => {
+    expect(parseLayout("overflow-hidden")).toEqual({ overflow: "hidden" });
+  });
+
+  it("should parse overflow-visible", () => {
+    expect(parseLayout("overflow-visible")).toEqual({ overflow: "visible" });
+  });
+
+  it("should parse overflow-scroll", () => {
+    expect(parseLayout("overflow-scroll")).toEqual({ overflow: "scroll" });
+  });
+});
+
+describe("parseLayout - edge cases", () => {
+  it("should return null for invalid classes", () => {
+    expect(parseLayout("invalid")).toBeNull();
+    expect(parseLayout("flex-invalid")).toBeNull();
+    expect(parseLayout("justify")).toBeNull();
+    expect(parseLayout("items")).toBeNull();
+  });
+
+  it("should return null for empty string", () => {
+    expect(parseLayout("")).toBeNull();
+  });
+
+  it("should return null for partial class names", () => {
+    expect(parseLayout("fle")).toBeNull();
+    expect(parseLayout("flexbox")).toBeNull();
+    expect(parseLayout("justify-start-center")).toBeNull();
+  });
+
+  it("should return null for CSS classes not in React Native", () => {
+    expect(parseLayout("inline")).toBeNull();
+    expect(parseLayout("block")).toBeNull();
+    expect(parseLayout("inline-block")).toBeNull();
+    expect(parseLayout("grid")).toBeNull();
+  });
+});
+
+describe("parseLayout - comprehensive coverage", () => {
+  it("should handle all flex direction variants", () => {
+    const directions = ["flex-row", "flex-row-reverse", "flex-col", "flex-col-reverse"];
+    directions.forEach((dir) => {
+      expect(parseLayout(dir)).toBeTruthy();
+    });
+  });
+
+  it("should handle all flex wrap variants", () => {
+    const wraps = ["flex-wrap", "flex-wrap-reverse", "flex-nowrap"];
+    wraps.forEach((wrap) => {
+      expect(parseLayout(wrap)).toBeTruthy();
+    });
+  });
+
+  it("should handle all justify content variants", () => {
+    const justifies = [
+      "justify-start",
+      "justify-end",
+      "justify-center",
+      "justify-between",
+      "justify-around",
+      "justify-evenly",
+    ];
+    justifies.forEach((justify) => {
+      expect(parseLayout(justify)).toBeTruthy();
+    });
+  });
+
+  it("should handle all align items variants", () => {
+    const aligns = ["items-start", "items-end", "items-center", "items-baseline", "items-stretch"];
+    aligns.forEach((align) => {
+      expect(parseLayout(align)).toBeTruthy();
+    });
+  });
+
+  it("should handle all align self variants", () => {
+    const selfs = ["self-auto", "self-start", "self-end", "self-center", "self-stretch", "self-baseline"];
+    selfs.forEach((self) => {
+      expect(parseLayout(self)).toBeTruthy();
+    });
+  });
+
+  it("should handle all align content variants", () => {
+    const contents = [
+      "content-start",
+      "content-end",
+      "content-center",
+      "content-between",
+      "content-around",
+      "content-stretch",
+    ];
+    contents.forEach((content) => {
+      expect(parseLayout(content)).toBeTruthy();
+    });
+  });
+
+  it("should handle all position variants", () => {
+    const positions = ["absolute", "relative"];
+    positions.forEach((position) => {
+      expect(parseLayout(position)).toBeTruthy();
+    });
+  });
+
+  it("should handle all overflow variants", () => {
+    const overflows = ["overflow-hidden", "overflow-visible", "overflow-scroll"];
+    overflows.forEach((overflow) => {
+      expect(parseLayout(overflow)).toBeTruthy();
+    });
+  });
+});
+
+describe("parseLayout - case sensitivity", () => {
+  it("should be case-sensitive", () => {
+    expect(parseLayout("FLEX")).toBeNull();
+    expect(parseLayout("Flex")).toBeNull();
+    expect(parseLayout("ABSOLUTE")).toBeNull();
+  });
+});
+
+describe("parseLayout - z-index utilities", () => {
+  it("should parse z-index values", () => {
+    expect(parseLayout("z-0")).toEqual({ zIndex: 0 });
+    expect(parseLayout("z-10")).toEqual({ zIndex: 10 });
+    expect(parseLayout("z-20")).toEqual({ zIndex: 20 });
+    expect(parseLayout("z-30")).toEqual({ zIndex: 30 });
+    expect(parseLayout("z-40")).toEqual({ zIndex: 40 });
+    expect(parseLayout("z-50")).toEqual({ zIndex: 50 });
+  });
+
+  it("should parse z-auto as 0", () => {
+    expect(parseLayout("z-auto")).toEqual({ zIndex: 0 });
+  });
+
+  it("should return null for invalid z-index values", () => {
+    expect(parseLayout("z-100")).toBeNull();
+    expect(parseLayout("z-5")).toBeNull();
+    expect(parseLayout("z-invalid")).toBeNull();
+  });
+});
+
+describe("parseLayout - positioning utilities", () => {
+  it("should parse top values", () => {
+    expect(parseLayout("top-0")).toEqual({ top: 0 });
+    expect(parseLayout("top-4")).toEqual({ top: 16 });
+    expect(parseLayout("top-8")).toEqual({ top: 32 });
+    expect(parseLayout("top-16")).toEqual({ top: 64 });
+  });
+
+  it("should parse right values", () => {
+    expect(parseLayout("right-0")).toEqual({ right: 0 });
+    expect(parseLayout("right-4")).toEqual({ right: 16 });
+    expect(parseLayout("right-8")).toEqual({ right: 32 });
+    expect(parseLayout("right-16")).toEqual({ right: 64 });
+  });
+
+  it("should parse bottom values", () => {
+    expect(parseLayout("bottom-0")).toEqual({ bottom: 0 });
+    expect(parseLayout("bottom-4")).toEqual({ bottom: 16 });
+    expect(parseLayout("bottom-8")).toEqual({ bottom: 32 });
+    expect(parseLayout("bottom-16")).toEqual({ bottom: 64 });
+  });
+
+  it("should parse left values", () => {
+    expect(parseLayout("left-0")).toEqual({ left: 0 });
+    expect(parseLayout("left-4")).toEqual({ left: 16 });
+    expect(parseLayout("left-8")).toEqual({ left: 32 });
+    expect(parseLayout("left-16")).toEqual({ left: 64 });
+  });
+
+  it("should parse fractional positioning values", () => {
+    expect(parseLayout("top-0.5")).toEqual({ top: 2 });
+    expect(parseLayout("right-1.5")).toEqual({ right: 6 });
+    expect(parseLayout("bottom-2.5")).toEqual({ bottom: 10 });
+    expect(parseLayout("left-3.5")).toEqual({ left: 14 });
+  });
+
+  it("should parse auto positioning values as empty object", () => {
+    // Auto removes the property, which is useful for responsive overrides
+    expect(parseLayout("top-auto")).toEqual({});
+    expect(parseLayout("right-auto")).toEqual({});
+    expect(parseLayout("bottom-auto")).toEqual({});
+    expect(parseLayout("left-auto")).toEqual({});
+  });
+});
+
+describe("parseLayout - inset utilities", () => {
+  it("should parse inset (all sides) values", () => {
+    expect(parseLayout("inset-0")).toEqual({ top: 0, right: 0, bottom: 0, left: 0 });
+    expect(parseLayout("inset-4")).toEqual({ top: 16, right: 16, bottom: 16, left: 16 });
+    expect(parseLayout("inset-8")).toEqual({ top: 32, right: 32, bottom: 32, left: 32 });
+  });
+
+  it("should parse inset-x (horizontal) values", () => {
+    expect(parseLayout("inset-x-0")).toEqual({ left: 0, right: 0 });
+    expect(parseLayout("inset-x-4")).toEqual({ left: 16, right: 16 });
+    expect(parseLayout("inset-x-8")).toEqual({ left: 32, right: 32 });
+  });
+
+  it("should parse inset-y (vertical) values", () => {
+    expect(parseLayout("inset-y-0")).toEqual({ top: 0, bottom: 0 });
+    expect(parseLayout("inset-y-4")).toEqual({ top: 16, bottom: 16 });
+    expect(parseLayout("inset-y-8")).toEqual({ top: 32, bottom: 32 });
+  });
+
+  it("should parse fractional inset values", () => {
+    expect(parseLayout("inset-0.5")).toEqual({ top: 2, right: 2, bottom: 2, left: 2 });
+    expect(parseLayout("inset-x-1.5")).toEqual({ left: 6, right: 6 });
+    expect(parseLayout("inset-y-2.5")).toEqual({ top: 10, bottom: 10 });
+  });
+
+  it("should return null for invalid inset values", () => {
+    expect(parseLayout("inset-100")).toBeNull();
+    expect(parseLayout("inset-x-100")).toBeNull();
+    expect(parseLayout("inset-y-100")).toBeNull();
+  });
+});
+
+describe("parseLayout - specific property coverage", () => {
+  it("should return unique objects for each class", () => {
+    const flex1 = parseLayout("flex");
+    const flex2 = parseLayout("flex");
+    // Should be equal in value but not necessarily same reference
+    expect(flex1).toEqual(flex2);
+  });
+
+  it("should handle flex value variations", () => {
+    expect(parseLayout("flex-1")).toEqual({ flex: 1 });
+    expect(parseLayout("flex-auto")).toEqual({ flex: 1 });
+    expect(parseLayout("flex-none")).toEqual({ flex: 0 });
+  });
+
+  it("should distinguish between similar class names", () => {
+    expect(parseLayout("flex")).not.toEqual(parseLayout("flex-1"));
+    expect(parseLayout("grow")).not.toEqual(parseLayout("grow-0"));
+    expect(parseLayout("shrink")).not.toEqual(parseLayout("shrink-0"));
+  });
+
+  it("should handle positioning with absolute/relative", () => {
+    // Common pattern: absolute + top/left
+    expect(parseLayout("absolute")).toEqual({ position: "absolute" });
+    expect(parseLayout("top-0")).toEqual({ top: 0 });
+    expect(parseLayout("left-0")).toEqual({ left: 0 });
+  });
+
+  it("should handle all positioning directions", () => {
+    expect(parseLayout("top-4")).toHaveProperty("top");
+    expect(parseLayout("right-4")).toHaveProperty("right");
+    expect(parseLayout("bottom-4")).toHaveProperty("bottom");
+    expect(parseLayout("left-4")).toHaveProperty("left");
+  });
+
+  it("should handle inset shorthand variations", () => {
+    const insetAll = parseLayout("inset-4");
+    expect(insetAll).toHaveProperty("top", 16);
+    expect(insetAll).toHaveProperty("right", 16);
+    expect(insetAll).toHaveProperty("bottom", 16);
+    expect(insetAll).toHaveProperty("left", 16);
+
+    const insetX = parseLayout("inset-x-4");
+    expect(insetX).toHaveProperty("left", 16);
+    expect(insetX).toHaveProperty("right", 16);
+    expect(insetX).not.toHaveProperty("top");
+    expect(insetX).not.toHaveProperty("bottom");
+
+    const insetY = parseLayout("inset-y-4");
+    expect(insetY).toHaveProperty("top", 16);
+    expect(insetY).toHaveProperty("bottom", 16);
+    expect(insetY).not.toHaveProperty("left");
+    expect(insetY).not.toHaveProperty("right");
+  });
+});

package/src/parser/layout.ts

@@ -92,10 +92,138 @@ const OVERFLOW_MAP: Record<string, StyleObject> = {
   "overflow-scroll": { overflow: "scroll" },
 };
 
+// Z-index scale
+export const Z_INDEX_SCALE: Record<string, number> = {
+  0: 0,
+  10: 10,
+  20: 20,
+  30: 30,
+  40: 40,
+  50: 50,
+  auto: 0, // React Native doesn't have 'auto', default to 0
+};
+
+// Inset scale (for top/right/bottom/left positioning in pixels)
+export const INSET_SCALE: Record<string, number> = {
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  8: 32,
+  10: 40,
+  12: 48,
+  16: 64,
+  20: 80,
+  24: 96,
+};
+
 /**
  * Parse layout classes
  */
 export function parseLayout(cls: string): StyleObject | null {
+  // Z-index: z-0, z-10, z-20, etc.
+  if (cls.startsWith("z-")) {
+    const zKey = cls.substring(2);
+    const zValue = Z_INDEX_SCALE[zKey];
+    if (zValue !== undefined) {
+      return { zIndex: zValue };
+    }
+  }
+
+  // Top positioning: top-0, top-4, etc.
+  if (cls.startsWith("top-")) {
+    const topKey = cls.substring(4);
+
+    // Auto value - return empty object (no-op, removes the property)
+    if (topKey === "auto") {
+      return {};
+    }
+
+    const topValue = INSET_SCALE[topKey];
+    if (topValue !== undefined) {
+      return { top: topValue };
+    }
+  }
+
+  // Right positioning: right-0, right-4, etc.
+  if (cls.startsWith("right-")) {
+    const rightKey = cls.substring(6);
+
+    // Auto value - return empty object (no-op, removes the property)
+    if (rightKey === "auto") {
+      return {};
+    }
+
+    const rightValue = INSET_SCALE[rightKey];
+    if (rightValue !== undefined) {
+      return { right: rightValue };
+    }
+  }
+
+  // Bottom positioning: bottom-0, bottom-4, etc.
+  if (cls.startsWith("bottom-")) {
+    const bottomKey = cls.substring(7);
+
+    // Auto value - return empty object (no-op, removes the property)
+    if (bottomKey === "auto") {
+      return {};
+    }
+
+    const bottomValue = INSET_SCALE[bottomKey];
+    if (bottomValue !== undefined) {
+      return { bottom: bottomValue };
+    }
+  }
+
+  // Left positioning: left-0, left-4, etc.
+  if (cls.startsWith("left-")) {
+    const leftKey = cls.substring(5);
+
+    // Auto value - return empty object (no-op, removes the property)
+    if (leftKey === "auto") {
+      return {};
+    }
+
+    const leftValue = INSET_SCALE[leftKey];
+    if (leftValue !== undefined) {
+      return { left: leftValue };
+    }
+  }
+
+  // Inset (all sides): inset-0, inset-4, etc.
+  if (cls.startsWith("inset-")) {
+    const insetKey = cls.substring(6);
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== undefined) {
+      return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
+    }
+  }
+
+  // Inset X (left and right): inset-x-0, inset-x-4, etc.
+  if (cls.startsWith("inset-x-")) {
+    const insetKey = cls.substring(8);
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== undefined) {
+      return { left: insetValue, right: insetValue };
+    }
+  }
+
+  // Inset Y (top and bottom): inset-y-0, inset-y-4, etc.
+  if (cls.startsWith("inset-y-")) {
+    const insetKey = cls.substring(8);
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== undefined) {
+      return { top: insetValue, bottom: insetValue };
+    }
+  }
+
   // Try each lookup table in order
   return (
     DISPLAY_MAP[cls] ??