@mgcrea/react-native-tailwind 0.15.3 → 0.15.5

package/src/parser/sizing.test.ts

@@ -310,3 +310,85 @@ describe("parseSizing - custom spacing", () => {
     expect(parseSizing("h-8")).toEqual({ height: 32 }); // Default behavior
   });
 });
+
+describe("parseSizing - size (width + height)", () => {
+  it("should parse size with numeric values", () => {
+    expect(parseSizing("size-0")).toEqual({ width: 0, height: 0 });
+    expect(parseSizing("size-4")).toEqual({ width: 16, height: 16 });
+    expect(parseSizing("size-8")).toEqual({ width: 32, height: 32 });
+    expect(parseSizing("size-96")).toEqual({ width: 384, height: 384 });
+  });
+
+  it("should parse size with fractional values", () => {
+    expect(parseSizing("size-0.5")).toEqual({ width: 2, height: 2 });
+    expect(parseSizing("size-1.5")).toEqual({ width: 6, height: 6 });
+    expect(parseSizing("size-2.5")).toEqual({ width: 10, height: 10 });
+  });
+
+  it("should parse size with percentage values", () => {
+    expect(parseSizing("size-full")).toEqual({ width: "100%", height: "100%" });
+    expect(parseSizing("size-1/2")).toEqual({ width: "50%", height: "50%" });
+    expect(parseSizing("size-1/3")).toEqual({ width: "33.333333%", height: "33.333333%" });
+    expect(parseSizing("size-2/3")).toEqual({ width: "66.666667%", height: "66.666667%" });
+    expect(parseSizing("size-1/4")).toEqual({ width: "25%", height: "25%" });
+    expect(parseSizing("size-3/4")).toEqual({ width: "75%", height: "75%" });
+  });
+
+  it("should parse size with special values", () => {
+    expect(parseSizing("size-auto")).toEqual({ width: "auto", height: "auto" });
+  });
+
+  it("should parse size with arbitrary pixel values", () => {
+    expect(parseSizing("size-[123px]")).toEqual({ width: 123, height: 123 });
+    expect(parseSizing("size-[200]")).toEqual({ width: 200, height: 200 });
+    expect(parseSizing("size-[50px]")).toEqual({ width: 50, height: 50 });
+  });
+
+  it("should parse size with arbitrary percentage values", () => {
+    expect(parseSizing("size-[50%]")).toEqual({ width: "50%", height: "50%" });
+    expect(parseSizing("size-[33.333%]")).toEqual({ width: "33.333%", height: "33.333%" });
+    expect(parseSizing("size-[85%]")).toEqual({ width: "85%", height: "85%" });
+  });
+
+  it("should support custom spacing values for size", () => {
+    const customSpacing = { sm: 8, md: 16, lg: 32, xl: 64 };
+    expect(parseSizing("size-sm", customSpacing)).toEqual({ width: 8, height: 8 });
+    expect(parseSizing("size-md", customSpacing)).toEqual({ width: 16, height: 16 });
+    expect(parseSizing("size-lg", customSpacing)).toEqual({ width: 32, height: 32 });
+    expect(parseSizing("size-xl", customSpacing)).toEqual({ width: 64, height: 64 });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    const customSpacing = { "4": 20 }; // Override default (16)
+    expect(parseSizing("size-4", customSpacing)).toEqual({ width: 20, height: 20 });
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseSizing("size-[24px]", { "4": 20 })).toEqual({ width: 24, height: 24 });
+    expect(parseSizing("size-[50]", { sm: 8 })).toEqual({ width: 50, height: 50 });
+  });
+
+  it("should handle all fractional percentage variants", () => {
+    expect(parseSizing("size-1/5")).toEqual({ width: "20%", height: "20%" });
+    expect(parseSizing("size-2/5")).toEqual({ width: "40%", height: "40%" });
+    expect(parseSizing("size-3/5")).toEqual({ width: "60%", height: "60%" });
+    expect(parseSizing("size-4/5")).toEqual({ width: "80%", height: "80%" });
+    expect(parseSizing("size-1/6")).toEqual({ width: "16.666667%", height: "16.666667%" });
+    expect(parseSizing("size-5/6")).toEqual({ width: "83.333333%", height: "83.333333%" });
+  });
+
+  it("should handle edge case size values", () => {
+    expect(parseSizing("size-0")).toEqual({ width: 0, height: 0 });
+  });
+
+  it("should return null for invalid size values", () => {
+    expect(parseSizing("size-invalid")).toBeNull();
+    expect(parseSizing("size-999")).toBeNull();
+  });
+
+  it("should return null for arbitrary values with unsupported units", () => {
+    expect(parseSizing("size-[16rem]")).toBeNull();
+    expect(parseSizing("size-[2em]")).toBeNull();
+    expect(parseSizing("size-[50vh]")).toBeNull();
+  });
+});

