@mgcrea/react-native-tailwind 0.2.0

package/src/parser/sizing.ts

@@ -0,0 +1,239 @@
+/**
+ * Sizing utilities (width, height, min/max)
+ */
+
+import type { StyleObject } from "../types";
+
+// Size scale (in pixels/percentages)
+export const SIZE_SCALE: Record<string, number> = {
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+  36: 144,
+  40: 160,
+  44: 176,
+  48: 192,
+  52: 208,
+  56: 224,
+  60: 240,
+  64: 256,
+  72: 288,
+  80: 320,
+  96: 384,
+};
+
+export const SIZE_PERCENTAGES: Record<string, string> = {
+  full: "100%",
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "2/6": "33.333333%",
+  "3/6": "50%",
+  "4/6": "66.666667%",
+  "5/6": "83.333333%",
+};
+
+/**
+ * Parse arbitrary size value: [123px], [50%], [10rem]
+ * Returns number for px values, string for % values, null for unsupported units
+ */
+function parseArbitrarySize(value: string): number | string | null {
+  // Match: [123px] or [123] (pixels)
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
+  }
+
+  // Match: [50%] (percentage)
+  const percentMatch = value.match(/^\[(\d+(?:\.\d+)?)%\]$/);
+  if (percentMatch) {
+    return `${percentMatch[1]}%`;
+  }
+
+  // Unsupported units (rem, em, vh, vw, etc.) - warn and reject
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary size unit: ${value}. Only px and % are supported.`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
+/**
+ * Parse sizing classes
+ */
+export function parseSizing(cls: string): StyleObject | null {
+  // Width
+  if (cls.startsWith("w-")) {
+    const sizeKey = cls.substring(2);
+
+    // Arbitrary values: w-[123px], w-[50%]
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { width: arbitrarySize };
+    }
+
+    // Percentage widths: w-full, w-1/2, etc.
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { width: percentage };
+    }
+
+    // Numeric widths: w-4, w-8, etc.
+    const numericSize = SIZE_SCALE[sizeKey];
+    if (numericSize !== undefined) {
+      return { width: numericSize };
+    }
+
+    // Special values
+    if (sizeKey === "auto") {
+      return { width: "auto" };
+    }
+  }
+
+  // Height
+  if (cls.startsWith("h-")) {
+    const sizeKey = cls.substring(2);
+
+    // Arbitrary values: h-[123px], h-[50%]
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { height: arbitrarySize };
+    }
+
+    // Percentage heights: h-full, h-1/2, etc.
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { height: percentage };
+    }
+
+    // Numeric heights: h-4, h-8, etc.
+    const numericSize = SIZE_SCALE[sizeKey];
+    if (numericSize !== undefined) {
+      return { height: numericSize };
+    }
+
+    // Special values
+    if (sizeKey === "auto") {
+      return { height: "auto" };
+    }
+  }
+
+  // Min width
+  if (cls.startsWith("min-w-")) {
+    const sizeKey = cls.substring(6);
+
+    // Arbitrary values: min-w-[123px], min-w-[50%]
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { minWidth: arbitrarySize };
+    }
+
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { minWidth: percentage };
+    }
+
+    const numericSize = SIZE_SCALE[sizeKey];
+    if (numericSize !== undefined) {
+      return { minWidth: numericSize };
+    }
+  }
+
+  // Min height
+  if (cls.startsWith("min-h-")) {
+    const sizeKey = cls.substring(6);
+
+    // Arbitrary values: min-h-[123px], min-h-[50%]
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { minHeight: arbitrarySize };
+    }
+
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { minHeight: percentage };
+    }
+
+    const numericSize = SIZE_SCALE[sizeKey];
+    if (numericSize !== undefined) {
+      return { minHeight: numericSize };
+    }
+  }
+
+  // Max width
+  if (cls.startsWith("max-w-")) {
+    const sizeKey = cls.substring(6);
+
+    // Arbitrary values: max-w-[123px], max-w-[50%]
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { maxWidth: arbitrarySize };
+    }
+
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { maxWidth: percentage };
+    }
+
+    const numericSize = SIZE_SCALE[sizeKey];
+    if (numericSize !== undefined) {
+      return { maxWidth: numericSize };
+    }
+  }
+
+  // Max height
+  if (cls.startsWith("max-h-")) {
+    const sizeKey = cls.substring(6);
+
+    // Arbitrary values: max-h-[123px], max-h-[50%]
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { maxHeight: arbitrarySize };
+    }
+
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { maxHeight: percentage };
+    }
+
+    const numericSize = SIZE_SCALE[sizeKey];
+    if (numericSize !== undefined) {
+      return { maxHeight: numericSize };
+    }
+  }
+
+  return null;
+}

package/src/parser/spacing.ts

@@ -0,0 +1,222 @@
+/**
+ * Spacing utilities (margin, padding, gap)
+ */
+
+import type { StyleObject } from "../types";
+
+// Tailwind spacing scale (in pixels, converted to React Native units)
+export const SPACING_SCALE: Record<string, number> = {
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+  36: 144,
+  40: 160,
+  44: 176,
+  48: 192,
+  52: 208,
+  56: 224,
+  60: 240,
+  64: 256,
+  72: 288,
+  80: 320,
+  96: 384,
+};
+
+/**
+ * Parse spacing classes (margin, padding, gap)
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4
+ */
+export function parseSpacing(cls: string): StyleObject | null {
+  // Margin
+  if (cls.startsWith("m-") || cls.startsWith("m")) {
+    return parseMargin(cls);
+  }
+
+  // Padding
+  if (cls.startsWith("p-") || cls.startsWith("p")) {
+    return parsePadding(cls);
+  }
+
+  // Gap
+  if (cls.startsWith("gap-")) {
+    return parseGap(cls);
+  }
+
+  return null;
+}
+
+/**
+ * Parse margin classes
+ */
+function parseMargin(cls: string): StyleObject | null {
+  // m-4 -> margin: 16
+  const allMatch = cls.match(/^m-(\d+(?:\.\d+)?)$/);
+  if (allMatch) {
+    const value = SPACING_SCALE[allMatch[1]];
+    if (value !== undefined) {
+      return { margin: value };
+    }
+  }
+
+  // mx-4 -> marginHorizontal: 16
+  const xMatch = cls.match(/^mx-(\d+(?:\.\d+)?)$/);
+  if (xMatch) {
+    const value = SPACING_SCALE[xMatch[1]];
+    if (value !== undefined) {
+      return { marginHorizontal: value };
+    }
+  }
+
+  // my-4 -> marginVertical: 16
+  const yMatch = cls.match(/^my-(\d+(?:\.\d+)?)$/);
+  if (yMatch) {
+    const value = SPACING_SCALE[yMatch[1]];
+    if (value !== undefined) {
+      return { marginVertical: value };
+    }
+  }
+
+  // mt-4 -> marginTop: 16
+  const tMatch = cls.match(/^mt-(\d+(?:\.\d+)?)$/);
+  if (tMatch) {
+    const value = SPACING_SCALE[tMatch[1]];
+    if (value !== undefined) {
+      return { marginTop: value };
+    }
+  }
+
+  // mr-4 -> marginRight: 16
+  const rMatch = cls.match(/^mr-(\d+(?:\.\d+)?)$/);
+  if (rMatch) {
+    const value = SPACING_SCALE[rMatch[1]];
+    if (value !== undefined) {
+      return { marginRight: value };
+    }
+  }
+
+  // mb-4 -> marginBottom: 16
+  const bMatch = cls.match(/^mb-(\d+(?:\.\d+)?)$/);
+  if (bMatch) {
+    const value = SPACING_SCALE[bMatch[1]];
+    if (value !== undefined) {
+      return { marginBottom: value };
+    }
+  }
+
+  // ml-4 -> marginLeft: 16
+  const lMatch = cls.match(/^ml-(\d+(?:\.\d+)?)$/);
+  if (lMatch) {
+    const value = SPACING_SCALE[lMatch[1]];
+    if (value !== undefined) {
+      return { marginLeft: value };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Parse padding classes
+ */
+function parsePadding(cls: string): StyleObject | null {
+  // p-4 -> padding: 16
+  const allMatch = cls.match(/^p-(\d+(?:\.\d+)?)$/);
+  if (allMatch) {
+    const value = SPACING_SCALE[allMatch[1]];
+    if (value !== undefined) {
+      return { padding: value };
+    }
+  }
+
+  // px-4 -> paddingHorizontal: 16
+  const xMatch = cls.match(/^px-(\d+(?:\.\d+)?)$/);
+  if (xMatch) {
+    const value = SPACING_SCALE[xMatch[1]];
+    if (value !== undefined) {
+      return { paddingHorizontal: value };
+    }
+  }
+
+  // py-4 -> paddingVertical: 16
+  const yMatch = cls.match(/^py-(\d+(?:\.\d+)?)$/);
+  if (yMatch) {
+    const value = SPACING_SCALE[yMatch[1]];
+    if (value !== undefined) {
+      return { paddingVertical: value };
+    }
+  }
+
+  // pt-4 -> paddingTop: 16
+  const tMatch = cls.match(/^pt-(\d+(?:\.\d+)?)$/);
+  if (tMatch) {
+    const value = SPACING_SCALE[tMatch[1]];
+    if (value !== undefined) {
+      return { paddingTop: value };
+    }
+  }
+
+  // pr-4 -> paddingRight: 16
+  const rMatch = cls.match(/^pr-(\d+(?:\.\d+)?)$/);
+  if (rMatch) {
+    const value = SPACING_SCALE[rMatch[1]];
+    if (value !== undefined) {
+      return { paddingRight: value };
+    }
+  }
+
+  // pb-4 -> paddingBottom: 16
+  const bMatch = cls.match(/^pb-(\d+(?:\.\d+)?)$/);
+  if (bMatch) {
+    const value = SPACING_SCALE[bMatch[1]];
+    if (value !== undefined) {
+      return { paddingBottom: value };
+    }
+  }
+
+  // pl-4 -> paddingLeft: 16
+  const lMatch = cls.match(/^pl-(\d+(?:\.\d+)?)$/);
+  if (lMatch) {
+    const value = SPACING_SCALE[lMatch[1]];
+    if (value !== undefined) {
+      return { paddingLeft: value };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Parse gap classes
+ */
+function parseGap(cls: string): StyleObject | null {
+  // gap-4 -> gap: 16
+  const match = cls.match(/^gap-(\d+(?:\.\d+)?)$/);
+  if (match) {
+    const value = SPACING_SCALE[match[1]];
+    if (value !== undefined) {
+      return { gap: value };
+    }
+  }
+
+  return null;
+}

package/src/parser/typography.ts

@@ -0,0 +1,156 @@
+/**
+ * Typography utilities (font size, weight, line height, text align)
+ */
+
+import type { StyleObject } from "../types";
+
+// Font sizes
+export const FONT_SIZES: Record<string, number> = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 30,
+  "4xl": 36,
+  "5xl": 48,
+  "6xl": 60,
+  "7xl": 72,
+  "8xl": 96,
+  "9xl": 128,
+};
+
+/**
+ * Parse typography classes
+ */
+export function parseTypography(cls: string): StyleObject | null {
+  // Font size: text-base, text-lg, etc.
+  if (cls.startsWith("text-")) {
+    const sizeKey = cls.substring(5);
+    const fontSize = FONT_SIZES[sizeKey];
+    if (fontSize !== undefined) {
+      return { fontSize };
+    }
+  }
+
+  // Font weight
+  if (cls === "font-thin") {
+    return { fontWeight: "100" };
+  }
+
+  if (cls === "font-extralight") {
+    return { fontWeight: "200" };
+  }
+
+  if (cls === "font-light") {
+    return { fontWeight: "300" };
+  }
+
+  if (cls === "font-normal") {
+    return { fontWeight: "400" };
+  }
+
+  if (cls === "font-medium") {
+    return { fontWeight: "500" };
+  }
+
+  if (cls === "font-semibold") {
+    return { fontWeight: "600" };
+  }
+
+  if (cls === "font-bold") {
+    return { fontWeight: "700" };
+  }
+
+  if (cls === "font-extrabold") {
+    return { fontWeight: "800" };
+  }
+
+  if (cls === "font-black") {
+    return { fontWeight: "900" };
+  }
+
+  // Font style
+  if (cls === "italic") {
+    return { fontStyle: "italic" };
+  }
+
+  if (cls === "not-italic") {
+    return { fontStyle: "normal" };
+  }
+
+  // Text align
+  if (cls === "text-left") {
+    return { textAlign: "left" };
+  }
+
+  if (cls === "text-center") {
+    return { textAlign: "center" };
+  }
+
+  if (cls === "text-right") {
+    return { textAlign: "right" };
+  }
+
+  if (cls === "text-justify") {
+    return { textAlign: "justify" };
+  }
+
+  // Text decoration
+  if (cls === "underline") {
+    return { textDecorationLine: "underline" };
+  }
+
+  if (cls === "line-through") {
+    return { textDecorationLine: "line-through" };
+  }
+
+  if (cls === "no-underline") {
+    return { textDecorationLine: "none" };
+  }
+
+  // Text transform
+  if (cls === "uppercase") {
+    return { textTransform: "uppercase" };
+  }
+
+  if (cls === "lowercase") {
+    return { textTransform: "lowercase" };
+  }
+
+  if (cls === "capitalize") {
+    return { textTransform: "capitalize" };
+  }
+
+  if (cls === "normal-case") {
+    return { textTransform: "none" };
+  }
+
+  // Line height
+  if (cls === "leading-none") {
+    return { lineHeight: 16 };
+  }
+
+  if (cls === "leading-tight") {
+    return { lineHeight: 20 };
+  }
+
+  if (cls === "leading-snug") {
+    return { lineHeight: 22 };
+  }
+
+  if (cls === "leading-normal") {
+    return { lineHeight: 24 };
+  }
+
+  if (cls === "leading-relaxed") {
+    return { lineHeight: 28 };
+  }
+
+  if (cls === "leading-loose") {
+    return { lineHeight: 32 };
+  }
+
+  return null;
+}