@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/src/parser/modifiers.test.ts

@@ -0,0 +1,375 @@
+import { describe, expect, it } from "vitest";
+import type { ModifierType, ParsedModifier } from "./modifiers";
+import { hasModifier, parseModifier, splitModifierClasses } from "./modifiers";
+
+describe("parseModifier - basic functionality", () => {
+  it("should parse active modifier", () => {
+    const result = parseModifier("active:bg-blue-500");
+    expect(result).toEqual({
+      modifier: "active",
+      baseClass: "bg-blue-500",
+    });
+  });
+
+  it("should parse hover modifier", () => {
+    const result = parseModifier("hover:text-red-500");
+    expect(result).toEqual({
+      modifier: "hover",
+      baseClass: "text-red-500",
+    });
+  });
+
+  it("should parse focus modifier", () => {
+    const result = parseModifier("focus:border-green-500");
+    expect(result).toEqual({
+      modifier: "focus",
+      baseClass: "border-green-500",
+    });
+  });
+
+  it("should parse disabled modifier", () => {
+    const result = parseModifier("disabled:bg-gray-400");
+    expect(result).toEqual({
+      modifier: "disabled",
+      baseClass: "bg-gray-400",
+    });
+  });
+
+  it("should return null for class without modifier", () => {
+    expect(parseModifier("bg-blue-500")).toBeNull();
+    expect(parseModifier("text-red-500")).toBeNull();
+    expect(parseModifier("p-4")).toBeNull();
+  });
+});
+
+describe("parseModifier - various base classes", () => {
+  it("should parse modifiers with spacing classes", () => {
+    expect(parseModifier("active:m-4")).toEqual({
+      modifier: "active",
+      baseClass: "m-4",
+    });
+    expect(parseModifier("hover:p-8")).toEqual({
+      modifier: "hover",
+      baseClass: "p-8",
+    });
+  });
+
+  it("should parse modifiers with layout classes", () => {
+    expect(parseModifier("active:flex")).toEqual({
+      modifier: "active",
+      baseClass: "flex",
+    });
+    expect(parseModifier("focus:absolute")).toEqual({
+      modifier: "focus",
+      baseClass: "absolute",
+    });
+  });
+
+  it("should parse modifiers with typography classes", () => {
+    expect(parseModifier("hover:text-lg")).toEqual({
+      modifier: "hover",
+      baseClass: "text-lg",
+    });
+    expect(parseModifier("active:font-bold")).toEqual({
+      modifier: "active",
+      baseClass: "font-bold",
+    });
+  });
+
+  it("should parse modifiers with arbitrary values", () => {
+    expect(parseModifier("active:bg-[#ff0000]")).toEqual({
+      modifier: "active",
+      baseClass: "bg-[#ff0000]",
+    });
+    expect(parseModifier("hover:w-[100px]")).toEqual({
+      modifier: "hover",
+      baseClass: "w-[100px]",
+    });
+  });
+
+  it("should parse modifiers with complex class names", () => {
+    expect(parseModifier("active:inset-x-4")).toEqual({
+      modifier: "active",
+      baseClass: "inset-x-4",
+    });
+    expect(parseModifier("focus:border-blue-500")).toEqual({
+      modifier: "focus",
+      baseClass: "border-blue-500",
+    });
+  });
+});
+
+describe("parseModifier - edge cases", () => {
+  it("should return null for unsupported modifiers", () => {
+    expect(parseModifier("selected:bg-blue-500")).toBeNull();
+    expect(parseModifier("pressed:bg-red-500")).toBeNull();
+    expect(parseModifier("custom:bg-green-500")).toBeNull();
+    expect(parseModifier("unknown:bg-gray-500")).toBeNull();
+  });
+
+  it("should return null for nested modifiers", () => {
+    expect(parseModifier("active:hover:bg-blue-500")).toBeNull();
+    expect(parseModifier("hover:focus:text-red-500")).toBeNull();
+    expect(parseModifier("focus:active:p-4")).toBeNull();
+  });
+
+  it("should return null for empty base class", () => {
+    expect(parseModifier("active:")).toBeNull();
+    expect(parseModifier("hover:")).toBeNull();
+    expect(parseModifier("focus:")).toBeNull();
+  });
+
+  it("should return null for empty modifier", () => {
+    expect(parseModifier(":bg-blue-500")).toBeNull();
+    expect(parseModifier(":")).toBeNull();
+  });
+
+  it("should return null for class with only colon", () => {
+    expect(parseModifier(":")).toBeNull();
+  });
+
+  it("should return null for class with multiple colons but no modifier", () => {
+    expect(parseModifier("bg:blue:500")).toBeNull();
+  });
+
+  it("should handle base classes that look like they have colons", () => {
+    // Base class contains colon - should be rejected as nested modifier
+    expect(parseModifier("active:some:thing")).toBeNull();
+  });
+
+  it("should return null for empty string", () => {
+    expect(parseModifier("")).toBeNull();
+  });
+});
+
+describe("parseModifier - case sensitivity", () => {
+  it("should be case-sensitive for modifiers", () => {
+    expect(parseModifier("Active:bg-blue-500")).toBeNull();
+    expect(parseModifier("ACTIVE:bg-blue-500")).toBeNull();
+    expect(parseModifier("Hover:text-red-500")).toBeNull();
+    expect(parseModifier("FOCUS:border-green-500")).toBeNull();
+  });
+
+  it("should preserve case in base class", () => {
+    const result = parseModifier("active:bg-Blue-500");
+    expect(result).toEqual({
+      modifier: "active",
+      baseClass: "bg-Blue-500",
+    });
+  });
+});
+
+describe("hasModifier", () => {
+  it("should return true for classes with modifiers", () => {
+    expect(hasModifier("active:bg-blue-500")).toBe(true);
+    expect(hasModifier("hover:text-red-500")).toBe(true);
+    expect(hasModifier("focus:border-green-500")).toBe(true);
+    expect(hasModifier("disabled:bg-gray-400")).toBe(true);
+  });
+
+  it("should return false for classes without modifiers", () => {
+    expect(hasModifier("bg-blue-500")).toBe(false);
+    expect(hasModifier("text-red-500")).toBe(false);
+    expect(hasModifier("p-4")).toBe(false);
+  });
+
+  it("should return false for unsupported modifiers", () => {
+    expect(hasModifier("selected:bg-gray-500")).toBe(false);
+    expect(hasModifier("pressed:bg-blue-500")).toBe(false);
+  });
+
+  it("should return false for nested modifiers", () => {
+    expect(hasModifier("active:hover:bg-blue-500")).toBe(false);
+  });
+
+  it("should return false for empty base class", () => {
+    expect(hasModifier("active:")).toBe(false);
+  });
+
+  it("should return false for empty string", () => {
+    expect(hasModifier("")).toBe(false);
+  });
+});
+
+describe("splitModifierClasses - basic functionality", () => {
+  it("should split classes with and without modifiers", () => {
+    const result = splitModifierClasses("bg-blue-500 active:bg-blue-700");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500"],
+      modifierClasses: [{ modifier: "active", baseClass: "bg-blue-700" }],
+    });
+  });
+
+  it("should handle multiple base classes", () => {
+    const result = splitModifierClasses("bg-blue-500 p-4 m-2 text-white");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500", "p-4", "m-2", "text-white"],
+      modifierClasses: [],
+    });
+  });
+
+  it("should handle multiple modifier classes", () => {
+    const result = splitModifierClasses("active:bg-blue-700 hover:bg-blue-800 focus:bg-blue-900");
+    expect(result).toEqual({
+      baseClasses: [],
+      modifierClasses: [
+        { modifier: "active", baseClass: "bg-blue-700" },
+        { modifier: "hover", baseClass: "bg-blue-800" },
+        { modifier: "focus", baseClass: "bg-blue-900" },
+      ],
+    });
+  });
+
+  it("should handle mixed base and modifier classes", () => {
+    const result = splitModifierClasses("bg-blue-500 active:bg-blue-700 p-4 active:p-6");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500", "p-4"],
+      modifierClasses: [
+        { modifier: "active", baseClass: "bg-blue-700" },
+        { modifier: "active", baseClass: "p-6" },
+      ],
+    });
+  });
+});
+
+describe("splitModifierClasses - whitespace handling", () => {
+  it("should handle leading whitespace", () => {
+    const result = splitModifierClasses("  bg-blue-500 active:bg-blue-700");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500"],
+      modifierClasses: [{ modifier: "active", baseClass: "bg-blue-700" }],
+    });
+  });
+
+  it("should handle trailing whitespace", () => {
+    const result = splitModifierClasses("bg-blue-500 active:bg-blue-700  ");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500"],
+      modifierClasses: [{ modifier: "active", baseClass: "bg-blue-700" }],
+    });
+  });
+
+  it("should handle multiple spaces between classes", () => {
+    const result = splitModifierClasses("bg-blue-500    active:bg-blue-700");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500"],
+      modifierClasses: [{ modifier: "active", baseClass: "bg-blue-700" }],
+    });
+  });
+
+  it("should handle tabs and newlines", () => {
+    const result = splitModifierClasses("bg-blue-500\tactive:bg-blue-700\np-4");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500", "p-4"],
+      modifierClasses: [{ modifier: "active", baseClass: "bg-blue-700" }],
+    });
+  });
+
+  it("should handle empty string", () => {
+    const result = splitModifierClasses("");
+    expect(result).toEqual({
+      baseClasses: [],
+      modifierClasses: [],
+    });
+  });
+
+  it("should handle whitespace-only string", () => {
+    const result = splitModifierClasses("   ");
+    expect(result).toEqual({
+      baseClasses: [],
+      modifierClasses: [],
+    });
+  });
+});
+
+describe("splitModifierClasses - complex scenarios", () => {
+  it("should handle duplicate modifiers for same property", () => {
+    const result = splitModifierClasses("active:bg-blue-700 active:bg-red-700");
+    expect(result).toEqual({
+      baseClasses: [],
+      modifierClasses: [
+        { modifier: "active", baseClass: "bg-blue-700" },
+        { modifier: "active", baseClass: "bg-red-700" },
+      ],
+    });
+  });
+
+  it("should handle all four modifier types", () => {
+    const result = splitModifierClasses(
+      "bg-gray-500 active:bg-blue-700 hover:bg-green-700 focus:bg-red-700 disabled:bg-gray-400",
+    );
+    expect(result).toEqual({
+      baseClasses: ["bg-gray-500"],
+      modifierClasses: [
+        { modifier: "active", baseClass: "bg-blue-700" },
+        { modifier: "hover", baseClass: "bg-green-700" },
+        { modifier: "focus", baseClass: "bg-red-700" },
+        { modifier: "disabled", baseClass: "bg-gray-400" },
+      ],
+    });
+  });
+
+  it("should ignore unsupported modifiers in the base classes", () => {
+    const result = splitModifierClasses("bg-blue-500 pressed:bg-gray-500 active:bg-blue-700");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500", "pressed:bg-gray-500"],
+      modifierClasses: [{ modifier: "active", baseClass: "bg-blue-700" }],
+    });
+  });
+
+  it("should handle modifiers with arbitrary values", () => {
+    const result = splitModifierClasses("bg-blue-500 active:bg-[#ff0000] hover:w-[200px]");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500"],
+      modifierClasses: [
+        { modifier: "active", baseClass: "bg-[#ff0000]" },
+        { modifier: "hover", baseClass: "w-[200px]" },
+      ],
+    });
+  });
+
+  it("should handle real-world className example", () => {
+    const result = splitModifierClasses(
+      "flex items-center justify-center bg-blue-500 p-4 active:bg-blue-700 active:scale-95 hover:bg-blue-600",
+    );
+    expect(result).toEqual({
+      baseClasses: ["flex", "items-center", "justify-center", "bg-blue-500", "p-4"],
+      modifierClasses: [
+        { modifier: "active", baseClass: "bg-blue-700" },
+        { modifier: "active", baseClass: "scale-95" },
+        { modifier: "hover", baseClass: "bg-blue-600" },
+      ],
+    });
+  });
+});
+
+describe("splitModifierClasses - nested modifiers", () => {
+  it("should ignore nested modifiers", () => {
+    const result = splitModifierClasses("bg-blue-500 active:hover:bg-red-500");
+    expect(result).toEqual({
+      baseClasses: ["bg-blue-500", "active:hover:bg-red-500"],
+      modifierClasses: [],
+    });
+  });
+});
+
+describe("type safety", () => {
+  it("should properly type modifier types", () => {
+    const result = parseModifier("active:bg-blue-500");
+    if (result) {
+      const modifier: ModifierType = result.modifier;
+      expect(["active", "hover", "focus", "disabled"]).toContain(modifier);
+    }
+  });
+
+  it("should properly type ParsedModifier", () => {
+    const result = parseModifier("hover:text-red-500");
+    if (result) {
+      const parsed: ParsedModifier = result;
+      expect(parsed).toHaveProperty("modifier");
+      expect(parsed).toHaveProperty("baseClass");
+      expect(typeof parsed.modifier).toBe("string");
+      expect(typeof parsed.baseClass).toBe("string");
+    }
+  });
+});

