@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/src/parser/spacing.ts

@@ -43,92 +43,85 @@ export const SPACING_SCALE: Record<string, number> = {
 };
 
 /**
- * Parse spacing classes (margin, padding, gap)
- * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4
+ * Parse arbitrary spacing value: [16px], [20]
+ * Returns number for px values, null for unsupported formats
  */
-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);
+function parseArbitrarySpacing(value: string): number | null {
+  // Match: [16px] or [16] (pixels only)
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
+  }
+
+  // Warn about unsupported formats
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`,
+      );
+    }
+    return null;
   }
 
   return null;
 }
 
 /**
- * Parse margin classes
+ * Parse spacing classes (margin, padding, gap)
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px]
  */
-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 };
+export function parseSpacing(cls: string): StyleObject | null {
+  // Margin: m-4, mx-2, mt-8, m-[16px], etc.
+  const marginMatch = cls.match(/^m([xytrbls]?)-(.+)$/);
+  if (marginMatch) {
+    const [, dir, valueStr] = marginMatch;
+
+    // Try arbitrary value first
+    const arbitraryValue = parseArbitrarySpacing(valueStr);
+    if (arbitraryValue !== null) {
+      return getMarginStyle(dir, arbitraryValue);
     }
-  }
 
-  // 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 };
+    // Try preset scale
+    const scaleValue = SPACING_SCALE[valueStr];
+    if (scaleValue !== undefined) {
+      return getMarginStyle(dir, scaleValue);
     }
   }
 
-  // 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 };
-    }
-  }
+  // Padding: p-4, px-2, pt-8, p-[16px], etc.
+  const paddingMatch = cls.match(/^p([xytrbls]?)-(.+)$/);
+  if (paddingMatch) {
+    const [, dir, valueStr] = paddingMatch;
 
-  // 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 };
+    // Try arbitrary value first
+    const arbitraryValue = parseArbitrarySpacing(valueStr);
+    if (arbitraryValue !== null) {
+      return getPaddingStyle(dir, arbitraryValue);
     }
-  }
 
-  // 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 };
+    // Try preset scale
+    const scaleValue = SPACING_SCALE[valueStr];
+    if (scaleValue !== undefined) {
+      return getPaddingStyle(dir, scaleValue);
     }
   }
 
-  // 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 };
+  // Gap: gap-4, gap-[16px]
+  const gapMatch = cls.match(/^gap-(.+)$/);
+  if (gapMatch) {
+    const valueStr = gapMatch[1];
+
+    // Try arbitrary value first
+    const arbitraryValue = parseArbitrarySpacing(valueStr);
+    if (arbitraryValue !== null) {
+      return { gap: arbitraryValue };
     }
-  }
 
-  // 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 };
+    // Try preset scale
+    const scaleValue = SPACING_SCALE[valueStr];
+    if (scaleValue !== undefined) {
+      return { gap: scaleValue };
     }
   }
 
@@ -136,87 +129,49 @@ function parseMargin(cls: string): StyleObject | null {
 }
 
 /**
- * Parse padding classes
+ * Get margin style object based on direction
  */
-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 };
-    }
+function getMarginStyle(dir: string, value: number): StyleObject {
+  switch (dir) {
+    case "":
+      return { margin: value };
+    case "x":
+      return { marginHorizontal: value };
+    case "y":
+      return { marginVertical: value };
+    case "t":
+      return { marginTop: value };
+    case "r":
+      return { marginRight: value };
+    case "b":
+      return { marginBottom: value };
+    case "l":
+      return { marginLeft: value };
+    default:
+      return {};
   }
+}
 
-  // px-4 -> paddingHorizontal: 16
-  const xMatch = cls.match(/^px-(\d+(?:\.\d+)?)$/);
-  if (xMatch) {
-    const value = SPACING_SCALE[xMatch[1]];
-    if (value !== undefined) {
+/**
+ * Get padding style object based on direction
+ */
+function getPaddingStyle(dir: string, value: number): StyleObject {
+  switch (dir) {
+    case "":
+      return { padding: value };
+    case "x":
       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) {
+    case "y":
       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) {
+    case "t":
       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) {
+    case "r":
       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) {
+    case "b":
       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) {
+    case "l":
       return { paddingLeft: value };
-    }
+    default:
+      return {};
   }
-
-  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.test.ts

@@ -0,0 +1,221 @@
+import { describe, expect, it } from "vitest";
+import { FONT_SIZES, LETTER_SPACING_SCALE, parseTypography } from "./typography";
+
+describe("FONT_SIZES", () => {
+  it("should export complete font size scale", () => {
+    expect(FONT_SIZES).toMatchSnapshot();
+  });
+});
+
+describe("LETTER_SPACING_SCALE", () => {
+  it("should export complete letter spacing scale", () => {
+    expect(LETTER_SPACING_SCALE).toMatchSnapshot();
+  });
+});
+
+describe("parseTypography - font size", () => {
+  it("should parse font size with preset values", () => {
+    expect(parseTypography("text-xs")).toEqual({ fontSize: 12 });
+    expect(parseTypography("text-sm")).toEqual({ fontSize: 14 });
+    expect(parseTypography("text-base")).toEqual({ fontSize: 16 });
+    expect(parseTypography("text-lg")).toEqual({ fontSize: 18 });
+    expect(parseTypography("text-xl")).toEqual({ fontSize: 20 });
+    expect(parseTypography("text-2xl")).toEqual({ fontSize: 24 });
+    expect(parseTypography("text-3xl")).toEqual({ fontSize: 30 });
+    expect(parseTypography("text-4xl")).toEqual({ fontSize: 36 });
+    expect(parseTypography("text-5xl")).toEqual({ fontSize: 48 });
+    expect(parseTypography("text-6xl")).toEqual({ fontSize: 60 });
+    expect(parseTypography("text-7xl")).toEqual({ fontSize: 72 });
+    expect(parseTypography("text-8xl")).toEqual({ fontSize: 96 });
+    expect(parseTypography("text-9xl")).toEqual({ fontSize: 128 });
+  });
+
+  it("should parse font size with arbitrary pixel values", () => {
+    expect(parseTypography("text-[18px]")).toEqual({ fontSize: 18 });
+    expect(parseTypography("text-[18]")).toEqual({ fontSize: 18 });
+    expect(parseTypography("text-[22px]")).toEqual({ fontSize: 22 });
+    expect(parseTypography("text-[22]")).toEqual({ fontSize: 22 });
+    expect(parseTypography("text-[100px]")).toEqual({ fontSize: 100 });
+  });
+});
+
+describe("parseTypography - font weight", () => {
+  it("should parse font weight values", () => {
+    expect(parseTypography("font-thin")).toEqual({ fontWeight: "100" });
+    expect(parseTypography("font-extralight")).toEqual({ fontWeight: "200" });
+    expect(parseTypography("font-light")).toEqual({ fontWeight: "300" });
+    expect(parseTypography("font-normal")).toEqual({ fontWeight: "400" });
+    expect(parseTypography("font-medium")).toEqual({ fontWeight: "500" });
+    expect(parseTypography("font-semibold")).toEqual({ fontWeight: "600" });
+    expect(parseTypography("font-bold")).toEqual({ fontWeight: "700" });
+    expect(parseTypography("font-extrabold")).toEqual({ fontWeight: "800" });
+    expect(parseTypography("font-black")).toEqual({ fontWeight: "900" });
+  });
+});
+
+describe("parseTypography - font style", () => {
+  it("should parse font style values", () => {
+    expect(parseTypography("italic")).toEqual({ fontStyle: "italic" });
+    expect(parseTypography("not-italic")).toEqual({ fontStyle: "normal" });
+  });
+});
+
+describe("parseTypography - text alignment", () => {
+  it("should parse text alignment values", () => {
+    expect(parseTypography("text-left")).toEqual({ textAlign: "left" });
+    expect(parseTypography("text-center")).toEqual({ textAlign: "center" });
+    expect(parseTypography("text-right")).toEqual({ textAlign: "right" });
+    expect(parseTypography("text-justify")).toEqual({ textAlign: "justify" });
+  });
+});
+
+describe("parseTypography - text decoration", () => {
+  it("should parse text decoration values", () => {
+    expect(parseTypography("underline")).toEqual({
+      textDecorationLine: "underline",
+    });
+    expect(parseTypography("line-through")).toEqual({
+      textDecorationLine: "line-through",
+    });
+    expect(parseTypography("no-underline")).toEqual({
+      textDecorationLine: "none",
+    });
+  });
+});
+
+describe("parseTypography - text transform", () => {
+  it("should parse text transform values", () => {
+    expect(parseTypography("uppercase")).toEqual({
+      textTransform: "uppercase",
+    });
+    expect(parseTypography("lowercase")).toEqual({
+      textTransform: "lowercase",
+    });
+    expect(parseTypography("capitalize")).toEqual({
+      textTransform: "capitalize",
+    });
+    expect(parseTypography("normal-case")).toEqual({ textTransform: "none" });
+  });
+});
+
+describe("parseTypography - line height", () => {
+  it("should parse line height with preset values", () => {
+    expect(parseTypography("leading-none")).toEqual({ lineHeight: 16 });
+    expect(parseTypography("leading-tight")).toEqual({ lineHeight: 20 });
+    expect(parseTypography("leading-snug")).toEqual({ lineHeight: 22 });
+    expect(parseTypography("leading-normal")).toEqual({ lineHeight: 24 });
+    expect(parseTypography("leading-relaxed")).toEqual({ lineHeight: 28 });
+    expect(parseTypography("leading-loose")).toEqual({ lineHeight: 32 });
+  });
+
+  it("should parse line height with arbitrary pixel values", () => {
+    expect(parseTypography("leading-[24px]")).toEqual({ lineHeight: 24 });
+    expect(parseTypography("leading-[24]")).toEqual({ lineHeight: 24 });
+    expect(parseTypography("leading-[30px]")).toEqual({ lineHeight: 30 });
+    expect(parseTypography("leading-[30]")).toEqual({ lineHeight: 30 });
+    expect(parseTypography("leading-[50px]")).toEqual({ lineHeight: 50 });
+  });
+});
+
+describe("parseTypography - letter spacing", () => {
+  it("should parse letter spacing with preset values", () => {
+    expect(parseTypography("tracking-tighter")).toEqual({
+      letterSpacing: -0.8,
+    });
+    expect(parseTypography("tracking-tight")).toEqual({ letterSpacing: -0.4 });
+    expect(parseTypography("tracking-normal")).toEqual({ letterSpacing: 0 });
+    expect(parseTypography("tracking-wide")).toEqual({ letterSpacing: 0.4 });
+    expect(parseTypography("tracking-wider")).toEqual({ letterSpacing: 0.8 });
+    expect(parseTypography("tracking-widest")).toEqual({ letterSpacing: 1.6 });
+  });
+});
+
+describe("parseTypography - edge cases", () => {
+  it("should return null for invalid classes", () => {
+    expect(parseTypography("invalid")).toBeNull();
+    expect(parseTypography("text")).toBeNull();
+    expect(parseTypography("font")).toBeNull();
+    expect(parseTypography("leading")).toBeNull();
+    expect(parseTypography("tracking")).toBeNull();
+  });
+
+  it("should return null for invalid font size values", () => {
+    expect(parseTypography("text-invalid")).toBeNull();
+    expect(parseTypography("text-10xl")).toBeNull();
+  });
+
+  it("should return null for invalid font weight values", () => {
+    expect(parseTypography("font-invalid")).toBeNull();
+    expect(parseTypography("font-100")).toBeNull();
+  });
+
+  it("should return null for arbitrary values with unsupported units", () => {
+    expect(parseTypography("text-[16rem]")).toBeNull();
+    expect(parseTypography("text-[2em]")).toBeNull();
+    expect(parseTypography("leading-[2rem]")).toBeNull();
+    expect(parseTypography("leading-[1.5em]")).toBeNull();
+  });
+
+  it("should return null for malformed arbitrary values", () => {
+    expect(parseTypography("text-[16")).toBeNull();
+    expect(parseTypography("text-16]")).toBeNull();
+    expect(parseTypography("text-[]")).toBeNull();
+    expect(parseTypography("leading-[24")).toBeNull();
+    expect(parseTypography("leading-24]")).toBeNull();
+  });
+
+  it("should not match partial class names", () => {
+    expect(parseTypography("mytext-lg")).toBeNull();
+    expect(parseTypography("font-bold-extra")).toBeNull();
+    expect(parseTypography("italic-text")).toBeNull();
+  });
+});
+
+describe("parseTypography - comprehensive coverage", () => {
+  it("should handle all typography categories independently", () => {
+    // Font size
+    expect(parseTypography("text-base")).toEqual({ fontSize: 16 });
+    // Font weight
+    expect(parseTypography("font-bold")).toEqual({ fontWeight: "700" });
+    // Font style
+    expect(parseTypography("italic")).toEqual({ fontStyle: "italic" });
+    // Text alignment
+    expect(parseTypography("text-center")).toEqual({ textAlign: "center" });
+    // Text decoration
+    expect(parseTypography("underline")).toEqual({
+      textDecorationLine: "underline",
+    });
+    // Text transform
+    expect(parseTypography("uppercase")).toEqual({
+      textTransform: "uppercase",
+    });
+    // Line height
+    expect(parseTypography("leading-normal")).toEqual({ lineHeight: 24 });
+    // Letter spacing
+    expect(parseTypography("tracking-wide")).toEqual({ letterSpacing: 0.4 });
+  });
+
+  it("should handle arbitrary values for font size and line height", () => {
+    expect(parseTypography("text-[19px]")).toEqual({ fontSize: 19 });
+    expect(parseTypography("text-[19]")).toEqual({ fontSize: 19 });
+    expect(parseTypography("leading-[26px]")).toEqual({ lineHeight: 26 });
+    expect(parseTypography("leading-[26]")).toEqual({ lineHeight: 26 });
+  });
+
+  it("should handle edge case values", () => {
+    // Smallest font size
+    expect(parseTypography("text-xs")).toEqual({ fontSize: 12 });
+    // Largest font size
+    expect(parseTypography("text-9xl")).toEqual({ fontSize: 128 });
+    // Smallest line height
+    expect(parseTypography("leading-none")).toEqual({ lineHeight: 16 });
+    // Largest line height
+    expect(parseTypography("leading-loose")).toEqual({ lineHeight: 32 });
+    // Negative letter spacing
+    expect(parseTypography("tracking-tighter")).toEqual({
+      letterSpacing: -0.8,
+    });
+    // Positive letter spacing
+    expect(parseTypography("tracking-widest")).toEqual({ letterSpacing: 1.6 });
+  });
+});