@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/src/parser/typography.ts

@@ -1,5 +1,5 @@
 /**
- * Typography utilities (font size, weight, line height, text align)
+ * Typography utilities (font size, weight, line height, text align, letter spacing)
  */
 
 import type { StyleObject } from "../types";
@@ -21,136 +21,167 @@ export const FONT_SIZES: Record<string, number> = {
   "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" };
-  }
+// Letter spacing scale
+export const LETTER_SPACING_SCALE: Record<string, number> = {
+  tighter: -0.8,
+  tight: -0.4,
+  normal: 0,
+  wide: 0.4,
+  wider: 0.8,
+  widest: 1.6,
+};
 
-  if (cls === "text-center") {
-    return { textAlign: "center" };
-  }
+// Font weight utilities
+const FONT_WEIGHT_MAP: Record<string, StyleObject> = {
+  "font-thin": { fontWeight: "100" },
+  "font-extralight": { fontWeight: "200" },
+  "font-light": { fontWeight: "300" },
+  "font-normal": { fontWeight: "400" },
+  "font-medium": { fontWeight: "500" },
+  "font-semibold": { fontWeight: "600" },
+  "font-bold": { fontWeight: "700" },
+  "font-extrabold": { fontWeight: "800" },
+  "font-black": { fontWeight: "900" },
+};
 
-  if (cls === "text-right") {
-    return { textAlign: "right" };
-  }
+// Font style utilities
+const FONT_STYLE_MAP: Record<string, StyleObject> = {
+  italic: { fontStyle: "italic" },
+  "not-italic": { fontStyle: "normal" },
+};
 
-  if (cls === "text-justify") {
-    return { textAlign: "justify" };
-  }
+// Text alignment utilities
+const TEXT_ALIGN_MAP: Record<string, StyleObject> = {
+  "text-left": { textAlign: "left" },
+  "text-center": { textAlign: "center" },
+  "text-right": { textAlign: "right" },
+  "text-justify": { textAlign: "justify" },
+};
 
-  // Text decoration
-  if (cls === "underline") {
-    return { textDecorationLine: "underline" };
-  }
+// Text decoration utilities
+const TEXT_DECORATION_MAP: Record<string, StyleObject> = {
+  underline: { textDecorationLine: "underline" },
+  "line-through": { textDecorationLine: "line-through" },
+  "no-underline": { textDecorationLine: "none" },
+};
 
-  if (cls === "line-through") {
-    return { textDecorationLine: "line-through" };
-  }
+// Text transform utilities
+const TEXT_TRANSFORM_MAP: Record<string, StyleObject> = {
+  uppercase: { textTransform: "uppercase" },
+  lowercase: { textTransform: "lowercase" },
+  capitalize: { textTransform: "capitalize" },
+  "normal-case": { textTransform: "none" },
+};
 
-  if (cls === "no-underline") {
-    return { textDecorationLine: "none" };
-  }
+// Line height utilities
+const LINE_HEIGHT_MAP: Record<string, StyleObject> = {
+  "leading-none": { lineHeight: 16 },
+  "leading-tight": { lineHeight: 20 },
+  "leading-snug": { lineHeight: 22 },
+  "leading-normal": { lineHeight: 24 },
+  "leading-relaxed": { lineHeight: 28 },
+  "leading-loose": { lineHeight: 32 },
+};
 
-  // Text transform
-  if (cls === "uppercase") {
-    return { textTransform: "uppercase" };
-  }
+// Letter spacing utilities
+const TRACKING_MAP: Record<string, StyleObject> = {
+  "tracking-tighter": { letterSpacing: -0.8 },
+  "tracking-tight": { letterSpacing: -0.4 },
+  "tracking-normal": { letterSpacing: 0 },
+  "tracking-wide": { letterSpacing: 0.4 },
+  "tracking-wider": { letterSpacing: 0.8 },
+  "tracking-widest": { letterSpacing: 1.6 },
+};
 
-  if (cls === "lowercase") {
-    return { textTransform: "lowercase" };
+/**
+ * Parse arbitrary font size value: [18px], [20]
+ * Returns number for px values, null for unsupported formats
+ */
+function parseArbitraryFontSize(value: string): number | null {
+  // Match: [18px] or [18] (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 font size value: ${value}. Only px values are supported (e.g., [18px] or [18]).`,
+      );
+    }
+    return null;
   }
 
-  if (cls === "capitalize") {
-    return { textTransform: "capitalize" };
-  }
+  return null;
+}
 
-  if (cls === "normal-case") {
-    return { textTransform: "none" };
+/**
+ * Parse arbitrary line height value: [24px], [28]
+ * Returns number for px values, null for unsupported formats
+ */
+function parseArbitraryLineHeight(value: string): number | null {
+  // Match: [24px] or [24] (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 line height value: ${value}. Only px values are supported (e.g., [24px] or [24]).`,
+      );
+    }
+    return null;
   }
 
-  // Line height
-  if (cls === "leading-none") {
-    return { lineHeight: 16 };
-  }
+  return null;
+}
 
-  if (cls === "leading-tight") {
-    return { lineHeight: 20 };
-  }
+/**
+ * Parse typography classes
+ */
+export function parseTypography(cls: string): StyleObject | null {
+  // Font size: text-base, text-lg, text-[18px], etc.
+  if (cls.startsWith("text-")) {
+    const sizeKey = cls.substring(5);
 
-  if (cls === "leading-snug") {
-    return { lineHeight: 22 };
-  }
+    // Try arbitrary value first
+    const arbitraryValue = parseArbitraryFontSize(sizeKey);
+    if (arbitraryValue !== null) {
+      return { fontSize: arbitraryValue };
+    }
 
-  if (cls === "leading-normal") {
-    return { lineHeight: 24 };
+    // Try preset scale
+    const fontSize = FONT_SIZES[sizeKey];
+    if (fontSize !== undefined) {
+      return { fontSize };
+    }
   }
 
-  if (cls === "leading-relaxed") {
-    return { lineHeight: 28 };
-  }
+  // Line height: leading-normal, leading-[24px], etc.
+  if (cls.startsWith("leading-")) {
+    const heightKey = cls.substring(8);
 
-  if (cls === "leading-loose") {
-    return { lineHeight: 32 };
+    // Try arbitrary value first
+    const arbitraryValue = parseArbitraryLineHeight(heightKey);
+    if (arbitraryValue !== null) {
+      return { lineHeight: arbitraryValue };
+    }
   }
 
-  return null;
+  // Try each lookup table in order
+  return (
+    FONT_WEIGHT_MAP[cls] ??
+    FONT_STYLE_MAP[cls] ??
+    TEXT_ALIGN_MAP[cls] ??
+    TEXT_DECORATION_MAP[cls] ??
+    TEXT_TRANSFORM_MAP[cls] ??
+    LINE_HEIGHT_MAP[cls] ??
+    TRACKING_MAP[cls] ??
+    null
+  );
 }

package/src/types.ts

@@ -6,8 +6,8 @@ import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
 
 export type RNStyle = ViewStyle | TextStyle | ImageStyle;
 
-export type StyleObject = {
-  [key: string]: string | number;
+export type StyleObject = Record<Exclude<string, "shadowOffset">, string | number | undefined> & {
+  shadowOffset?: { width: number; height: number };
 };
 
 export type SpacingValue = number;

package/dist/react-native.d.js

@@ -1 +0,0 @@
-require("react-native");