package/src/parser/sizing.ts

@@ -102,6 +102,34 @@ export function parseSizing(cls: string, customSpacing?: Record<string, number>)
   // Merge custom spacing with defaults (custom takes precedence)
   const sizeMap = customSpacing ? { ...SIZE_SCALE, ...customSpacing } : SIZE_SCALE;
 
+  // Size (both width AND height)
+  if (cls.startsWith("size-")) {
+    const sizeKey = cls.substring(5); // "size-".length = 5
+
+    // Arbitrary values: size-[123px], size-[50%] (highest priority)
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { width: arbitrarySize, height: arbitrarySize };
+    }
+
+    // Percentage sizes: size-full, size-1/2, etc.
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { width: percentage, height: percentage };
+    }
+
+    // Numeric sizes: size-4, size-8, etc. (includes custom spacing)
+    const numericSize = sizeMap[sizeKey];
+    if (numericSize !== undefined) {
+      return { width: numericSize, height: numericSize };
+    }
+
+    // Special values
+    if (sizeKey === "auto") {
+      return { width: "auto", height: "auto" };
+    }
+  }
+
   // Width
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);

package/src/utils/colorUtils.test.ts

@@ -0,0 +1,193 @@
+import { describe, expect, it } from "vitest";
+import { COLORS, applyOpacity, parseArbitraryColor, parseColorValue } from "./colorUtils";
+
+describe("COLORS", () => {
+  it("should include basic colors", () => {
+    expect(COLORS.white).toBe("#FFFFFF");
+    expect(COLORS.black).toBe("#000000");
+    expect(COLORS.transparent).toBe("transparent");
+  });
+
+  it("should include flattened Tailwind colors", () => {
+    expect(COLORS["red-500"]).toBeDefined();
+    expect(COLORS["blue-500"]).toBeDefined();
+    expect(COLORS["green-500"]).toBeDefined();
+    expect(COLORS["gray-100"]).toBeDefined();
+    expect(COLORS["gray-900"]).toBeDefined();
+  });
+});
+
+describe("applyOpacity", () => {
+  it("should apply opacity to 6-digit hex colors", () => {
+    expect(applyOpacity("#ff0000", 50)).toBe("#FF000080");
+    expect(applyOpacity("#00ff00", 100)).toBe("#00FF00FF");
+    expect(applyOpacity("#0000ff", 0)).toBe("#0000FF00");
+  });
+
+  it("should apply opacity to 3-digit hex colors", () => {
+    expect(applyOpacity("#f00", 50)).toBe("#FF000080");
+    expect(applyOpacity("#0f0", 25)).toBe("#00FF0040");
+    expect(applyOpacity("#00f", 75)).toBe("#0000FFBF");
+  });
+
+  it("should handle various opacity values", () => {
+    expect(applyOpacity("#000000", 0)).toBe("#00000000");
+    expect(applyOpacity("#000000", 25)).toBe("#00000040");
+    expect(applyOpacity("#000000", 50)).toBe("#00000080");
+    expect(applyOpacity("#000000", 75)).toBe("#000000BF");
+    expect(applyOpacity("#000000", 80)).toBe("#000000CC");
+    expect(applyOpacity("#000000", 100)).toBe("#000000FF");
+  });
+
+  it("should return transparent unchanged", () => {
+    expect(applyOpacity("transparent", 50)).toBe("transparent");
+    expect(applyOpacity("transparent", 0)).toBe("transparent");
+    expect(applyOpacity("transparent", 100)).toBe("transparent");
+  });
+
+  it("should uppercase the output", () => {
+    expect(applyOpacity("#aabbcc", 50)).toBe("#AABBCC80");
+    expect(applyOpacity("#AbCdEf", 50)).toBe("#ABCDEF80");
+  });
+});
+
+describe("parseArbitraryColor", () => {
+  it("should parse 6-digit hex colors", () => {
+    expect(parseArbitraryColor("[#ff0000]")).toBe("#ff0000");
+    expect(parseArbitraryColor("[#00ff00]")).toBe("#00ff00");
+    expect(parseArbitraryColor("[#0000ff]")).toBe("#0000ff");
+    expect(parseArbitraryColor("[#AABBCC]")).toBe("#AABBCC");
+  });
+
+  it("should parse and expand 3-digit hex colors", () => {
+    expect(parseArbitraryColor("[#f00]")).toBe("#ff0000");
+    expect(parseArbitraryColor("[#0f0]")).toBe("#00ff00");
+    expect(parseArbitraryColor("[#00f]")).toBe("#0000ff");
+    expect(parseArbitraryColor("[#ABC]")).toBe("#AABBCC");
+  });
+
+  it("should parse 8-digit hex colors (with alpha)", () => {
+    expect(parseArbitraryColor("[#ff000080]")).toBe("#ff000080");
+    expect(parseArbitraryColor("[#00ff00cc]")).toBe("#00ff00cc");
+    expect(parseArbitraryColor("[#AABBCCDD]")).toBe("#AABBCCDD");
+  });
+
+  it("should preserve input case", () => {
+    expect(parseArbitraryColor("[#aabbcc]")).toBe("#aabbcc");
+    expect(parseArbitraryColor("[#AABBCC]")).toBe("#AABBCC");
+    expect(parseArbitraryColor("[#AaBbCc]")).toBe("#AaBbCc");
+  });
+
+  it("should return null for invalid formats", () => {
+    expect(parseArbitraryColor("[#gg0000]")).toBeNull();
+    expect(parseArbitraryColor("[#ff00]")).toBeNull();
+    expect(parseArbitraryColor("[#ff00000]")).toBeNull();
+    expect(parseArbitraryColor("[ff0000]")).toBeNull();
+    expect(parseArbitraryColor("#ff0000")).toBeNull();
+    expect(parseArbitraryColor("[rgb(255,0,0)]")).toBeNull();
+    expect(parseArbitraryColor("")).toBeNull();
+    expect(parseArbitraryColor("[]")).toBeNull();
+  });
+});
+
+describe("parseColorValue", () => {
+  describe("preset colors", () => {
+    it("should parse preset color names", () => {
+      expect(parseColorValue("red-500")).toBe(COLORS["red-500"]);
+      expect(parseColorValue("blue-800")).toBe(COLORS["blue-800"]);
+      expect(parseColorValue("green-600")).toBe(COLORS["green-600"]);
+    });
+
+    it("should parse basic colors", () => {
+      expect(parseColorValue("black")).toBe("#000000");
+      expect(parseColorValue("white")).toBe("#FFFFFF");
+      expect(parseColorValue("transparent")).toBe("transparent");
+    });
+
+    it("should return null for invalid color names", () => {
+      expect(parseColorValue("notacolor")).toBeNull();
+      expect(parseColorValue("red-999")).toBeNull();
+      expect(parseColorValue("foobar-500")).toBeNull();
+    });
+  });
+
+  describe("arbitrary colors", () => {
+    it("should parse arbitrary hex colors", () => {
+      expect(parseColorValue("[#ff0000]")).toBe("#ff0000");
+      expect(parseColorValue("[#00ff00]")).toBe("#00ff00");
+      expect(parseColorValue("[#0000ff]")).toBe("#0000ff");
+    });
+
+    it("should parse 3-digit arbitrary hex colors", () => {
+      expect(parseColorValue("[#f00]")).toBe("#ff0000");
+      expect(parseColorValue("[#0f0]")).toBe("#00ff00");
+      expect(parseColorValue("[#00f]")).toBe("#0000ff");
+    });
+
+    it("should parse 8-digit arbitrary hex colors", () => {
+      expect(parseColorValue("[#ff000080]")).toBe("#ff000080");
+      expect(parseColorValue("[#00ff00cc]")).toBe("#00ff00cc");
+    });
+  });
+
+  describe("opacity modifier", () => {
+    it("should apply opacity to preset colors", () => {
+      expect(parseColorValue("red-500/50")).toBe(applyOpacity(COLORS["red-500"], 50));
+      expect(parseColorValue("blue-800/80")).toBe(applyOpacity(COLORS["blue-800"], 80));
+      expect(parseColorValue("black/25")).toBe(applyOpacity("#000000", 25));
+    });
+
+    it("should apply opacity to arbitrary colors", () => {
+      expect(parseColorValue("[#ff0000]/50")).toBe("#FF000080");
+      expect(parseColorValue("[#00ff00]/25")).toBe("#00FF0040");
+      expect(parseColorValue("[#0000ff]/80")).toBe("#0000FFCC");
+    });
+
+    it("should handle edge opacity values", () => {
+      expect(parseColorValue("red-500/0")).toBe(applyOpacity(COLORS["red-500"], 0));
+      expect(parseColorValue("red-500/100")).toBe(applyOpacity(COLORS["red-500"], 100));
+    });
+
+    it("should return null for invalid opacity values", () => {
+      expect(parseColorValue("red-500/101")).toBeNull();
+      expect(parseColorValue("red-500/-1")).toBeNull();
+      expect(parseColorValue("red-500/abc")).toBeNull();
+    });
+
+    it("should keep transparent unchanged with opacity", () => {
+      expect(parseColorValue("transparent/50")).toBe("transparent");
+      expect(parseColorValue("transparent/0")).toBe("transparent");
+    });
+  });
+
+  describe("custom colors", () => {
+    const customColors = {
+      brand: "#FF5733",
+      "brand-primary": "#3498DB",
+      "brand-secondary": "#2ECC71",
+    };
+
+    it("should parse custom colors", () => {
+      expect(parseColorValue("brand", customColors)).toBe("#FF5733");
+      expect(parseColorValue("brand-primary", customColors)).toBe("#3498DB");
+      expect(parseColorValue("brand-secondary", customColors)).toBe("#2ECC71");
+    });
+
+    it("should apply opacity to custom colors", () => {
+      expect(parseColorValue("brand/50", customColors)).toBe("#FF573380");
+      expect(parseColorValue("brand-primary/80", customColors)).toBe("#3498DBCC");
+    });
+
+    it("should still support preset colors with custom colors", () => {
+      expect(parseColorValue("red-500", customColors)).toBe(COLORS["red-500"]);
+      expect(parseColorValue("blue-800/50", customColors)).toBe(applyOpacity(COLORS["blue-800"], 50));
+    });
+
+    it("should allow custom colors to override presets", () => {
+      const overrideColors = {
+        "red-500": "#CUSTOM1",
+      };
+      expect(parseColorValue("red-500", overrideColors)).toBe("#CUSTOM1");
+    });
+  });
+});

