@mgcrea/react-native-tailwind 0.6.1 → 0.7.0

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]+$/);
+    });
+  });
+});