@mgcrea/react-native-tailwind 0.6.0 → 0.7.0

package/src/utils/modifiers.test.ts

@@ -0,0 +1,286 @@
+import { describe, expect, it } from "vitest";
+import { SUPPORTED_MODIFIERS, hasModifiers, splitModifierClasses } from "./modifiers";
+
+describe("SUPPORTED_MODIFIERS", () => {
+  it("should export list of supported modifiers", () => {
+    expect(SUPPORTED_MODIFIERS).toEqual(["active", "focus", "disabled"]);
+  });
+
+  it("should be readonly", () => {
+    // TypeScript enforces this at compile time
+    expect(Array.isArray(SUPPORTED_MODIFIERS)).toBe(true);
+  });
+});
+
+describe("hasModifiers", () => {
+  it("should return true for active modifier", () => {
+    expect(hasModifiers("active:bg-blue-500")).toBe(true);
+    expect(hasModifiers("m-4 active:bg-blue-500")).toBe(true);
+    expect(hasModifiers("active:bg-blue-500 active:text-white")).toBe(true);
+  });
+
+  it("should return true for focus modifier", () => {
+    expect(hasModifiers("focus:border-blue-500")).toBe(true);
+    expect(hasModifiers("p-2 focus:border-blue-500")).toBe(true);
+    expect(hasModifiers("focus:bg-blue-500 focus:text-white")).toBe(true);
+  });
+
+  it("should return true for disabled modifier", () => {
+    expect(hasModifiers("disabled:opacity-50")).toBe(true);
+    expect(hasModifiers("bg-blue-500 disabled:opacity-50")).toBe(true);
+    expect(hasModifiers("disabled:bg-gray-300 disabled:text-gray-500")).toBe(true);
+  });
+
+  it("should return true for multiple different modifiers", () => {
+    expect(hasModifiers("active:bg-blue-700 focus:border-blue-500")).toBe(true);
+    expect(hasModifiers("bg-blue-500 active:bg-blue-700 disabled:opacity-50")).toBe(true);
+    expect(hasModifiers("focus:border-blue-500 disabled:bg-gray-300")).toBe(true);
+  });
+
+  it("should return false for no modifiers", () => {
+    expect(hasModifiers("bg-blue-500")).toBe(false);
+    expect(hasModifiers("m-4 p-2 text-white")).toBe(false);
+    expect(hasModifiers("flex items-center justify-center")).toBe(false);
+  });
+
+  it("should return false for empty string", () => {
+    expect(hasModifiers("")).toBe(false);
+  });
+
+  it("should return false for partial matches", () => {
+    expect(hasModifiers("active")).toBe(false);
+    expect(hasModifiers("focus")).toBe(false);
+    expect(hasModifiers("disabled")).toBe(false);
+    expect(hasModifiers("active-bg-blue-500")).toBe(false);
+    expect(hasModifiers("focusborder-blue-500")).toBe(false);
+  });
+
+  it("should detect modifiers anywhere in the string", () => {
+    expect(hasModifiers("bg-blue-500 active:bg-blue-700 text-white")).toBe(true);
+    expect(hasModifiers("flex items-center focus:border-blue-500 p-4")).toBe(true);
+  });
+
+  it("should handle whitespace variations", () => {
+    expect(hasModifiers("  active:bg-blue-500  ")).toBe(true);
+    expect(hasModifiers("\tactive:bg-blue-500\n")).toBe(true);
+    expect(hasModifiers("m-4  active:bg-blue-500  p-2")).toBe(true);
+  });
+
+  it("should be case-sensitive", () => {
+    expect(hasModifiers("Active:bg-blue-500")).toBe(false);
+    expect(hasModifiers("ACTIVE:bg-blue-500")).toBe(false);
+    expect(hasModifiers("Focus:border-blue-500")).toBe(false);
+  });
+});
+
+describe("splitModifierClasses", () => {
+  it("should split base classes without modifiers", () => {
+    const result = splitModifierClasses("m-4 p-2 bg-blue-500");
+
+    expect(result.base).toEqual(["m-4", "p-2", "bg-blue-500"]);
+    expect(result.modifiers.size).toBe(0);
+  });
+
+  it("should split active modifier classes", () => {
+    const result = splitModifierClasses("bg-blue-500 active:bg-blue-700");
+
+    expect(result.base).toEqual(["bg-blue-500"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700"]);
+  });
+
+  it("should split focus modifier classes", () => {
+    const result = splitModifierClasses("border-gray-300 focus:border-blue-500");
+
+    expect(result.base).toEqual(["border-gray-300"]);
+    expect(result.modifiers.get("focus")).toEqual(["border-blue-500"]);
+  });
+
+  it("should split disabled modifier classes", () => {
+    const result = splitModifierClasses("bg-blue-500 disabled:bg-gray-300");
+
+    expect(result.base).toEqual(["bg-blue-500"]);
+    expect(result.modifiers.get("disabled")).toEqual(["bg-gray-300"]);
+  });
+
+  it("should split multiple classes with same modifier", () => {
+    const result = splitModifierClasses(
+      "bg-blue-500 active:bg-blue-700 active:text-white active:border-blue-900",
+    );
+
+    expect(result.base).toEqual(["bg-blue-500"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700", "text-white", "border-blue-900"]);
+  });
+
+  it("should split multiple different modifiers", () => {
+    const result = splitModifierClasses(
+      "bg-blue-500 active:bg-blue-700 focus:border-blue-500 disabled:opacity-50",
+    );
+
+    expect(result.base).toEqual(["bg-blue-500"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700"]);
+    expect(result.modifiers.get("focus")).toEqual(["border-blue-500"]);
+    expect(result.modifiers.get("disabled")).toEqual(["opacity-50"]);
+  });
+
+  it("should handle complex combination of base and modifier classes", () => {
+    const result = splitModifierClasses(
+      "m-4 p-2 bg-blue-500 text-white rounded-lg active:bg-blue-700 active:text-gray-100 focus:border-blue-500 disabled:opacity-50 disabled:bg-gray-300",
+    );
+
+    expect(result.base).toEqual(["m-4", "p-2", "bg-blue-500", "text-white", "rounded-lg"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700", "text-gray-100"]);
+    expect(result.modifiers.get("focus")).toEqual(["border-blue-500"]);
+    expect(result.modifiers.get("disabled")).toEqual(["opacity-50", "bg-gray-300"]);
+  });
+
+  it("should handle empty string", () => {
+    const result = splitModifierClasses("");
+
+    expect(result.base).toEqual([]);
+    expect(result.modifiers.size).toBe(0);
+  });
+
+  it("should handle whitespace-only string", () => {
+    const result = splitModifierClasses("   ");
+
+    expect(result.base).toEqual([]);
+    expect(result.modifiers.size).toBe(0);
+  });
+
+  it("should handle only modifier classes", () => {
+    const result = splitModifierClasses("active:bg-blue-700 focus:border-blue-500");
+
+    expect(result.base).toEqual([]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700"]);
+    expect(result.modifiers.get("focus")).toEqual(["border-blue-500"]);
+  });
+
+  it("should filter out empty strings from split", () => {
+    const result = splitModifierClasses("m-4  p-2   bg-blue-500");
+
+    expect(result.base).toEqual(["m-4", "p-2", "bg-blue-500"]);
+    expect(result.modifiers.size).toBe(0);
+  });
+
+  it("should handle leading and trailing whitespace", () => {
+    const result = splitModifierClasses("  m-4 active:bg-blue-700  ");
+
+    expect(result.base).toEqual(["m-4"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700"]);
+  });
+
+  it("should handle arbitrary values with modifiers", () => {
+    const result = splitModifierClasses("bg-[#ff0000] active:bg-[#00ff00] text-[14px]");
+
+    expect(result.base).toEqual(["bg-[#ff0000]", "text-[14px]"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-[#00ff00]"]);
+  });
+
+  it("should handle opacity modifiers with state modifiers", () => {
+    const result = splitModifierClasses("bg-black/50 active:bg-black/80 text-white/90");
+
+    expect(result.base).toEqual(["bg-black/50", "text-white/90"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-black/80"]);
+  });
+
+  it("should preserve order of base classes", () => {
+    const result = splitModifierClasses("z-10 m-4 a-1 p-2");
+
+    expect(result.base).toEqual(["z-10", "m-4", "a-1", "p-2"]);
+  });
+
+  it("should preserve order of modifier classes", () => {
+    const result = splitModifierClasses("active:z-10 active:m-4 active:a-1 active:p-2");
+
+    expect(result.modifiers.get("active")).toEqual(["z-10", "m-4", "a-1", "p-2"]);
+  });
+
+  it("should not match modifiers without colon", () => {
+    const result = splitModifierClasses("active bg-blue-500 focus border-blue-500");
+
+    expect(result.base).toEqual(["active", "bg-blue-500", "focus", "border-blue-500"]);
+    expect(result.modifiers.size).toBe(0);
+  });
+
+  it("should not match partial modifier names", () => {
+    const result = splitModifierClasses("reactive:bg-blue-500 prefocus:border-blue-500");
+
+    expect(result.base).toEqual(["reactive:bg-blue-500", "prefocus:border-blue-500"]);
+    expect(result.modifiers.size).toBe(0);
+  });
+
+  it("should handle modifiers at different positions", () => {
+    const result = splitModifierClasses(
+      "active:bg-blue-700 m-4 focus:border-blue-500 p-2 disabled:opacity-50",
+    );
+
+    expect(result.base).toEqual(["m-4", "p-2"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700"]);
+    expect(result.modifiers.get("focus")).toEqual(["border-blue-500"]);
+    expect(result.modifiers.get("disabled")).toEqual(["opacity-50"]);
+  });
+
+  it("should return empty Map when no modifiers present", () => {
+    const result = splitModifierClasses("m-4 p-2 bg-blue-500");
+
+    expect(result.modifiers).toBeInstanceOf(Map);
+    expect(result.modifiers.size).toBe(0);
+    expect(result.modifiers.get("active")).toBeUndefined();
+    expect(result.modifiers.get("focus")).toBeUndefined();
+    expect(result.modifiers.get("disabled")).toBeUndefined();
+  });
+
+  it("should return Map with only present modifiers", () => {
+    const result = splitModifierClasses("bg-blue-500 active:bg-blue-700");
+
+    expect(result.modifiers.has("active")).toBe(true);
+    expect(result.modifiers.has("focus")).toBe(false);
+    expect(result.modifiers.has("disabled")).toBe(false);
+  });
+
+  it("should handle real-world button example", () => {
+    const result = splitModifierClasses(
+      "px-4 py-2 bg-blue-500 text-white rounded-lg active:bg-blue-700 disabled:bg-gray-300 disabled:text-gray-500",
+    );
+
+    expect(result.base).toEqual(["px-4", "py-2", "bg-blue-500", "text-white", "rounded-lg"]);
+    expect(result.modifiers.get("active")).toEqual(["bg-blue-700"]);
+    expect(result.modifiers.get("disabled")).toEqual(["bg-gray-300", "text-gray-500"]);
+    expect(result.modifiers.get("focus")).toBeUndefined();
+  });
+
+  it("should handle real-world input example", () => {
+    const result = splitModifierClasses(
+      "border border-gray-300 rounded p-2 focus:border-blue-500 focus:outline-none disabled:bg-gray-100 disabled:text-gray-400",
+    );
+
+    expect(result.base).toEqual(["border", "border-gray-300", "rounded", "p-2"]);
+    expect(result.modifiers.get("focus")).toEqual(["border-blue-500", "outline-none"]);
+    expect(result.modifiers.get("disabled")).toEqual(["bg-gray-100", "text-gray-400"]);
+    expect(result.modifiers.get("active")).toBeUndefined();
+  });
+
+  it("should be consistent across multiple calls", () => {
+    const className = "m-4 active:bg-blue-700 focus:border-blue-500";
+    const result1 = splitModifierClasses(className);
+    const result2 = splitModifierClasses(className);
+
+    expect(result1.base).toEqual(result2.base);
+    expect(result1.modifiers.get("active")).toEqual(result2.modifiers.get("active"));
+    expect(result1.modifiers.get("focus")).toEqual(result2.modifiers.get("focus"));
+  });
+
+  it("should handle negative values with modifiers", () => {
+    const result = splitModifierClasses("-m-4 active:-m-8 -translate-x-2");
+
+    expect(result.base).toEqual(["-m-4", "-translate-x-2"]);
+    expect(result.modifiers.get("active")).toEqual(["-m-8"]);
+  });
+
+  it("should handle transform classes with modifiers", () => {
+    const result = splitModifierClasses("scale-100 active:scale-110 rotate-0 active:rotate-45");
+
+    expect(result.base).toEqual(["scale-100", "rotate-0"]);
+    expect(result.modifiers.get("active")).toEqual(["scale-110", "rotate-45"]);
+  });
+});

package/src/utils/modifiers.ts

@@ -0,0 +1,63 @@
+/**
+ * Shared utilities for parsing state modifiers (active:, focus:, disabled:)
+ * Used by both runtime parser and Babel plugin
+ */
+
+// Supported state modifiers for Pressable/TextInput components
+export const SUPPORTED_MODIFIERS = ["active", "focus", "disabled"] as const;
+export type SupportedModifier = (typeof SUPPORTED_MODIFIERS)[number];
+
+/**
+ * Detect if a className contains any state modifiers (active:, focus:, disabled:)
+ */
+export function hasModifiers(className: string): boolean {
+  return SUPPORTED_MODIFIERS.some((modifier) => className.includes(`${modifier}:`));
+}
+
+/**
+ * Split className into base classes and modifier-specific classes
+ * Returns: { base: string[], modifiers: Map<modifier, string[]> }
+ *
+ * @example
+ * splitModifierClasses('bg-blue-500 active:bg-blue-700 disabled:bg-gray-300')
+ * // Returns:
+ * // {
+ * //   base: ['bg-blue-500'],
+ * //   modifiers: Map {
+ * //     'active' => ['bg-blue-700'],
+ * //     'disabled' => ['bg-gray-300']
+ * //   }
+ * // }
+ */
+export function splitModifierClasses(className: string): {
+  base: string[];
+  modifiers: Map<SupportedModifier, string[]>;
+} {
+  const classes = className.split(/\s+/).filter(Boolean);
+  const base: string[] = [];
+  const modifiers = new Map<SupportedModifier, string[]>();
+
+  for (const cls of classes) {
+    let matched = false;
+    for (const modifier of SUPPORTED_MODIFIERS) {
+      const prefix = `${modifier}:`;
+      if (cls.startsWith(prefix)) {
+        const cleanClass = cls.slice(prefix.length);
+        if (!modifiers.has(modifier)) {
+          modifiers.set(modifier, []);
+        }
+        const modifierClasses = modifiers.get(modifier);
+        if (modifierClasses) {
+          modifierClasses.push(cleanClass);
+        }
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      base.push(cls);
+    }
+  }
+
+  return { base, modifiers };
+}

package/src/utils/styleKey.test.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it } from "vitest";
+import { generateStyleKey } from "./styleKey";
+
+describe("generateStyleKey", () => {
+  it("should generate key with leading underscore", () => {
+    expect(generateStyleKey("m-4")).toBe("_m_4");
+    expect(generateStyleKey("p-2")).toBe("_p_2");
+    expect(generateStyleKey("bg-blue-500")).toBe("_bg_blue_500");
+  });
+
+  it("should sort classes alphabetically for consistency", () => {
+    expect(generateStyleKey("m-4 p-2")).toBe(generateStyleKey("p-2 m-4"));
+    expect(generateStyleKey("bg-blue-500 text-white")).toBe(generateStyleKey("text-white bg-blue-500"));
+    expect(generateStyleKey("flex items-center justify-center")).toBe(
+      generateStyleKey("justify-center flex items-center"),
+    );
+  });
+
+  it("should handle single class", () => {
+    expect(generateStyleKey("flex")).toBe("_flex");
+    expect(generateStyleKey("hidden")).toBe("_hidden");
+    expect(generateStyleKey("absolute")).toBe("_absolute");
+  });
+
+  it("should handle multiple classes", () => {
+    expect(generateStyleKey("m-4 p-2 bg-blue-500")).toBe("_bg_blue_500_m_4_p_2");
+    expect(generateStyleKey("flex items-center justify-center")).toBe("_flex_items_center_justify_center");
+  });
+
+  it("should replace special characters with underscores", () => {
+    expect(generateStyleKey("bg-[#ff0000]")).toBe("_bg_ff0000_");
+    expect(generateStyleKey("text-[14px]")).toBe("_text_14px_");
+    expect(generateStyleKey("m-[16px]")).toBe("_m_16px_");
+  });
+
+  it("should collapse multiple underscores", () => {
+    expect(generateStyleKey("bg-[#ff0000]")).toBe("_bg_ff0000_");
+    expect(generateStyleKey("w-[100%]")).toBe("_w_100_");
+  });
+
+  it("should handle classes with hyphens", () => {
+    expect(generateStyleKey("bg-blue-500")).toBe("_bg_blue_500");
+    expect(generateStyleKey("text-gray-700")).toBe("_text_gray_700");
+    expect(generateStyleKey("border-red-300")).toBe("_border_red_300");
+  });
+
+  it("should handle classes with numbers", () => {
+    expect(generateStyleKey("m-4")).toBe("_m_4");
+    expect(generateStyleKey("p-8")).toBe("_p_8");
+    expect(generateStyleKey("gap-96")).toBe("_gap_96");
+    expect(generateStyleKey("text-2xl")).toBe("_text_2xl");
+  });
+
+  it("should handle classes with decimals", () => {
+    expect(generateStyleKey("m-0.5")).toBe("_m_0_5");
+    expect(generateStyleKey("p-1.5")).toBe("_p_1_5");
+    expect(generateStyleKey("gap-2.5")).toBe("_gap_2_5");
+  });
+
+  it("should handle empty string", () => {
+    expect(generateStyleKey("")).toBe("_");
+  });
+
+  it("should handle whitespace-only string", () => {
+    expect(generateStyleKey("   ")).toBe("_");
+    expect(generateStyleKey("\t\n")).toBe("_");
+  });
+
+  it("should handle multiple consecutive spaces", () => {
+    expect(generateStyleKey("m-4  p-2   bg-blue-500")).toBe("_bg_blue_500_m_4_p_2");
+    expect(generateStyleKey("flex    items-center")).toBe("_flex_items_center");
+  });
+
+  it("should handle leading and trailing spaces", () => {
+    expect(generateStyleKey("  m-4 p-2  ")).toBe("_m_4_p_2");
+    expect(generateStyleKey("\tflex items-center\n")).toBe("_flex_items_center");
+  });
+
+  it("should handle opacity modifiers", () => {
+    expect(generateStyleKey("bg-black/50")).toBe("_bg_black_50");
+    expect(generateStyleKey("text-white/80")).toBe("_text_white_80");
+    expect(generateStyleKey("border-blue-500/30")).toBe("_border_blue_500_30");
+  });
+
+  it("should handle state modifiers", () => {
+    expect(generateStyleKey("active:bg-blue-700")).toBe("_active_bg_blue_700");
+    expect(generateStyleKey("focus:border-blue-500")).toBe("_focus_border_blue_500");
+    expect(generateStyleKey("disabled:opacity-50")).toBe("_disabled_opacity_50");
+  });
+
+  it("should handle complex combinations", () => {
+    expect(generateStyleKey("m-4 p-2 bg-blue-500 text-white rounded-lg")).toBe(
+      "_bg_blue_500_m_4_p_2_rounded_lg_text_white",
+    );
+    expect(generateStyleKey("flex items-center justify-between p-4 bg-gray-100 border-b-2")).toBe(
+      "_bg_gray_100_border_b_2_flex_items_center_justify_between_p_4",
+    );
+  });
+
+  it("should handle arbitrary values in complex scenarios", () => {
+    expect(generateStyleKey("m-[16px] p-[8px] bg-[#ff0000]")).toBe("_bg_ff0000_m_16px_p_8px_");
+    expect(generateStyleKey("w-[100%] h-[50px] text-[14px]")).toBe("_h_50px_text_14px_w_100_");
+  });
+
+  it("should produce consistent keys regardless of class order", () => {
+    const combinations = [
+      "m-4 p-2 bg-blue-500",
+      "p-2 m-4 bg-blue-500",
+      "bg-blue-500 m-4 p-2",
+      "bg-blue-500 p-2 m-4",
+      "m-4 bg-blue-500 p-2",
+      "p-2 bg-blue-500 m-4",
+    ];
+
+    const keys = combinations.map(generateStyleKey);
+    const firstKey = keys[0];
+    keys.forEach((key) => {
+      expect(key).toBe(firstKey);
+    });
+  });
+
+  it("should handle duplicate classes", () => {
+    // Note: duplicates will appear in output since we don't dedupe
+    expect(generateStyleKey("m-4 m-4")).toBe("_m_4_m_4");
+    expect(generateStyleKey("flex flex flex")).toBe("_flex_flex_flex");
+  });
+
+  it("should handle transform classes", () => {
+    expect(generateStyleKey("scale-110")).toBe("_scale_110");
+    expect(generateStyleKey("rotate-45")).toBe("_rotate_45");
+    expect(generateStyleKey("translate-x-4")).toBe("_translate_x_4");
+    expect(generateStyleKey("-rotate-90")).toBe("__rotate_90");
+  });
+
+  it("should handle negative values", () => {
+    expect(generateStyleKey("-m-4")).toBe("__m_4");
+    expect(generateStyleKey("-translate-x-8")).toBe("__translate_x_8");
+    expect(generateStyleKey("-rotate-180")).toBe("__rotate_180");
+  });
+
+  it("should be deterministic", () => {
+    const className = "m-4 p-2 bg-blue-500 text-white rounded-lg flex items-center";
+    const key1 = generateStyleKey(className);
+    const key2 = generateStyleKey(className);
+    const key3 = generateStyleKey(className);
+
+    expect(key1).toBe(key2);
+    expect(key2).toBe(key3);
+  });
+
+  it("should create valid JavaScript identifiers", () => {
+    // Valid identifiers start with _, $, or letter, and contain _, $, letters, or digits
+    const keys = [
+      generateStyleKey("m-4"),
+      generateStyleKey("bg-blue-500"),
+      generateStyleKey("text-[14px]"),
+      generateStyleKey("flex items-center"),
+      generateStyleKey("active:bg-red-500"),
+    ];
+
+    keys.forEach((key) => {
+      // Should start with underscore
+      expect(key).toMatch(/^_/);
+      // Should only contain alphanumeric and underscores
+      expect(key).toMatch(/^[_a-zA-Z0-9]+$/);
+    });
+  });
+});