@mgcrea/react-native-tailwind 0.15.2 → 0.15.4

package/src/parser/shadows.ts

@@ -4,6 +4,7 @@
  */
 
 import type { StyleObject } from "../types";
+import { COLORS, parseColorValue } from "../utils/colorUtils";
 
 /**
  * Shadow scale definitions combining iOS and Android properties
@@ -68,17 +69,32 @@ const SHADOW_SCALE: Record<string, StyleObject> = {
 
 /**
  * Parse shadow classes
+ * Supports shadow size presets (shadow-sm, shadow-md, etc.) and
+ * shadow colors (shadow-red-500, shadow-blue-800/50, shadow-[#ff0000]/80)
+ *
  * @param cls - Class name to parse
+ * @param customColors - Optional custom colors from tailwind.config
  * @returns Style object or null if not a shadow class
  */
-export function parseShadow(cls: string): StyleObject | null {
-  // Check if it's a shadow class
+export function parseShadow(cls: string, customColors?: Record<string, string>): StyleObject | null {
+  // Check if it's a shadow size preset
   if (cls in SHADOW_SCALE) {
     return SHADOW_SCALE[cls];
   }
 
+  // Check for shadow color: shadow-red-500, shadow-red-500/50, shadow-[#ff0000]/80
+  if (cls.startsWith("shadow-")) {
+    const colorPart = cls.substring(7); // Remove "shadow-"
+
+    // Parse the color value using shared utility
+    const shadowColor = parseColorValue(colorPart, customColors);
+    if (shadowColor) {
+      return { shadowColor };
+    }
+  }
+
   return null;
 }
 
-// Export shadow scale for testing/advanced usage
-export { SHADOW_SCALE };
+// Export shadow scale and colors for testing/advanced usage
+export { SHADOW_SCALE, COLORS as SHADOW_COLORS };

package/src/parser/transforms.test.ts

@@ -455,4 +455,26 @@ describe("parseClassName - multiple transforms", () => {
       transform: [{ rotate: "37deg" }, { scale: 0.2 }, { translateX: 50 }],
     });
   });
+
+  // "Last wins" behavior for same transform type (Tailwind parity)
+  it("should use last value for duplicate rotate (Tailwind parity)", () => {
+    const result = parseClassName("rotate-45 rotate-90");
+    expect(result).toEqual({
+      transform: [{ rotate: "90deg" }],
+    });
+  });
+
+  it("should use last value for duplicate scale (Tailwind parity)", () => {
+    const result = parseClassName("scale-50 scale-110");
+    expect(result).toEqual({
+      transform: [{ scale: 1.1 }],
+    });
+  });
+
+  it("should preserve different types while replacing duplicates", () => {
+    const result = parseClassName("rotate-45 scale-110 rotate-90");
+    expect(result).toEqual({
+      transform: [{ rotate: "90deg" }, { scale: 1.1 }],
+    });
+  });
 });

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;
+}

package/src/utils/mergeStyles.test.ts

@@ -24,8 +24,8 @@ describe("mergeStyles", () => {
     });
   });
 