package/src/parser/modifiers.ts

@@ -0,0 +1,104 @@
+/**
+ * Modifier parsing utilities for state-based class names (active:, hover:, focus:)
+ */
+
+export type ModifierType = "active" | "hover" | "focus" | "disabled";
+
+export type ParsedModifier = {
+  modifier: ModifierType;
+  baseClass: string;
+};
+
+/**
+ * Supported modifiers that map to component states
+ */
+const SUPPORTED_MODIFIERS: readonly ModifierType[] = ["active", "hover", "focus", "disabled"] as const;
+
+/**
+ * Parse a class name to detect and extract modifiers
+ *
+ * @param cls - Class name to parse (e.g., "active:bg-blue-500")
+ * @returns ParsedModifier if modifier found, null otherwise
+ *
+ * @example
+ * parseModifier("active:bg-blue-500") // { modifier: "active", baseClass: "bg-blue-500" }
+ * parseModifier("bg-blue-500") // null
+ * parseModifier("hover:focus:bg-blue-500") // null (nested modifiers not supported)
+ */
+export function parseModifier(cls: string): ParsedModifier | null {
+  const colonIndex = cls.indexOf(":");
+
+  // No colon means no modifier
+  if (colonIndex === -1) {
+    return null;
+  }
+
+  const potentialModifier = cls.slice(0, colonIndex);
+  const baseClass = cls.slice(colonIndex + 1);
+
+  // Check if it's a supported modifier
+  if (!SUPPORTED_MODIFIERS.includes(potentialModifier as ModifierType)) {
+    return null;
+  }
+
+  // Check for nested modifiers (not currently supported)
+  if (baseClass.includes(":")) {
+    return null;
+  }
+
+  // Base class must not be empty
+  if (!baseClass) {
+    return null;
+  }
+
+  return {
+    modifier: potentialModifier as ModifierType,
+    baseClass,
+  };
+}
+
+/**
+ * Check if a class name contains a modifier
+ *
+ * @param cls - Class name to check
+ * @returns true if class has a supported modifier prefix
+ */
+export function hasModifier(cls: string): boolean {
+  return parseModifier(cls) !== null;
+}
+
+/**
+ * Split a space-separated className string into base and modifier classes
+ *
+ * @param className - Space-separated class names
+ * @returns Object with baseClasses and modifierClasses arrays
+ *
+ * @example
+ * splitModifierClasses("bg-blue-500 active:bg-blue-700 p-4 active:p-6")
+ * // {
+ * //   baseClasses: ["bg-blue-500", "p-4"],
+ * //   modifierClasses: [
+ * //     { modifier: "active", baseClass: "bg-blue-700" },
+ * //     { modifier: "active", baseClass: "p-6" }
+ * //   ]
+ * // }
+ */
+export function splitModifierClasses(className: string): {
+  baseClasses: string[];
+  modifierClasses: ParsedModifier[];
+} {
+  const classes = className.trim().split(/\s+/).filter(Boolean);
+  const baseClasses: string[] = [];
+  const modifierClasses: ParsedModifier[] = [];
+
+  for (const cls of classes) {
+    const parsed = parseModifier(cls);
+    if (parsed) {
+      modifierClasses.push(parsed);
+    } else {
+      baseClasses.push(cls);
+    }
+  }
+
+  return { baseClasses, modifierClasses };
+}