package/src/utils/colorUtils.ts

@@ -0,0 +1,115 @@
+/**
+ * Shared color utilities for parsing and manipulating colors
+ */
+
+import { TAILWIND_COLORS } from "../config/tailwind";
+import { flattenColors } from "./flattenColors";
+
+/**
+ * Tailwind color palette (flattened from config) with basic colors
+ */
+export const COLORS: Record<string, string> = {
+  ...flattenColors(TAILWIND_COLORS),
+  white: "#FFFFFF",
+  black: "#000000",
+  transparent: "transparent",
+};
+
+/**
+ * Apply opacity to hex color by appending alpha channel
+ * @param hex - Hex color string (e.g., "#ff0000", "#f00", or "transparent")
+ * @param opacity - Opacity value 0-100 (e.g., 50 for 50%)
+ * @returns 8-digit hex with alpha (e.g., "#FF000080") or transparent
+ */
+export function applyOpacity(hex: string, opacity: number): string {
+  if (hex === "transparent") {
+    return "transparent";
+  }
+
+  const cleanHex = hex.replace(/^#/, "");
+  const fullHex =
+    cleanHex.length === 3
+      ? cleanHex
+          .split("")
+          .map((char) => char + char)
+          .join("")
+      : cleanHex;
+
+  const alpha = Math.round((opacity / 100) * 255);
+  const alphaHex = alpha.toString(16).padStart(2, "0").toUpperCase();
+
+  return `#${fullHex.toUpperCase()}${alphaHex}`;
+}
+
+/**
+ * Parse arbitrary color value: [#ff0000], [#f00], [#FF0000AA]
+ * Supports 3-digit, 6-digit, and 8-digit (with alpha) hex colors
+ * @param value - Arbitrary value string like "[#ff0000]"
+ * @returns Hex string if valid, null otherwise (preserves input case)
+ */
+export function parseArbitraryColor(value: string): string | null {
+  const hexMatch = value.match(/^\[#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\]$/);
+  if (hexMatch) {
+    const hex = hexMatch[1];
+    if (hex.length === 3) {
+      // Expand 3-digit hex to 6-digit: #abc -> #aabbcc (preserve case)
+      const expanded = hex
+        .split("")
+        .map((char) => char + char)
+        .join("");
+      return `#${expanded}`;
+    }
+    return `#${hex}`;
+  }
+  return null;
+}
+
+/**
+ * Parse a color value with optional opacity modifier
+ * Handles preset colors, custom colors, arbitrary hex values, and opacity modifiers
+ *
+ * @param colorKey - Color key like "red-500", "red-500/50", "[#ff0000]", "[#ff0000]/80"
+ * @param customColors - Optional custom colors from tailwind.config
+ * @returns Hex color string or null if invalid
+ */
+export function parseColorValue(colorKey: string, customColors?: Record<string, string>): string | null {
+  const getColor = (key: string): string | undefined => {
+    return customColors?.[key] ?? COLORS[key];
+  };
+
+  // Check for opacity modifier: red-500/50, [#ff0000]/80
+  const opacityMatch = colorKey.match(/^(.+)\/(\d+)$/);
+  if (opacityMatch) {
+    const baseColorKey = opacityMatch[1];
+    const opacity = Number.parseInt(opacityMatch[2], 10);
+
+    // Validate opacity range (0-100)
+    if (opacity < 0 || opacity > 100) {
+      return null;
+    }
+
+    // Try arbitrary color first: [#ff0000]/50
+    const arbitraryColor = parseArbitraryColor(baseColorKey);
+    if (arbitraryColor !== null) {
+      return applyOpacity(arbitraryColor, opacity);
+    }
+
+    // Try preset/custom colors: red-500/50
+    const color = getColor(baseColorKey);
+    if (color) {
+      return applyOpacity(color, opacity);
+    }
+
+    return null;
+  }
+
+  // No opacity modifier
+  // Try arbitrary value first: [#ff0000]
+  const arbitraryColor = parseArbitraryColor(colorKey);
+  if (arbitraryColor !== null) {
+    return arbitraryColor;
+  }
+
+  // Try preset/custom colors: red-500
+  return getColor(colorKey) ?? null;
+}