@mgcrea/react-native-tailwind 0.12.0 → 0.12.1

package/src/parser/typography.ts

@@ -113,14 +113,14 @@ const TRACKING_MAP: Record<string, StyleObject> = {
 };
 
 /**
- * Parse arbitrary font size value: [18px], [20]
- * Returns number for px values, null for unsupported formats
+ * Parse arbitrary font size value: [18px], [20], [13.5px], [.5]
+ * Returns number for px values (including decimals), null for unsupported formats
  */
 function parseArbitraryFontSize(value: string): number | null {
-  // Match: [18px] or [18] (pixels only)
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  // Match: [18px], [18], [13.5px], [13.5], [.5] (pixels, including decimals)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
 
   // Warn about unsupported formats
@@ -128,7 +128,7 @@ function parseArbitraryFontSize(value: string): number | null {
     /* v8 ignore next 5 */
     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]).`,
+        `[react-native-tailwind] Unsupported arbitrary font size value: ${value}. Only px values are supported (e.g., [18px], [13.5px], [.5]).`,
       );
     }
     return null;
@@ -138,14 +138,14 @@ function parseArbitraryFontSize(value: string): number | null {
 }
 
 /**
- * Parse arbitrary line height value: [24px], [28]
- * Returns number for px values, null for unsupported formats
+ * Parse arbitrary line height value: [24px], [28], [21.5px], [.5]
+ * Returns number for px values (including decimals), null for unsupported formats
  */
 function parseArbitraryLineHeight(value: string): number | null {
-  // Match: [24px] or [24] (pixels only)
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  // Match: [24px], [24], [21.5px], [21.5], [.5] (pixels, including decimals)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
 
   // Warn about unsupported formats
@@ -153,7 +153,32 @@ function parseArbitraryLineHeight(value: string): number | null {
     /* v8 ignore next 5 */
     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]).`,
+        `[react-native-tailwind] Unsupported arbitrary line height value: ${value}. Only px values are supported (e.g., [24px], [21.5px], [.5]).`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
+/**
+ * Parse arbitrary letter spacing value: [0.5px], [0.3], [.5], [-0.4]
+ * Returns number for px values (including decimals), null for unsupported formats
+ */
+function parseArbitraryLetterSpacing(value: string): number | null {
+  // Match: [0.5px], [0.3], [.5], [-0.4px] (pixels, including decimals and negatives)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseFloat(pxMatch[1]);
+  }
+
+  // Warn about unsupported formats
+  if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary letter spacing value: ${value}. Only px values are supported (e.g., [0.5px], [0.3], [.5], [-0.4]).`,
       );
     }
     return null;
@@ -166,8 +191,13 @@ function parseArbitraryLineHeight(value: string): number | null {
  * Parse typography classes
  * @param cls - Class name to parse
  * @param customFontFamily - Optional custom fontFamily from tailwind.config
+ * @param customFontSize - Optional custom fontSize from tailwind.config
  */
-export function parseTypography(cls: string, customFontFamily?: Record<string, string>): StyleObject | null {
+export function parseTypography(
+  cls: string,
+  customFontFamily?: Record<string, string>,
+  customFontSize?: Record<string, number>,
+): StyleObject | null {
   // Merge custom fontFamily with defaults (custom takes precedence)
   const fontFamilyMap = customFontFamily
     ? {
@@ -182,13 +212,18 @@ export function parseTypography(cls: string, customFontFamily?: Record<string, s
   if (cls.startsWith("text-")) {
     const sizeKey = cls.substring(5);
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitraryFontSize(sizeKey);
     if (arbitraryValue !== null) {
       return { fontSize: arbitraryValue };
     }
 
-    // Try preset scale
+    // Try custom fontSize from config
+    if (customFontSize?.[sizeKey] !== undefined) {
+      return { fontSize: customFontSize[sizeKey] };
+    }
+
+    // Try preset scale (fallback)
     const fontSize = FONT_SIZES[sizeKey];
     if (fontSize !== undefined) {
       return { fontSize };
@@ -212,6 +247,17 @@ export function parseTypography(cls: string, customFontFamily?: Record<string, s
     }
   }
 
+  // Letter spacing: tracking-wide, tracking-[0.5px], tracking-[.3], etc.
+  if (cls.startsWith("tracking-")) {
+    const trackingKey = cls.substring(9);
+
+    // Try arbitrary value first
+    const arbitraryValue = parseArbitraryLetterSpacing(trackingKey);
+    if (arbitraryValue !== null) {
+      return { letterSpacing: arbitraryValue };
+    }
+  }
+
   // Try each lookup table in order
   return (
     fontFamilyMap[cls] ??