@mgcrea/react-native-tailwind 0.2.0

package/src/parser/borders.ts

@@ -0,0 +1,198 @@
+/**
+ * Border utilities (border width, radius, style)
+ */
+
+import type { StyleObject } from "../types";
+
+// Border width scale
+export const BORDER_WIDTH_SCALE: Record<string, number> = {
+  "": 1,
+  "0": 0,
+  "2": 2,
+  "4": 4,
+  "8": 8,
+};
+
+// Border radius scale
+export const BORDER_RADIUS_SCALE: Record<string, number> = {
+  none: 0,
+  sm: 2,
+  "": 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  "2xl": 16,
+  "3xl": 24,
+  full: 9999,
+};
+
+/**
+ * Parse border classes
+ */
+export function parseBorder(cls: string): StyleObject | null {
+  // Border width (border-0, border-t, border-[8px], etc.)
+  if (cls.startsWith("border-")) {
+    return parseBorderWidth(cls);
+  }
+
+  if (cls === "border") {
+    return { borderWidth: 1 };
+  }
+
+  // Border radius (rounded, rounded-t, rounded-[12px], etc.)
+  if (cls.startsWith("rounded")) {
+    return parseBorderRadius(cls);
+  }
+
+  // Border style
+  if (cls === "border-solid") return { borderStyle: "solid" };
+  if (cls === "border-dotted") return { borderStyle: "dotted" };
+  if (cls === "border-dashed") return { borderStyle: "dashed" };
+
+  return null;
+}
+
+/**
+ * Parse border width classes
+ */
+function parseBorderWidth(cls: string): StyleObject | null {
+  // All borders with arbitrary values: border-[8px]
+  const allArbMatch = cls.match(/^border-\[(\d+)(?:px)?\]$/);
+  if (allArbMatch) {
+    return { borderWidth: parseInt(allArbMatch[1], 10) };
+  }
+
+  // Directional borders with arbitrary values: border-t-[8px]
+  const dirArbMatch = cls.match(/^border-([trbl])-\[(\d+)(?:px)?\]$/);
+  if (dirArbMatch) {
+    const dir = dirArbMatch[1];
+    const value = parseInt(dirArbMatch[2], 10);
+    const propMap: Record<string, string> = {
+      t: "borderTopWidth",
+      r: "borderRightWidth",
+      b: "borderBottomWidth",
+      l: "borderLeftWidth",
+    };
+    return { [propMap[dir]]: value };
+  }
+
+  // Preset directional borders: border-t-0, border-t-2, etc.
+  const dirMatch = cls.match(/^border-([trbl])-?(\d*)$/);
+  if (dirMatch) {
+    const dir = dirMatch[1];
+    const scaleKey = dirMatch[2] || ""; // empty string for border-t
+    const value = BORDER_WIDTH_SCALE[scaleKey];
+
+    if (typeof value === "number") {
+      const propMap: Record<string, string> = {
+        t: "borderTopWidth",
+        r: "borderRightWidth",
+        b: "borderBottomWidth",
+        l: "borderLeftWidth",
+      };
+      return { [propMap[dir]]: value };
+    }
+  }
+
+  // Preset all borders: border-0, border-2, etc.
+  const allMatch = cls.match(/^border-(\d+)$/);
+  if (allMatch) {
+    const value = BORDER_WIDTH_SCALE[allMatch[1]];
+    if (value !== undefined) {
+      return { borderWidth: value };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Parse border radius classes
+ */
+function parseBorderRadius(cls: string): StyleObject | null {
+  // All corners with arbitrary values: rounded-[12px]
+  const allArbMatch = cls.match(/^rounded-\[(\d+)(?:px)?\]$/);
+  if (allArbMatch) {
+    return { borderRadius: parseInt(allArbMatch[1], 10) };
+  }
+
+  // Specific corners with arbitrary values: rounded-tl-[8px]
+  const cornerArbMatch = cls.match(/^rounded-(tl|tr|bl|br)-\[(\d+)(?:px)?\]$/);
+  if (cornerArbMatch) {
+    const corner = cornerArbMatch[1];
+    const value = parseInt(cornerArbMatch[2], 10);
+    const propMap: Record<string, string> = {
+      tl: "borderTopLeftRadius",
+      tr: "borderTopRightRadius",
+      bl: "borderBottomLeftRadius",
+      br: "borderBottomRightRadius",
+    };
+    return { [propMap[corner]]: value };
+  }
+
+  // Sides with arbitrary values: rounded-t-[8px]
+  const sideArbMatch = cls.match(/^rounded-([trbl])-\[(\d+)(?:px)?\]$/);
+  if (sideArbMatch) {
+    const side = sideArbMatch[1];
+    const value = parseInt(sideArbMatch[2], 10);
+    const propMap: Record<string, string[]> = {
+      t: ["borderTopLeftRadius", "borderTopRightRadius"],
+      r: ["borderTopRightRadius", "borderBottomRightRadius"],
+      b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
+      l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+    };
+    const result: StyleObject = {};
+    propMap[side].forEach((prop) => (result[prop] = value));
+    return result;
+  }
+
+  // All corners with preset values: rounded, rounded-lg, etc.
+  const allMatch = cls.match(/^rounded(-\w+)?$/);
+  if (allMatch) {
+    const scaleKey = allMatch[1] ? allMatch[1].substring(1) : ""; // remove leading dash
+    const value = BORDER_RADIUS_SCALE[scaleKey];
+    if (value !== undefined) {
+      return { borderRadius: value };
+    }
+  }
+
+  // Sides with preset values: rounded-t, rounded-t-lg, etc.
+  const sideMatch = cls.match(/^rounded-([trbl])(?:-(\w+))?$/);
+  if (sideMatch) {
+    const side = sideMatch[1];
+    const scaleKey = sideMatch[2] || ""; // empty string for rounded-t
+    const value = BORDER_RADIUS_SCALE[scaleKey];
+
+    if (value !== undefined) {
+      const propMap: Record<string, string[]> = {
+        t: ["borderTopLeftRadius", "borderTopRightRadius"],
+        r: ["borderTopRightRadius", "borderBottomRightRadius"],
+        b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
+        l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+      };
+      const result: StyleObject = {};
+      propMap[side].forEach((prop) => (result[prop] = value));
+      return result;
+    }
+  }
+
+  // Specific corners with preset values: rounded-tl, rounded-tl-lg, etc.
+  const cornerMatch = cls.match(/^rounded-(tl|tr|bl|br)(?:-(\w+))?$/);
+  if (cornerMatch) {
+    const corner = cornerMatch[1];
+    const scaleKey = cornerMatch[2] || "";
+    const value = BORDER_RADIUS_SCALE[scaleKey];
+
+    if (value !== undefined) {
+      const propMap: Record<string, string> = {
+        tl: "borderTopLeftRadius",
+        tr: "borderTopRightRadius",
+        bl: "borderBottomLeftRadius",
+        br: "borderBottomRightRadius",
+      };
+      return { [propMap[corner]]: value };
+    }
+  }
+
+  return null;
+}

package/src/parser/colors.ts

@@ -0,0 +1,160 @@
+/**
+ * Color utilities (background, text, border colors)
+ */
+
+import type { StyleObject } from "../types";
+
+// Tailwind color palette
+export const COLORS: Record<string, string> = {
+  // Gray
+  "gray-50": "#F9FAFB",
+  "gray-100": "#F3F4F6",
+  "gray-200": "#E5E7EB",
+  "gray-300": "#D1D5DB",
+  "gray-400": "#9CA3AF",
+  "gray-500": "#6B7280",
+  "gray-600": "#4B5563",
+  "gray-700": "#374151",
+  "gray-800": "#1F2937",
+  "gray-900": "#111827",
+
+  // Red
+  "red-50": "#FEF2F2",
+  "red-100": "#FEE2E2",
+  "red-200": "#FECACA",
+  "red-300": "#FCA5A5",
+  "red-400": "#F87171",
+  "red-500": "#EF4444",
+  "red-600": "#DC2626",
+  "red-700": "#B91C1C",
+  "red-800": "#991B1B",
+  "red-900": "#7F1D1D",
+
+  // Blue
+  "blue-50": "#EFF6FF",
+  "blue-100": "#DBEAFE",
+  "blue-200": "#BFDBFE",
+  "blue-300": "#93C5FD",
+  "blue-400": "#60A5FA",
+  "blue-500": "#3B82F6",
+  "blue-600": "#2563EB",
+  "blue-700": "#1D4ED8",
+  "blue-800": "#1E40AF",
+  "blue-900": "#1E3A8A",
+
+  // Green
+  "green-50": "#F0FDF4",
+  "green-100": "#DCFCE7",
+  "green-200": "#BBF7D0",
+  "green-300": "#86EFAC",
+  "green-400": "#4ADE80",
+  "green-500": "#22C55E",
+  "green-600": "#16A34A",
+  "green-700": "#15803D",
+  "green-800": "#166534",
+  "green-900": "#14532D",
+
+  // Yellow
+  "yellow-50": "#FEFCE8",
+  "yellow-100": "#FEF9C3",
+  "yellow-200": "#FEF08A",
+  "yellow-300": "#FDE047",
+  "yellow-400": "#FACC15",
+  "yellow-500": "#EAB308",
+  "yellow-600": "#CA8A04",
+  "yellow-700": "#A16207",
+  "yellow-800": "#854D0E",
+  "yellow-900": "#713F12",
+
+  // Purple
+  "purple-50": "#FAF5FF",
+  "purple-100": "#F3E8FF",
+  "purple-200": "#E9D5FF",
+  "purple-300": "#D8B4FE",
+  "purple-400": "#C084FC",
+  "purple-500": "#A855F7",
+  "purple-600": "#9333EA",
+  "purple-700": "#7E22CE",
+  "purple-800": "#6B21A8",
+  "purple-900": "#581C87",
+
+  // Pink
+  "pink-50": "#FDF2F8",
+  "pink-100": "#FCE7F3",
+  "pink-200": "#FBCFE8",
+  "pink-300": "#F9A8D4",
+  "pink-400": "#F472B6",
+  "pink-500": "#EC4899",
+  "pink-600": "#DB2777",
+  "pink-700": "#BE185D",
+  "pink-800": "#9D174D",
+  "pink-900": "#831843",
+
+  // Orange
+  "orange-50": "#FFF7ED",
+  "orange-100": "#FFEDD5",
+  "orange-200": "#FED7AA",
+  "orange-300": "#FDBA74",
+  "orange-400": "#FB923C",
+  "orange-500": "#F97316",
+  "orange-600": "#EA580C",
+  "orange-700": "#C2410C",
+  "orange-800": "#9A3412",
+  "orange-900": "#7C2D12",
+
+  // Indigo
+  "indigo-50": "#EEF2FF",
+  "indigo-100": "#E0E7FF",
+  "indigo-200": "#C7D2FE",
+  "indigo-300": "#A5B4FC",
+  "indigo-400": "#818CF8",
+  "indigo-500": "#6366F1",
+  "indigo-600": "#4F46E5",
+  "indigo-700": "#4338CA",
+  "indigo-800": "#3730A3",
+  "indigo-900": "#312E81",
+
+  // Basic colors
+  white: "#FFFFFF",
+  black: "#000000",
+  transparent: "transparent",
+};
+
+/**
+ * Parse color classes (background, text, border)
+ */
+export function parseColor(cls: string, customColors?: Record<string, string>): StyleObject | null {
+  // Helper to get color with custom override (custom colors take precedence)
+  const getColor = (key: string): string | undefined => {
+    return customColors?.[key] ?? COLORS[key];
+  };
+
+  // Background color: bg-blue-500
+  if (cls.startsWith("bg-")) {
+    const colorKey = cls.substring(3);
+    const color = getColor(colorKey);
+    if (color) {
+      return { backgroundColor: color };
+    }
+  }
+
+  // Text color: text-blue-500
+  if (cls.startsWith("text-")) {
+    const colorKey = cls.substring(5);
+    const color = getColor(colorKey);
+    if (color) {
+      return { color: color };
+    }
+  }
+
+  // Border color: border-blue-500
+  if (cls.startsWith("border-") && !cls.match(/^border-[0-9]/)) {
+    const colorKey = cls.substring(7);
+    const color = getColor(colorKey);
+    if (color) {
+      return { borderColor: color };
+    }
+  }
+
+  return null;
+}

package/src/parser/index.ts

@@ -0,0 +1,71 @@
+/**
+ * Tailwind class parser for React Native
+ * Converts Tailwind-like class names to React Native style objects
+ */
+
+import type { StyleObject } from "../types";
+import { parseBorder } from "./borders";
+import { parseColor } from "./colors";
+import { parseLayout } from "./layout";
+import { parseSizing } from "./sizing";
+import { parseSpacing } from "./spacing";
+import { parseTypography } from "./typography";
+
+/**
+ * Parse a className string and return a React Native style object
+ * @param className - Space-separated class names
+ * @param customColors - Optional custom colors from tailwind.config
+ * @returns React Native style object
+ */
+export function parseClassName(className: string, customColors?: Record<string, string>): StyleObject {
+  const classes = className.split(/\s+/).filter(Boolean);
+  const style: StyleObject = {};
+
+  for (const cls of classes) {
+    const parsedStyle = parseClass(cls, customColors);
+    Object.assign(style, parsedStyle);
+  }
+
+  return style;
+}
+
+/**
+ * Parse a single class name
+ * @param cls - Single class name
+ * @param customColors - Optional custom colors from tailwind.config
+ * @returns React Native style object
+ */
+export function parseClass(cls: string, customColors?: Record<string, string>): StyleObject {
+  // Try each parser in order
+  // parseColor gets custom colors, others don't need it
+  const parsers: Array<(cls: string) => StyleObject | null> = [
+    parseSpacing,
+    (cls: string) => parseColor(cls, customColors),
+    parseLayout,
+    parseTypography,
+    parseBorder,
+    parseSizing,
+  ];
+
+  for (const parser of parsers) {
+    const result = parser(cls);
+    if (result !== null) {
+      return result;
+    }
+  }
+
+  // Warn about unknown class in development
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(`[react-native-tailwind] Unknown class: "${cls}"`);
+  }
+
+  return {};
+}
+
+// Re-export parsers for testing/advanced usage
+export { parseBorder } from "./borders";
+export { parseColor } from "./colors";
+export { parseLayout } from "./layout";
+export { parseSizing } from "./sizing";
+export { parseSpacing } from "./spacing";
+export { parseTypography } from "./typography";

package/src/parser/layout.ts

@@ -0,0 +1,114 @@
+/**
+ * Layout utilities (flexbox, positioning, display)
+ */
+
+import type { StyleObject } from "../types";
+
+// Display utilities
+const DISPLAY_MAP: Record<string, StyleObject> = {
+  flex: { display: "flex" },
+  hidden: { display: "none" },
+};
+
+// Flex direction utilities
+const FLEX_DIRECTION_MAP: Record<string, StyleObject> = {
+  "flex-row": { flexDirection: "row" },
+  "flex-row-reverse": { flexDirection: "row-reverse" },
+  "flex-col": { flexDirection: "column" },
+  "flex-col-reverse": { flexDirection: "column-reverse" },
+};
+
+// Flex wrap utilities
+const FLEX_WRAP_MAP: Record<string, StyleObject> = {
+  "flex-wrap": { flexWrap: "wrap" },
+  "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
+  "flex-nowrap": { flexWrap: "nowrap" },
+};
+
+// Flex utilities
+const FLEX_MAP: Record<string, StyleObject> = {
+  "flex-1": { flex: 1 },
+  "flex-auto": { flex: 1 },
+  "flex-none": { flex: 0 },
+};
+
+// Flex grow/shrink utilities
+const GROW_SHRINK_MAP: Record<string, StyleObject> = {
+  grow: { flexGrow: 1 },
+  "grow-0": { flexGrow: 0 },
+  shrink: { flexShrink: 1 },
+  "shrink-0": { flexShrink: 0 },
+};
+
+// Justify content utilities
+const JUSTIFY_CONTENT_MAP: Record<string, StyleObject> = {
+  "justify-start": { justifyContent: "flex-start" },
+  "justify-end": { justifyContent: "flex-end" },
+  "justify-center": { justifyContent: "center" },
+  "justify-between": { justifyContent: "space-between" },
+  "justify-around": { justifyContent: "space-around" },
+  "justify-evenly": { justifyContent: "space-evenly" },
+};
+
+// Align items utilities
+const ALIGN_ITEMS_MAP: Record<string, StyleObject> = {
+  "items-start": { alignItems: "flex-start" },
+  "items-end": { alignItems: "flex-end" },
+  "items-center": { alignItems: "center" },
+  "items-baseline": { alignItems: "baseline" },
+  "items-stretch": { alignItems: "stretch" },
+};
+
+// Align self utilities
+const ALIGN_SELF_MAP: Record<string, StyleObject> = {
+  "self-auto": { alignSelf: "auto" },
+  "self-start": { alignSelf: "flex-start" },
+  "self-end": { alignSelf: "flex-end" },
+  "self-center": { alignSelf: "center" },
+  "self-stretch": { alignSelf: "stretch" },
+  "self-baseline": { alignSelf: "baseline" },
+};
+
+// Align content utilities
+const ALIGN_CONTENT_MAP: Record<string, StyleObject> = {
+  "content-start": { alignContent: "flex-start" },
+  "content-end": { alignContent: "flex-end" },
+  "content-center": { alignContent: "center" },
+  "content-between": { alignContent: "space-between" },
+  "content-around": { alignContent: "space-around" },
+  "content-stretch": { alignContent: "stretch" },
+};
+
+// Position utilities
+const POSITION_MAP: Record<string, StyleObject> = {
+  absolute: { position: "absolute" },
+  relative: { position: "relative" },
+};
+
+// Overflow utilities
+const OVERFLOW_MAP: Record<string, StyleObject> = {
+  "overflow-hidden": { overflow: "hidden" },
+  "overflow-visible": { overflow: "visible" },
+  "overflow-scroll": { overflow: "scroll" },
+};
+
+/**
+ * Parse layout classes
+ */
+export function parseLayout(cls: string): StyleObject | null {
+  // Try each lookup table in order
+  return (
+    DISPLAY_MAP[cls] ??
+    FLEX_DIRECTION_MAP[cls] ??
+    FLEX_WRAP_MAP[cls] ??
+    FLEX_MAP[cls] ??
+    GROW_SHRINK_MAP[cls] ??
+    JUSTIFY_CONTENT_MAP[cls] ??
+    ALIGN_ITEMS_MAP[cls] ??
+    ALIGN_SELF_MAP[cls] ??
+    ALIGN_CONTENT_MAP[cls] ??
+    POSITION_MAP[cls] ??
+    OVERFLOW_MAP[cls] ??
+    null
+  );
+}