-  describe("transform array merging", () => {
-    it("should concatenate transform arrays", () => {
+  describe("transform array merging - different types combined", () => {
+    it("should combine different transform types", () => {
       const target = { transform: [{ rotate: "45deg" }] };
       const source = { transform: [{ scale: 1.1 }] };
       expect(mergeStyles(target, source)).toEqual({
@@ -59,6 +59,48 @@ describe("mergeStyles", () => {
     });
   });
 
+  describe("transform array merging - same type last wins (Tailwind parity)", () => {
+    it("should replace same transform type with last value", () => {
+      const target = { transform: [{ rotate: "45deg" }] };
+      const source = { transform: [{ rotate: "90deg" }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "90deg" }],
+      });
+    });
+
+    it("should replace same scale type with last value", () => {
+      const target = { transform: [{ scale: 0.5 }] };
+      const source = { transform: [{ scale: 1.1 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ scale: 1.1 }],
+      });
+    });
+
+    it("should preserve order when replacing - rotate stays in position", () => {
+      const target = { transform: [{ rotate: "45deg" }, { scale: 1.1 }] };
+      const source = { transform: [{ rotate: "90deg" }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "90deg" }, { scale: 1.1 }],
+      });
+    });
+
+    it("should handle mixed: replace same types, add new types", () => {
+      const target = { transform: [{ rotate: "45deg" }, { scale: 0.5 }] };
+      const source = { transform: [{ scale: 1.1 }, { translateX: 10 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "45deg" }, { scale: 1.1 }, { translateX: 10 }],
+      });
+    });
+
+    it("should handle scaleX and scaleY as different types", () => {
+      const target = { transform: [{ scaleX: 0.5 }] };
+      const source = { transform: [{ scaleY: 1.5 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ scaleX: 0.5 }, { scaleY: 1.5 }],
+      });
+    });
+  });
+
   describe("mixed properties", () => {
     it("should handle mix of standard and transform properties", () => {
       const target = { margin: 4, transform: [{ rotate: "45deg" }] };

package/src/utils/mergeStyles.ts

@@ -1,17 +1,56 @@
 /**
  * Smart merge utility for StyleObject values
- * Handles array properties (like transform) by concatenating instead of overwriting
+ * Handles transform arrays with "last wins" semantics for same transform types
  */
 
-import type { StyleObject } from "../types/core";
+import type { StyleObject, TransformStyle } from "../types/core";
 
 /**
- * Properties that should be merged as arrays (concatenated) rather than overwritten
+ * Get the transform type key from a transform object
+ * e.g., { rotate: '45deg' } -> 'rotate', { scale: 1.1 } -> 'scale'
  */
-const ARRAY_MERGE_PROPERTIES = new Set<string>(["transform"]);
+function getTransformType(transform: TransformStyle): string {
+  return Object.keys(transform)[0];
+}
 
 /**
- * Merge two StyleObject instances, handling array properties specially
+ * Merge transform arrays with "last wins" semantics for duplicate transform types.
+ * Different transform types are combined, but if the same type appears twice,
+ * the later one replaces the earlier one (matching Tailwind CSS behavior).
+ *
+ * @example
+ * // Different types are combined
+ * mergeTransforms([{ rotate: '45deg' }], [{ scale: 1.1 }])
+ * // => [{ rotate: '45deg' }, { scale: 1.1 }]
+ *
+ * @example
+ * // Same type: last wins
+ * mergeTransforms([{ rotate: '45deg' }], [{ rotate: '90deg' }])
+ * // => [{ rotate: '90deg' }]
+ */
+function mergeTransforms(target: TransformStyle[], source: TransformStyle[]): TransformStyle[] {
+  // Build result by processing target first, then source
+  // For each source transform, replace any existing transform of the same type
+  const result: TransformStyle[] = [...target];
+
+  for (const sourceTransform of source) {
+    const sourceType = getTransformType(sourceTransform);
+    const existingIndex = result.findIndex((t) => getTransformType(t) === sourceType);
+
+    if (existingIndex !== -1) {
+      // Replace existing transform of same type (last wins)
+      result[existingIndex] = sourceTransform;
+    } else {
+      // Add new transform type
+      result.push(sourceTransform);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Merge two StyleObject instances, handling transform arrays specially
  *
  * @param target - The target object to merge into (mutated)
  * @param source - The source object to merge from
@@ -23,30 +62,38 @@ const ARRAY_MERGE_PROPERTIES = new Set<string>(["transform"]);
  * // => { margin: 4, padding: 8 }
  *
  * @example
- * // Array properties (transform) are concatenated
+ * // Different transform types are combined
  * mergeStyles(
  *   { transform: [{ rotate: '45deg' }] },
  *   { transform: [{ scale: 1.1 }] }
  * )
  * // => { transform: [{ rotate: '45deg' }, { scale: 1.1 }] }
+ *
+ * @example
+ * // Same transform type: last wins (Tailwind parity)
+ * mergeStyles(
+ *   { transform: [{ rotate: '45deg' }] },
+ *   { transform: [{ rotate: '90deg' }] }
+ * )
+ * // => { transform: [{ rotate: '90deg' }] }
  */
 export function mergeStyles(target: StyleObject, source: StyleObject): StyleObject {
   for (const key in source) {
     if (Object.prototype.hasOwnProperty.call(source, key)) {
       const sourceValue = source[key];
 
-      // Handle array merge properties (like transform)
-      if (ARRAY_MERGE_PROPERTIES.has(key) && Array.isArray(sourceValue)) {
+      // Handle transform arrays specially
+      if (key === "transform" && Array.isArray(sourceValue)) {
         const targetValue = target[key];
         if (Array.isArray(targetValue)) {
-          // Concatenate arrays
-          (target as Record<string, unknown>)[key] = [...targetValue, ...sourceValue];
+          // Merge transforms with "last wins" for same types
+          target.transform = mergeTransforms(targetValue, sourceValue);
         } else {
           // No existing array, just assign
           target[key] = sourceValue;
         }
       } else {
-        // Standard Object.assign behavior for non-array properties
+        // Standard Object.assign behavior for non-transform properties
         target[key] = sourceValue;
       }
     }