@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/src/parser/colors.test.ts

@@ -0,0 +1,335 @@
+import { describe, expect, it } from "vitest";
+import { COLORS, parseColor } from "./colors";
+
+describe("COLORS", () => {
+  it("should export complete color palette", () => {
+    expect(COLORS).toMatchSnapshot();
+  });
+});
+
+describe("parseColor - background colors", () => {
+  it("should parse background colors with preset values", () => {
+    expect(parseColor("bg-blue-500")).toEqual({ backgroundColor: "#3B82F6" });
+    expect(parseColor("bg-red-500")).toEqual({ backgroundColor: "#EF4444" });
+    expect(parseColor("bg-green-500")).toEqual({ backgroundColor: "#22C55E" });
+    expect(parseColor("bg-gray-300")).toEqual({ backgroundColor: "#D1D5DB" });
+  });
+
+  it("should parse background colors with basic values", () => {
+    expect(parseColor("bg-white")).toEqual({ backgroundColor: "#FFFFFF" });
+    expect(parseColor("bg-black")).toEqual({ backgroundColor: "#000000" });
+    expect(parseColor("bg-transparent")).toEqual({ backgroundColor: "transparent" });
+  });
+
+  it("should parse background colors with arbitrary 6-digit hex values", () => {
+    expect(parseColor("bg-[#ff0000]")).toEqual({ backgroundColor: "#ff0000" });
+    expect(parseColor("bg-[#3B82F6]")).toEqual({ backgroundColor: "#3B82F6" });
+    expect(parseColor("bg-[#000000]")).toEqual({ backgroundColor: "#000000" });
+    expect(parseColor("bg-[#FFFFFF]")).toEqual({ backgroundColor: "#FFFFFF" });
+  });
+
+  it("should parse background colors with arbitrary 3-digit hex values", () => {
+    expect(parseColor("bg-[#f00]")).toEqual({ backgroundColor: "#ff0000" });
+    expect(parseColor("bg-[#abc]")).toEqual({ backgroundColor: "#aabbcc" });
+    expect(parseColor("bg-[#123]")).toEqual({ backgroundColor: "#112233" });
+    expect(parseColor("bg-[#FFF]")).toEqual({ backgroundColor: "#FFFFFF" });
+  });
+
+  it("should parse background colors with arbitrary 8-digit hex values (with alpha)", () => {
+    expect(parseColor("bg-[#ff0000aa]")).toEqual({ backgroundColor: "#ff0000aa" });
+    expect(parseColor("bg-[#3B82F680]")).toEqual({ backgroundColor: "#3B82F680" });
+    expect(parseColor("bg-[#00000000]")).toEqual({ backgroundColor: "#00000000" });
+    expect(parseColor("bg-[#FFFFFFFF]")).toEqual({ backgroundColor: "#FFFFFFFF" });
+  });
+
+  it("should handle case-insensitive hex values", () => {
+    expect(parseColor("bg-[#FF0000]")).toEqual({ backgroundColor: "#FF0000" });
+    expect(parseColor("bg-[#ff0000]")).toEqual({ backgroundColor: "#ff0000" });
+    expect(parseColor("bg-[#Ff0000]")).toEqual({ backgroundColor: "#Ff0000" });
+  });
+
+  it("should prefer arbitrary values over preset colors", () => {
+    // If someone creates a custom color named "[#ff0000]", the arbitrary value should take precedence
+    const customColors = { "[#ff0000]": "#00ff00" };
+    expect(parseColor("bg-[#ff0000]", customColors)).toEqual({ backgroundColor: "#ff0000" });
+  });
+});
+
+describe("parseColor - text colors", () => {
+  it("should parse text colors with preset values", () => {
+    expect(parseColor("text-blue-500")).toEqual({ color: "#3B82F6" });
+    expect(parseColor("text-red-500")).toEqual({ color: "#EF4444" });
+    expect(parseColor("text-green-500")).toEqual({ color: "#22C55E" });
+    expect(parseColor("text-gray-700")).toEqual({ color: "#374151" });
+  });
+
+  it("should parse text colors with basic values", () => {
+    expect(parseColor("text-white")).toEqual({ color: "#FFFFFF" });
+    expect(parseColor("text-black")).toEqual({ color: "#000000" });
+  });
+
+  it("should parse text colors with arbitrary 6-digit hex values", () => {
+    expect(parseColor("text-[#ff0000]")).toEqual({ color: "#ff0000" });
+    expect(parseColor("text-[#3B82F6]")).toEqual({ color: "#3B82F6" });
+    expect(parseColor("text-[#333333]")).toEqual({ color: "#333333" });
+  });
+
+  it("should parse text colors with arbitrary 3-digit hex values", () => {
+    expect(parseColor("text-[#f00]")).toEqual({ color: "#ff0000" });
+    expect(parseColor("text-[#abc]")).toEqual({ color: "#aabbcc" });
+    expect(parseColor("text-[#000]")).toEqual({ color: "#000000" });
+  });
+
+  it("should parse text colors with arbitrary 8-digit hex values (with alpha)", () => {
+    expect(parseColor("text-[#ff0000aa]")).toEqual({ color: "#ff0000aa" });
+    expect(parseColor("text-[#00000080]")).toEqual({ color: "#00000080" });
+  });
+});
+
+describe("parseColor - border colors", () => {
+  it("should parse border colors with preset values", () => {
+    expect(parseColor("border-blue-500")).toEqual({ borderColor: "#3B82F6" });
+    expect(parseColor("border-red-500")).toEqual({ borderColor: "#EF4444" });
+    expect(parseColor("border-green-500")).toEqual({ borderColor: "#22C55E" });
+    expect(parseColor("border-gray-200")).toEqual({ borderColor: "#E5E7EB" });
+  });
+
+  it("should parse border colors with basic values", () => {
+    expect(parseColor("border-white")).toEqual({ borderColor: "#FFFFFF" });
+    expect(parseColor("border-black")).toEqual({ borderColor: "#000000" });
+    expect(parseColor("border-transparent")).toEqual({ borderColor: "transparent" });
+  });
+
+  it("should parse border colors with arbitrary 6-digit hex values", () => {
+    expect(parseColor("border-[#ff0000]")).toEqual({ borderColor: "#ff0000" });
+    expect(parseColor("border-[#3B82F6]")).toEqual({ borderColor: "#3B82F6" });
+    expect(parseColor("border-[#cccccc]")).toEqual({ borderColor: "#cccccc" });
+  });
+
+  it("should parse border colors with arbitrary 3-digit hex values", () => {
+    expect(parseColor("border-[#f00]")).toEqual({ borderColor: "#ff0000" });
+    expect(parseColor("border-[#abc]")).toEqual({ borderColor: "#aabbcc" });
+    expect(parseColor("border-[#999]")).toEqual({ borderColor: "#999999" });
+  });
+
+  it("should parse border colors with arbitrary 8-digit hex values (with alpha)", () => {
+    expect(parseColor("border-[#ff0000aa]")).toEqual({ borderColor: "#ff0000aa" });
+    expect(parseColor("border-[#0000FF50]")).toEqual({ borderColor: "#0000FF50" });
+  });
+
+  it("should not match border width classes", () => {
+    expect(parseColor("border-0")).toBeNull();
+    expect(parseColor("border-2")).toBeNull();
+    expect(parseColor("border-4")).toBeNull();
+  });
+});
+
+describe("parseColor - custom colors", () => {
+  const customColors = {
+    "brand-primary": "#FF6B6B",
+    "brand-secondary": "#4ECDC4",
+    accent: "#FFE66D",
+  };
+
+  it("should support custom background colors", () => {
+    expect(parseColor("bg-brand-primary", customColors)).toEqual({ backgroundColor: "#FF6B6B" });
+    expect(parseColor("bg-brand-secondary", customColors)).toEqual({ backgroundColor: "#4ECDC4" });
+    expect(parseColor("bg-accent", customColors)).toEqual({ backgroundColor: "#FFE66D" });
+  });
+
+  it("should support custom text colors", () => {
+    expect(parseColor("text-brand-primary", customColors)).toEqual({ color: "#FF6B6B" });
+    expect(parseColor("text-brand-secondary", customColors)).toEqual({ color: "#4ECDC4" });
+  });
+
+  it("should support custom border colors", () => {
+    expect(parseColor("border-brand-primary", customColors)).toEqual({ borderColor: "#FF6B6B" });
+    expect(parseColor("border-accent", customColors)).toEqual({ borderColor: "#FFE66D" });
+  });
+
+  it("should allow custom colors to override preset colors", () => {
+    const overrideColors = { "blue-500": "#FF0000" };
+    expect(parseColor("bg-blue-500", overrideColors)).toEqual({ backgroundColor: "#FF0000" });
+  });
+
+  it("should fallback to preset colors when custom color not found", () => {
+    expect(parseColor("bg-red-500", customColors)).toEqual({ backgroundColor: "#EF4444" });
+  });
+});
+
+describe("parseColor - edge cases", () => {
+  it("should return null for invalid classes", () => {
+    expect(parseColor("invalid")).toBeNull();
+    expect(parseColor("bg")).toBeNull();
+    expect(parseColor("text")).toBeNull();
+    expect(parseColor("border")).toBeNull();
+  });
+
+  it("should return null for invalid color values", () => {
+    expect(parseColor("bg-invalid")).toBeNull();
+    expect(parseColor("text-notacolor")).toBeNull();
+    expect(parseColor("border-xyz")).toBeNull();
+  });
+
+  it("should return null for invalid arbitrary hex values", () => {
+    expect(parseColor("bg-[#ff]")).toBeNull(); // Too short (2 digits)
+    expect(parseColor("bg-[#ffff]")).toBeNull(); // Invalid length (4 digits)
+    expect(parseColor("bg-[#fffff]")).toBeNull(); // Invalid length (5 digits)
+    expect(parseColor("bg-[#fffffff]")).toBeNull(); // Invalid length (7 digits)
+    expect(parseColor("bg-[#fffffffff]")).toBeNull(); // Too long (9 digits)
+  });
+
+  it("should return null for malformed arbitrary values", () => {
+    expect(parseColor("bg-[#ff0000")).toBeNull(); // Missing closing bracket
+    expect(parseColor("bg-#ff0000]")).toBeNull(); // Missing opening bracket
+    expect(parseColor("bg-[]")).toBeNull(); // Empty brackets
+    expect(parseColor("bg-[ff0000]")).toBeNull(); // Missing # symbol
+  });
+
+  it("should return null for non-hex arbitrary values", () => {
+    expect(parseColor("bg-[#gggggg]")).toBeNull(); // Invalid hex characters
+    expect(parseColor("bg-[#zzzzzz]")).toBeNull(); // Invalid hex characters
+    expect(parseColor("bg-[rgb(255,0,0)]")).toBeNull(); // RGB format not supported
+  });
+
+  it("should not match partial class names", () => {
+    expect(parseColor("background-blue-500")).toBeNull();
+    expect(parseColor("textcolor-red-500")).toBeNull();
+    expect(parseColor("border-color-blue-500")).toBeNull();
+  });
+
+  it("should handle all color scale variants", () => {
+    const scales = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
+    scales.forEach((scale) => {
+      expect(parseColor(`bg-blue-${scale}`)).toBeTruthy();
+      expect(parseColor(`text-red-${scale}`)).toBeTruthy();
+      expect(parseColor(`border-green-${scale}`)).toBeTruthy();
+    });
+  });
+});
+
+describe("parseColor - comprehensive coverage", () => {
+  it("should parse all color types with same preset color", () => {
+    expect(parseColor("bg-blue-500")).toEqual({ backgroundColor: "#3B82F6" });
+    expect(parseColor("text-blue-500")).toEqual({ color: "#3B82F6" });
+    expect(parseColor("border-blue-500")).toEqual({ borderColor: "#3B82F6" });
+  });
+
+  it("should parse all color types with same arbitrary hex", () => {
+    expect(parseColor("bg-[#ff0000]")).toEqual({ backgroundColor: "#ff0000" });
+    expect(parseColor("text-[#ff0000]")).toEqual({ color: "#ff0000" });
+    expect(parseColor("border-[#ff0000]")).toEqual({ borderColor: "#ff0000" });
+  });
+
+  it("should handle all color families", () => {
+    const families = ["gray", "red", "blue", "green", "yellow", "purple", "pink", "orange", "indigo"];
+    families.forEach((family) => {
+      expect(parseColor(`bg-${family}-500`)).toBeTruthy();
+      expect(parseColor(`text-${family}-500`)).toBeTruthy();
+      expect(parseColor(`border-${family}-500`)).toBeTruthy();
+    });
+  });
+
+  it("should handle arbitrary values with mixed case", () => {
+    expect(parseColor("bg-[#AbCdEf]")).toEqual({ backgroundColor: "#AbCdEf" });
+    expect(parseColor("text-[#aBcDeF]")).toEqual({ color: "#aBcDeF" });
+    expect(parseColor("border-[#ABCDEF]")).toEqual({ borderColor: "#ABCDEF" });
+  });
+
+  it("should expand 3-digit hex consistently across all color types", () => {
+    expect(parseColor("bg-[#abc]")).toEqual({ backgroundColor: "#aabbcc" });
+    expect(parseColor("text-[#abc]")).toEqual({ color: "#aabbcc" });
+    expect(parseColor("border-[#abc]")).toEqual({ borderColor: "#aabbcc" });
+  });
+
+  it("should handle alpha channel consistently across all color types", () => {
+    expect(parseColor("bg-[#ff0000aa]")).toEqual({ backgroundColor: "#ff0000aa" });
+    expect(parseColor("text-[#ff0000aa]")).toEqual({ color: "#ff0000aa" });
+    expect(parseColor("border-[#ff0000aa]")).toEqual({ borderColor: "#ff0000aa" });
+  });
+});
+
+describe("parseColor - opacity modifiers", () => {
+  it("should parse background colors with opacity modifiers", () => {
+    expect(parseColor("bg-black/50")).toEqual({ backgroundColor: "#00000080" });
+    expect(parseColor("bg-white/50")).toEqual({ backgroundColor: "#FFFFFF80" });
+    expect(parseColor("bg-blue-500/80")).toEqual({ backgroundColor: "#3B82F6CC" });
+    expect(parseColor("bg-red-500/30")).toEqual({ backgroundColor: "#EF44444D" });
+  });
+
+  it("should parse text colors with opacity modifiers", () => {
+    expect(parseColor("text-black/80")).toEqual({ color: "#000000CC" });
+    expect(parseColor("text-white/90")).toEqual({ color: "#FFFFFFE6" });
+    expect(parseColor("text-gray-900/70")).toEqual({ color: "#111827B3" });
+    expect(parseColor("text-blue-500/50")).toEqual({ color: "#3B82F680" });
+  });
+
+  it("should parse border colors with opacity modifiers", () => {
+    expect(parseColor("border-black/25")).toEqual({ borderColor: "#00000040" });
+    expect(parseColor("border-red-500/60")).toEqual({ borderColor: "#EF444499" });
+    expect(parseColor("border-gray-200/40")).toEqual({ borderColor: "#E5E7EB66" });
+  });
+
+  it("should handle opacity modifier with arbitrary hex colors", () => {
+    expect(parseColor("bg-[#ff0000]/50")).toEqual({ backgroundColor: "#FF000080" });
+    expect(parseColor("text-[#3B82F6]/80")).toEqual({ color: "#3B82F6CC" });
+    expect(parseColor("border-[#abc]/60")).toEqual({ borderColor: "#AABBCC99" });
+  });
+
+  it("should handle opacity modifier with custom colors", () => {
+    const customColors = { "brand-primary": "#FF6B6B" };
+    expect(parseColor("bg-brand-primary/50", customColors)).toEqual({ backgroundColor: "#FF6B6B80" });
+    expect(parseColor("text-brand-primary/75", customColors)).toEqual({ color: "#FF6B6BBF" });
+  });
+
+  it("should handle opacity 0 (fully transparent)", () => {
+    expect(parseColor("bg-black/0")).toEqual({ backgroundColor: "#00000000" });
+    expect(parseColor("text-red-500/0")).toEqual({ color: "#EF444400" });
+  });
+
+  it("should handle opacity 100 (fully opaque)", () => {
+    expect(parseColor("bg-black/100")).toEqual({ backgroundColor: "#000000FF" });
+    expect(parseColor("text-blue-500/100")).toEqual({ color: "#3B82F6FF" });
+  });
+
+  it("should handle transparent color with opacity modifier", () => {
+    // Transparent with opacity should remain transparent
+    expect(parseColor("bg-transparent/50")).toEqual({ backgroundColor: "transparent" });
+  });
+
+  it("should convert opacity percentage to correct hex values", () => {
+    // Test key opacity values
+    expect(parseColor("bg-black/0")).toEqual({ backgroundColor: "#00000000" }); // 0%
+    expect(parseColor("bg-black/10")).toEqual({ backgroundColor: "#0000001A" }); // ~10%
+    expect(parseColor("bg-black/25")).toEqual({ backgroundColor: "#00000040" }); // 25%
+    expect(parseColor("bg-black/50")).toEqual({ backgroundColor: "#00000080" }); // 50%
+    expect(parseColor("bg-black/75")).toEqual({ backgroundColor: "#000000BF" }); // 75%
+    expect(parseColor("bg-black/100")).toEqual({ backgroundColor: "#000000FF" }); // 100%
+  });
+
+  it("should return null for invalid opacity values", () => {
+    expect(parseColor("bg-black/101")).toBeNull(); // > 100
+    expect(parseColor("bg-black/-1")).toBeNull(); // < 0
+    expect(parseColor("bg-black/150")).toBeNull(); // Way over 100
+  });
+
+  it("should return null for malformed opacity syntax", () => {
+    expect(parseColor("bg-black/")).toBeNull(); // Missing opacity value
+    expect(parseColor("bg-black/abc")).toBeNull(); // Non-numeric opacity
+    expect(parseColor("bg-black/50/")).toBeNull(); // Extra slash
+  });
+
+  it("should handle opacity with 3-digit hex expansion", () => {
+    expect(parseColor("bg-[#f00]/50")).toEqual({ backgroundColor: "#FF000080" });
+    expect(parseColor("text-[#abc]/75")).toEqual({ color: "#AABBCCBF" });
+  });
+
+  it("should work with all color families", () => {
+    const families = ["gray", "red", "blue", "green", "yellow", "purple", "pink", "orange", "indigo"];
+    families.forEach((family) => {
+      expect(parseColor(`bg-${family}-500/50`)).toBeTruthy();
+      expect(parseColor(`text-${family}-500/50`)).toBeTruthy();
+      expect(parseColor(`border-${family}-500/50`)).toBeTruthy();
+    });
+  });
+});

