feat: add directional border color support

Add support for per-side border colors (border-t-red-500, border-l-blue-500,
etc.) and horizontal/vertical shortcuts (border-x-*, border-y-*).

- Extend parseColor to handle border-{t|r|b|l|x|y}-{color} patterns
- Modify parseBorder to coordinate with parseColor for color detection
- Pass customColors to parseBorder for proper color pattern matching
- Support all color features: opacity modifiers, arbitrary values, custom colors

Border-x and border-y expand to multiple React Native properties since
borderHorizontalColor/borderVerticalColor don't exist.

Author: mgcrea

src/parser/borders.ts

@@ -3,6 +3,7 @@
  */
 
 import type { StyleObject } from "../types";
+import { parseColor } from "./colors";
 
 // Border width scale
 export const BORDER_WIDTH_SCALE: Record<string, number> = {
@@ -108,16 +109,18 @@ function parseArbitraryBorderRadius(value: string): number | null {
 
 /**
  * Parse border classes
+ * @param cls - The class name to parse
+ * @param customColors - Optional custom colors from tailwind.config (used to detect color patterns)
  */
-export function parseBorder(cls: string): StyleObject | null {
+export function parseBorder(cls: string, customColors?: Record<string, string>): StyleObject | null {
   // Border style (must come before parseBorderWidth)
   if (cls === "border-solid") return { borderStyle: "solid" };
   if (cls === "border-dotted") return { borderStyle: "dotted" };
   if (cls === "border-dashed") return { borderStyle: "dashed" };
 
   // Border width (border-0, border-t, border-[8px], etc.)
   if (cls.startsWith("border-")) {
-    return parseBorderWidth(cls);
+    return parseBorderWidth(cls, customColors);
   }
 
   if (cls === "border") {
@@ -134,14 +137,26 @@ export function parseBorder(cls: string): StyleObject | null {
 
 /**
  * Parse border width classes
+ * @param cls - The class name to parse
+ * @param customColors - Optional custom colors (passed to parseColor for pattern detection)
  */
-function parseBorderWidth(cls: string): StyleObject | null {
+function parseBorderWidth(cls: string, customColors?: Record<string, string>): StyleObject | null {
   // Directional borders: border-t, border-t-2, border-t-[8px]
+  // Note: border-x and border-y are handled by parseColor for colors only
   const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
   if (dirMatch) {
     const dir = dirMatch[1];
     const valueStr = dirMatch[2] || ""; // empty string for border-t
 
+    // If it's a color pattern, let parseColor handle it
+    // Try to parse as color - if it succeeds, return null (let parseColor handle it)
+    if (valueStr) {
+      const colorResult = parseColor(cls, customColors);
+      if (colorResult !== null) {
+        return null; // It's a color, let parseColor handle it
+      }
+    }
+
     // Try arbitrary value first (if it starts with [)
     if (valueStr.startsWith("[")) {
       const arbitraryValue = parseArbitraryBorderWidth(valueStr);

src/parser/colors.ts

@@ -178,5 +178,43 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
     }
   }
 
+  // Directional border colors: border-t-red-500, border-l-blue-500/50, border-r-[#ff0000]
+  const dirBorderMatch = cls.match(/^border-([trblxy])-(.+)$/);
+  if (dirBorderMatch) {
+    const dir = dirBorderMatch[1];
+    const colorKey = dirBorderMatch[2];
+
+    // Skip arbitrary values that don't look like colors (e.g., border-t-[3px] is width)
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
+
+    const color = parseColorWithOpacity(colorKey);
+    if (color) {
+      // Map direction to React Native property/properties
+      // x and y apply to multiple sides (RN doesn't have borderHorizontalColor/borderVerticalColor)
+      if (dir === "x") {
+        return {
+          borderLeftColor: color,
+          borderRightColor: color,
+        };
+      }
+      if (dir === "y") {
+        return {
+          borderTopColor: color,
+          borderBottomColor: color,
+        };
+      }
+
+      const propMap: Record<string, string> = {
+        t: "borderTopColor",
+        r: "borderRightColor",
+        b: "borderBottomColor",
+        l: "borderLeftColor",
+      };
+      return { [propMap[dir]]: color };
+    }
+  }
+
   return null;
 }

src/parser/index.ts

@@ -50,10 +50,10 @@ export function parseClassName(className: string, customTheme?: CustomTheme): St
 export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject {
   // Try each parser in order
   // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
-  // parseColor and parseTypography get custom theme, others don't need it
+  // parseBorder, parseColor and parseTypography get custom theme
   const parsers: Array<(cls: string) => StyleObject | null> = [
     parseSpacing,
-    parseBorder,
+    (cls: string) => parseBorder(cls, customTheme?.colors),
     (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
     (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),