package/src/parser/shadows.test.ts

@@ -0,0 +1,201 @@
+import { setPlatform } from "test/mocks/react-native";
+import { beforeEach, describe, expect, it } from "vitest";
+import { SHADOW_SCALE, parseShadow, rebuildShadowScale } from "./shadows";
+
+// Reset to iOS before each test
+beforeEach(() => {
+  setPlatform("ios");
+  rebuildShadowScale();
+});
+
+describe("SHADOW_SCALE", () => {
+  it("should export complete shadow scale", () => {
+    expect(SHADOW_SCALE).toMatchSnapshot();
+  });
+
+  it("should have all shadow variants", () => {
+    expect(SHADOW_SCALE).toHaveProperty("shadow-sm");
+    expect(SHADOW_SCALE).toHaveProperty("shadow");
+    expect(SHADOW_SCALE).toHaveProperty("shadow-md");
+    expect(SHADOW_SCALE).toHaveProperty("shadow-lg");
+    expect(SHADOW_SCALE).toHaveProperty("shadow-xl");
+    expect(SHADOW_SCALE).toHaveProperty("shadow-2xl");
+    expect(SHADOW_SCALE).toHaveProperty("shadow-none");
+  });
+});
+
+describe("parseShadow - basic shadows", () => {
+  it("should parse shadow-sm", () => {
+    const result = parseShadow("shadow-sm");
+    expect(result).toBeTruthy();
+    expect(result).toHaveProperty("shadowColor");
+    expect(result).toHaveProperty("shadowOffset");
+    expect(result).toHaveProperty("shadowOpacity");
+    expect(result).toHaveProperty("shadowRadius");
+  });
+
+  it("should parse default shadow", () => {
+    const result = parseShadow("shadow");
+    expect(result).toBeTruthy();
+  });
+
+  it("should parse shadow-md", () => {
+    const result = parseShadow("shadow-md");
+    expect(result).toBeTruthy();
+  });
+
+  it("should parse shadow-lg", () => {
+    const result = parseShadow("shadow-lg");
+    expect(result).toBeTruthy();
+  });
+
+  it("should parse shadow-xl", () => {
+    const result = parseShadow("shadow-xl");
+    expect(result).toBeTruthy();
+  });
+
+  it("should parse shadow-2xl", () => {
+    const result = parseShadow("shadow-2xl");
+    expect(result).toBeTruthy();
+  });
+
+  it("should parse shadow-none", () => {
+    const result = parseShadow("shadow-none");
+    expect(result).toBeTruthy();
+    expect(result).toMatchObject({
+      shadowColor: "transparent",
+      shadowOpacity: 0,
+      shadowRadius: 0,
+    });
+  });
+});
+
+describe("parseShadow - shadow properties (iOS)", () => {
+  beforeEach(() => {
+    setPlatform("ios");
+  });
+
+  it("should have increasing shadow values for larger shadows", () => {
+    const sm = parseShadow("shadow-sm");
+    const md = parseShadow("shadow-md");
+    const lg = parseShadow("shadow-lg");
+    const xl = parseShadow("shadow-xl");
+    const xxl = parseShadow("shadow-2xl");
+
+    // Shadow opacity should increase
+    expect(md?.shadowOpacity).toBeGreaterThan(sm?.shadowOpacity as number);
+    expect(lg?.shadowOpacity).toBeGreaterThan(md?.shadowOpacity as number);
+
+    // Shadow radius should increase
+    expect(md?.shadowRadius).toBeGreaterThan(sm?.shadowRadius as number);
+    expect(lg?.shadowRadius).toBeGreaterThan(md?.shadowRadius as number);
+    expect(xl?.shadowRadius).toBeGreaterThan(lg?.shadowRadius as number);
+    expect(xxl?.shadowRadius).toBeGreaterThan(xl?.shadowRadius as number);
+  });
+
+  it("should use consistent shadow color", () => {
+    const shadows = ["shadow-sm", "shadow", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl"];
+
+    shadows.forEach((shadow) => {
+      const result = parseShadow(shadow);
+      expect(result?.shadowColor).toBe("#000000");
+    });
+  });
+
+  it("should have proper shadowOffset structure", () => {
+    const result = parseShadow("shadow");
+    expect(result?.shadowOffset).toHaveProperty("width");
+    expect(result?.shadowOffset).toHaveProperty("height");
+    expect(typeof result?.shadowOffset?.width).toBe("number");
+    expect(typeof result?.shadowOffset?.height).toBe("number");
+  });
+
+  it("should not have elevation property on iOS", () => {
+    const result = parseShadow("shadow");
+    expect(result).not.toHaveProperty("elevation");
+  });
+});
+
+describe("parseShadow - shadow properties (Android)", () => {
+  beforeEach(() => {
+    setPlatform("android");
+    rebuildShadowScale();
+  });
+
+  it("should have increasing elevation values for larger shadows", () => {
+    const sm = parseShadow("shadow-sm");
+    const md = parseShadow("shadow-md");
+    const lg = parseShadow("shadow-lg");
+    const xl = parseShadow("shadow-xl");
+    const xxl = parseShadow("shadow-2xl");
+
+    // Elevation should increase
+    expect(md?.elevation).toBeGreaterThan(sm?.elevation as number);
+    expect(lg?.elevation).toBeGreaterThan(md?.elevation as number);
+    expect(xl?.elevation).toBeGreaterThan(lg?.elevation as number);
+    expect(xxl?.elevation).toBeGreaterThan(xl?.elevation as number);
+  });
+
+  it("should not have shadow properties on Android", () => {
+    const result = parseShadow("shadow");
+    expect(result).not.toHaveProperty("shadowColor");
+    expect(result).not.toHaveProperty("shadowOffset");
+    expect(result).not.toHaveProperty("shadowOpacity");
+    expect(result).not.toHaveProperty("shadowRadius");
+  });
+});
+
+describe("parseShadow - invalid classes", () => {
+  it("should return null for invalid shadow classes", () => {
+    expect(parseShadow("shadow-invalid")).toBeNull();
+    expect(parseShadow("shadows")).toBeNull();
+    expect(parseShadow("shadow-")).toBeNull();
+    expect(parseShadow("shadow-small")).toBeNull();
+    expect(parseShadow("shadow-3xl")).toBeNull();
+  });
+
+  it("should return null for non-shadow classes", () => {
+    expect(parseShadow("bg-blue-500")).toBeNull();
+    expect(parseShadow("p-4")).toBeNull();
+    expect(parseShadow("text-white")).toBeNull();
+    expect(parseShadow("border-2")).toBeNull();
+  });
+
+  it("should return null for empty or invalid input", () => {
+    expect(parseShadow("")).toBeNull();
+    expect(parseShadow("shadow123")).toBeNull();
+  });
+});
+
+describe("parseShadow - comprehensive coverage", () => {
+  it("should parse all shadow variants without errors", () => {
+    const variants = [
+      "shadow-sm",
+      "shadow",
+      "shadow-md",
+      "shadow-lg",
+      "shadow-xl",
+      "shadow-2xl",
+      "shadow-none",
+    ];
+
+    variants.forEach((variant) => {
+      const result = parseShadow(variant);
+      expect(result).toBeTruthy();
+      expect(typeof result).toBe("object");
+    });
+  });
+
+  it("should return consistent results for same input", () => {
+    const result1 = parseShadow("shadow-md");
+    const result2 = parseShadow("shadow-md");
+    expect(result1).toEqual(result2);
+  });
+
+  it("should handle case-sensitive class names", () => {
+    // Shadow classes are case-sensitive
+    expect(parseShadow("SHADOW")).toBeNull();
+    expect(parseShadow("Shadow-md")).toBeNull();
+    expect(parseShadow("shadow-MD")).toBeNull();
+  });
+});