package/src/parser/colors.ts

@@ -120,8 +120,75 @@ export const COLORS: Record<string, string> = {
   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 rgba for special colors
+ */
+function applyOpacity(hex: string, opacity: number): string {
+  // Handle transparent specially
+  if (hex === "transparent") {
+    return "transparent";
+  }
+
+  // Remove # if present
+  const cleanHex = hex.replace(/^#/, "");
+
+  // Expand 3-digit hex to 6-digit: #abc -> #aabbcc
+  const fullHex =
+    cleanHex.length === 3
+      ? cleanHex
+          .split("")
+          .map((char) => char + char)
+          .join("")
+      : cleanHex;
+
+  // Convert opacity percentage (0-100) to hex (00-FF)
+  const alpha = Math.round((opacity / 100) * 255);
+  const alphaHex = alpha.toString(16).padStart(2, "0").toUpperCase();
+
+  // Return 8-digit hex: #RRGGBBAA
+  return `#${fullHex.toUpperCase()}${alphaHex}`;
+}
+
+/**
+ * Parse arbitrary color value: [#ff0000], [#f00], [#FF0000AA]
+ * Supports 3-digit, 6-digit, and 8-digit (with alpha) hex colors
+ * Returns hex string if valid, null otherwise
+ */
+function parseArbitraryColor(value: string): string | null {
+  // Match: [#rgb], [#rrggbb], or [#rrggbbaa]
+  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];
+    // Expand 3-digit hex to 6-digit: #abc -> #aabbcc
+    if (hex.length === 3) {
+      const expanded = hex
+        .split("")
+        .map((char) => char + char)
+        .join("");
+      return `#${expanded}`;
+    }
+    return `#${hex}`;
+  }
+
+  // Warn about unsupported formats
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary color value: ${value}. Only hex colors are supported (e.g., [#ff0000], [#f00], or [#ff0000aa]).`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
 /**
  * Parse color classes (background, text, border)
+ * Supports opacity modifier: bg-blue-500/50, text-black/80, border-red-500/30
  */
 export function parseColor(cls: string, customColors?: Record<string, string>): StyleObject | null {
   // Helper to get color with custom override (custom colors take precedence)
@@ -129,28 +196,72 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
     return customColors?.[key] ?? COLORS[key];
   };
 
-  // Background color: bg-blue-500
+  // Helper to parse color with optional opacity modifier
+  const parseColorWithOpacity = (colorKey: string): string | null => {
+    // Check for opacity modifier: blue-500/50
+    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) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid opacity value: ${opacity}. Opacity must be between 0 and 100.`,
+          );
+        }
+        return null;
+      }
+
+      // Try arbitrary color first: bg-[#ff0000]/50
+      const arbitraryColor = parseArbitraryColor(baseColorKey);
+      if (arbitraryColor !== null) {
+        return applyOpacity(arbitraryColor, opacity);
+      }
+
+      // Try preset/custom colors: bg-blue-500/50
+      const color = getColor(baseColorKey);
+      if (color) {
+        return applyOpacity(color, opacity);
+      }
+
+      return null;
+    }
+
+    // No opacity modifier - try normal color parsing
+    // Try arbitrary value first
+    const arbitraryColor = parseArbitraryColor(colorKey);
+    if (arbitraryColor !== null) {
+      return arbitraryColor;
+    }
+
+    // Try preset/custom colors
+    return getColor(colorKey) ?? null;
+  };
+
+  // Background color: bg-blue-500, bg-blue-500/50, bg-[#ff0000]/80
   if (cls.startsWith("bg-")) {
     const colorKey = cls.substring(3);
-    const color = getColor(colorKey);
+    const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { backgroundColor: color };
     }
   }
 
-  // Text color: text-blue-500
+  // Text color: text-blue-500, text-blue-500/50, text-[#ff0000]/80
   if (cls.startsWith("text-")) {
     const colorKey = cls.substring(5);
-    const color = getColor(colorKey);
+    const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { color: color };
     }
   }
 
-  // Border color: border-blue-500
+  // Border color: border-blue-500, border-blue-500/50, border-[#ff0000]/80
   if (cls.startsWith("border-") && !cls.match(/^border-[0-9]/)) {
     const colorKey = cls.substring(7);
-    const color = getColor(colorKey);
+    const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { borderColor: color };
     }

package/src/parser/index.ts

@@ -4,9 +4,11 @@
  */
 
 import type { StyleObject } from "../types";
+import { parseAspectRatio } from "./aspectRatio";
 import { parseBorder } from "./borders";
 import { parseColor } from "./colors";
 import { parseLayout } from "./layout";
+import { parseShadow } from "./shadows";
 import { parseSizing } from "./sizing";
 import { parseSpacing } from "./spacing";
 import { parseTypography } from "./typography";
@@ -37,14 +39,17 @@ export function parseClassName(className: string, customColors?: Record<string,
  */
 export function parseClass(cls: string, customColors?: Record<string, string>): StyleObject {
   // Try each parser in order
+  // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
   // parseColor gets custom colors, others don't need it
-  const parsers: Array<(cls: string) => StyleObject | null> = [
+  const parsers: ((cls: string) => StyleObject | null)[] = [
     parseSpacing,
+    parseBorder,
     (cls: string) => parseColor(cls, customColors),
     parseLayout,
     parseTypography,
-    parseBorder,
     parseSizing,
+    parseShadow,
+    parseAspectRatio,
   ];
 
   for (const parser of parsers) {
@@ -63,9 +68,15 @@ export function parseClass(cls: string, customColors?: Record<string, string>):
 }
 
 // Re-export parsers for testing/advanced usage
+export { parseAspectRatio } from "./aspectRatio";
 export { parseBorder } from "./borders";
 export { parseColor } from "./colors";
 export { parseLayout } from "./layout";
+export { parseShadow } from "./shadows";
 export { parseSizing } from "./sizing";
 export { parseSpacing } from "./spacing";
 export { parseTypography } from "./typography";
+
+// Re-export modifier utilities
+export { hasModifier, parseModifier, splitModifierClasses } from "./modifiers";
+export type { ModifierType, ParsedModifier } from "./modifiers";