@mgcrea/react-native-tailwind 0.14.0 → 0.15.0

package/src/parser/sizing.ts

@@ -95,8 +95,13 @@ function parseArbitrarySize(value: string): number | string | null {
 
 /**
  * Parse sizing classes
+ * @param cls - The class name to parse
+ * @param customSpacing - Optional custom spacing values from tailwind.config (shared with spacing utilities)
  */
-export function parseSizing(cls: string): StyleObject | null {
+export function parseSizing(cls: string, customSpacing?: Record<string, number>): StyleObject | null {
+  // Merge custom spacing with defaults (custom takes precedence)
+  const sizeMap = customSpacing ? { ...SIZE_SCALE, ...customSpacing } : SIZE_SCALE;
+
   // Width
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
@@ -106,7 +111,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { width: `${RUNTIME_DIMENSIONS_MARKER}width}}` } as StyleObject;
     }
 
-    // Arbitrary values: w-[123px], w-[50%]
+    // Arbitrary values: w-[123px], w-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { width: arbitrarySize };
@@ -118,8 +123,8 @@ export function parseSizing(cls: string): StyleObject | null {
       return { width: percentage };
     }
 
-    // Numeric widths: w-4, w-8, etc.
-    const numericSize = SIZE_SCALE[sizeKey];
+    // Numeric widths: w-4, w-8, etc. (includes custom spacing)
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { width: numericSize };
     }
@@ -139,7 +144,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { height: `${RUNTIME_DIMENSIONS_MARKER}height}}` } as StyleObject;
     }
 
-    // Arbitrary values: h-[123px], h-[50%]
+    // Arbitrary values: h-[123px], h-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { height: arbitrarySize };
@@ -151,8 +156,8 @@ export function parseSizing(cls: string): StyleObject | null {
       return { height: percentage };
     }
 
-    // Numeric heights: h-4, h-8, etc.
-    const numericSize = SIZE_SCALE[sizeKey];
+    // Numeric heights: h-4, h-8, etc. (includes custom spacing)
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { height: numericSize };
     }
@@ -167,7 +172,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("min-w-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: min-w-[123px], min-w-[50%]
+    // Arbitrary values: min-w-[123px], min-w-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { minWidth: arbitrarySize };
@@ -178,7 +183,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { minWidth: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { minWidth: numericSize };
     }
@@ -188,7 +193,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("min-h-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: min-h-[123px], min-h-[50%]
+    // Arbitrary values: min-h-[123px], min-h-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { minHeight: arbitrarySize };
@@ -199,7 +204,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { minHeight: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { minHeight: numericSize };
     }
@@ -209,7 +214,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("max-w-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: max-w-[123px], max-w-[50%]
+    // Arbitrary values: max-w-[123px], max-w-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { maxWidth: arbitrarySize };
@@ -220,7 +225,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { maxWidth: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { maxWidth: numericSize };
     }
@@ -230,7 +235,7 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("max-h-")) {
     const sizeKey = cls.substring(6);
 
-    // Arbitrary values: max-h-[123px], max-h-[50%]
+    // Arbitrary values: max-h-[123px], max-h-[50%] (highest priority)
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { maxHeight: arbitrarySize };
@@ -241,7 +246,7 @@ export function parseSizing(cls: string): StyleObject | null {
       return { maxHeight: percentage };
     }
 
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== undefined) {
       return { maxHeight: numericSize };
     }

package/src/parser/spacing.test.ts

@@ -415,3 +415,60 @@ describe("parseSpacing - logical padding (RTL-aware)", () => {
     expect(parseSpacing("pe-[24]")).toEqual({ paddingEnd: 24 });
   });
 });
+
+describe("parseSpacing - custom spacing", () => {
+  const customSpacing = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 32,
+    xl: 64,
+    "4": 20, // Override default (16)
+  };
+
+  it("should support custom spacing values for margin", () => {
+    expect(parseSpacing("m-xs", customSpacing)).toEqual({ margin: 4 });
+    expect(parseSpacing("m-sm", customSpacing)).toEqual({ margin: 8 });
+    expect(parseSpacing("m-lg", customSpacing)).toEqual({ margin: 32 });
+    expect(parseSpacing("mx-xl", customSpacing)).toEqual({ marginHorizontal: 64 });
+    expect(parseSpacing("mt-md", customSpacing)).toEqual({ marginTop: 16 });
+  });
+
+  it("should support custom spacing values for padding", () => {
+    expect(parseSpacing("p-xs", customSpacing)).toEqual({ padding: 4 });
+    expect(parseSpacing("p-sm", customSpacing)).toEqual({ padding: 8 });
+    expect(parseSpacing("px-lg", customSpacing)).toEqual({ paddingHorizontal: 32 });
+    expect(parseSpacing("pt-xl", customSpacing)).toEqual({ paddingTop: 64 });
+  });
+
+  it("should support custom spacing values for gap", () => {
+    expect(parseSpacing("gap-xs", customSpacing)).toEqual({ gap: 4 });
+    expect(parseSpacing("gap-md", customSpacing)).toEqual({ gap: 16 });
+    expect(parseSpacing("gap-xl", customSpacing)).toEqual({ gap: 64 });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    expect(parseSpacing("m-4", customSpacing)).toEqual({ margin: 20 }); // Custom 20, not default 16
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseSpacing("m-[24px]", customSpacing)).toEqual({ margin: 24 }); // Arbitrary wins
+    expect(parseSpacing("p-[50]", customSpacing)).toEqual({ padding: 50 }); // Arbitrary wins
+  });
+
+  it("should support negative margins with custom spacing", () => {
+    expect(parseSpacing("-m-xs", customSpacing)).toEqual({ margin: -4 });
+    expect(parseSpacing("-m-lg", customSpacing)).toEqual({ margin: -32 });
+    expect(parseSpacing("-mx-xl", customSpacing)).toEqual({ marginHorizontal: -64 });
+  });
+
+  it("should fall back to preset scale for unknown custom keys", () => {
+    expect(parseSpacing("m-8", customSpacing)).toEqual({ margin: 32 }); // Not overridden, uses preset
+    expect(parseSpacing("p-12", customSpacing)).toEqual({ padding: 48 }); // Not overridden, uses preset
+  });
+
+  it("should work without custom spacing (backward compatible)", () => {
+    expect(parseSpacing("m-4")).toEqual({ margin: 16 }); // Default behavior
+    expect(parseSpacing("p-8")).toEqual({ padding: 32 }); // Default behavior
+  });
+});

package/src/parser/spacing.ts

@@ -70,8 +70,13 @@ function parseArbitrarySpacing(value: string): number | null {
 /**
  * Parse spacing classes (margin, padding, gap)
  * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], pl-[4.5px], -m-4, -mt-[10px], ms-4, pe-2
+ * @param cls - The class name to parse
+ * @param customSpacing - Optional custom spacing values from tailwind.config
  */
-export function parseSpacing(cls: string): StyleObject | null {
+export function parseSpacing(cls: string, customSpacing?: Record<string, number>): StyleObject | null {
+  // Merge custom spacing with defaults (custom takes precedence)
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
+
   // Margin: m-4, mx-2, mt-8, ms-4, me-2, m-[16px], -m-4, -mt-2, etc.
   // Supports negative values for margins (but not padding or gap)
   // s = start (RTL-aware), e = end (RTL-aware)
@@ -80,15 +85,15 @@ export function parseSpacing(cls: string): StyleObject | null {
     const [, negativePrefix, dir, valueStr] = marginMatch;
     const isNegative = negativePrefix === "-";
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
       const finalValue = isNegative ? -arbitraryValue : arbitraryValue;
       return getMarginStyle(dir, finalValue);
     }
 
-    // Try preset scale
-    const scaleValue = SPACING_SCALE[valueStr];
+    // Try spacing scale (includes custom spacing)
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== undefined) {
       const finalValue = isNegative ? -scaleValue : scaleValue;
       return getMarginStyle(dir, finalValue);
@@ -101,14 +106,14 @@ export function parseSpacing(cls: string): StyleObject | null {
   if (paddingMatch) {
     const [, dir, valueStr] = paddingMatch;
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
       return getPaddingStyle(dir, arbitraryValue);
     }
 
-    // Try preset scale
-    const scaleValue = SPACING_SCALE[valueStr];
+    // Try spacing scale (includes custom spacing)
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== undefined) {
       return getPaddingStyle(dir, scaleValue);
     }
@@ -119,14 +124,14 @@ export function parseSpacing(cls: string): StyleObject | null {
   if (gapMatch) {
     const valueStr = gapMatch[1];
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
       return { gap: arbitraryValue };
     }
 
-    // Try preset scale
-    const scaleValue = SPACING_SCALE[valueStr];
+    // Try spacing scale (includes custom spacing)
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== undefined) {
       return { gap: scaleValue };
     }

package/src/parser/transforms.test.ts

@@ -316,3 +316,60 @@ describe("parseTransform - case sensitivity", () => {
     expect(parseTransform("ROTATE-45")).toBeNull();
   });
 });
+
+describe("parseTransform - custom spacing", () => {
+  const customSpacing = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 32,
+    xl: 64,
+    "4": 20, // Override default (16)
+  };
+
+  it("should support custom spacing values for translateX", () => {
+    expect(parseTransform("translate-x-xs", customSpacing)).toEqual({ transform: [{ translateX: 4 }] });
+    expect(parseTransform("translate-x-sm", customSpacing)).toEqual({ transform: [{ translateX: 8 }] });
+    expect(parseTransform("translate-x-lg", customSpacing)).toEqual({ transform: [{ translateX: 32 }] });
+    expect(parseTransform("translate-x-xl", customSpacing)).toEqual({ transform: [{ translateX: 64 }] });
+  });
+
+  it("should support custom spacing values for translateY", () => {
+    expect(parseTransform("translate-y-xs", customSpacing)).toEqual({ transform: [{ translateY: 4 }] });
+    expect(parseTransform("translate-y-md", customSpacing)).toEqual({ transform: [{ translateY: 16 }] });
+    expect(parseTransform("translate-y-xl", customSpacing)).toEqual({ transform: [{ translateY: 64 }] });
+  });
+
+  it("should support negative custom spacing for translate", () => {
+    expect(parseTransform("-translate-x-sm", customSpacing)).toEqual({ transform: [{ translateX: -8 }] });
+    expect(parseTransform("-translate-y-lg", customSpacing)).toEqual({ transform: [{ translateY: -32 }] });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    expect(parseTransform("translate-x-4", customSpacing)).toEqual({ transform: [{ translateX: 20 }] }); // Custom 20, not default 16
+    expect(parseTransform("translate-y-4", customSpacing)).toEqual({ transform: [{ translateY: 20 }] }); // Custom 20, not default 16
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseTransform("translate-x-[24px]", customSpacing)).toEqual({ transform: [{ translateX: 24 }] }); // Arbitrary wins
+    expect(parseTransform("translate-y-[50]", customSpacing)).toEqual({ transform: [{ translateY: 50 }] }); // Arbitrary wins
+  });
+
+  it("should fall back to preset scale for unknown custom keys", () => {
+    expect(parseTransform("translate-x-8", customSpacing)).toEqual({ transform: [{ translateX: 32 }] }); // Not overridden, uses preset
+    expect(parseTransform("translate-y-12", customSpacing)).toEqual({ transform: [{ translateY: 48 }] }); // Not overridden, uses preset
+  });
+
+  it("should work without custom spacing (backward compatible)", () => {
+    expect(parseTransform("translate-x-4")).toEqual({ transform: [{ translateX: 16 }] }); // Default behavior
+    expect(parseTransform("translate-y-8")).toEqual({ transform: [{ translateY: 32 }] }); // Default behavior
+  });
+
+  it("should not affect non-translate transforms", () => {
+    // Scale, rotate, skew, perspective should not use custom spacing
+    expect(parseTransform("scale-110", customSpacing)).toEqual({ transform: [{ scale: 1.1 }] });
+    expect(parseTransform("rotate-45", customSpacing)).toEqual({ transform: [{ rotate: "45deg" }] });
+    expect(parseTransform("skew-x-6", customSpacing)).toEqual({ transform: [{ skewX: "6deg" }] });
+    expect(parseTransform("perspective-500", customSpacing)).toEqual({ transform: [{ perspective: 500 }] });
+  });
+});

package/src/parser/transforms.ts

@@ -164,8 +164,12 @@ function parseArbitraryPerspective(value: string): number | null {
 /**
  * Parse transform classes
  * Each transform class returns a transform array with a single transform object
+ * @param cls - The class name to parse
+ * @param customSpacing - Optional custom spacing values from tailwind.config (for translate utilities)
  */
-export function parseTransform(cls: string): StyleObject | null {
+export function parseTransform(cls: string, customSpacing?: Record<string, number>): StyleObject | null {
+  // Merge custom spacing with defaults for translate utilities
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
   // Transform origin warning (not supported in React Native)
   if (cls.startsWith("origin-")) {
     /* v8 ignore next 5 */
@@ -320,7 +324,7 @@ export function parseTransform(cls: string): StyleObject | null {
       return { transform: [{ translateX: value }] };
     }
 
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== undefined) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateX: value }] };
@@ -346,7 +350,7 @@ export function parseTransform(cls: string): StyleObject | null {
       return { transform: [{ translateY: value }] };
     }
 
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== undefined) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateY: value }] };

package/src/runtime.test.ts

@@ -209,6 +209,155 @@ describe("runtime", () => {
         backgroundColor: "#007AFF",
       });
     });
+
+    it("should set custom fontFamily", () => {
+      setConfig({
+        theme: {
+          extend: {
+            fontFamily: {
+              display: "Inter",
+              body: ["Roboto", "sans-serif"], // Array format - takes first value
+            },
+          },
+        },
+      });
+
+      const theme = getCustomTheme();
+      expect(theme.fontFamily).toEqual({
+        display: "Inter",
+        body: "Roboto",
+      });
+    });
+
+    it("should set custom fontSize", () => {
+      setConfig({
+        theme: {
+          extend: {
+            fontSize: {
+              tiny: 10,
+              small: "12px",
+              medium: 16,
+              large: "24",
+            },
+          },
+        },
+      });
+
+      const theme = getCustomTheme();
+      expect(theme.fontSize).toEqual({
+        tiny: 10,
+        small: 12,
+        medium: 16,
+        large: 24,
+      });
+    });
+
+    it("should set custom spacing", () => {
+      setConfig({
+        theme: {
+          extend: {
+            spacing: {
+              xs: 4,
+              sm: "8px",
+              md: 16,
+              lg: "2rem", // 2rem = 32px
+            },
+          },
+        },
+      });
+
+      const theme = getCustomTheme();
+      expect(theme.spacing).toEqual({
+        xs: 4,
+        sm: 8,
+        md: 16,
+        lg: 32,
+      });
+    });
+
+    it("should use custom fontSize in parsing", () => {
+      setConfig({
+        theme: {
+          extend: {
+            fontSize: {
+              tiny: 10,
+            },
+          },
+        },
+      });
+
+      const result = tw`text-tiny`;
+      expect(result?.style).toEqual({
+        fontSize: 10,
+      });
+    });
+
+    it("should use custom spacing in parsing", () => {
+      setConfig({
+        theme: {
+          extend: {
+            spacing: {
+              xs: 4,
+            },
+          },
+        },
+      });
+
+      const result = tw`m-xs p-xs`;
+      expect(result?.style).toEqual({
+        margin: 4,
+        padding: 4,
+      });
+    });
+
+    it("should reset fontSize and spacing when config is cleared", () => {
+      setConfig({
+        theme: {
+          extend: {
+            fontSize: { tiny: 10 },
+            spacing: { xs: 4 },
+          },
+        },
+      });
+
+      let theme = getCustomTheme();
+      expect(theme.fontSize).toEqual({ tiny: 10 });
+      expect(theme.spacing).toEqual({ xs: 4 });
+
+      setConfig({});
+
+      theme = getCustomTheme();
+      expect(theme.fontSize).toEqual({});
+      expect(theme.spacing).toEqual({});
+    });
+
+    it("should handle all theme extensions together", () => {
+      setConfig({
+        theme: {
+          extend: {
+            colors: { primary: "#007AFF" },
+            fontFamily: { display: "Inter" },
+            fontSize: { tiny: 10 },
+            spacing: { xs: 4 },
+          },
+        },
+      });
+
+      const theme = getCustomTheme();
+      expect(theme.colors).toEqual({ primary: "#007AFF" });
+      expect(theme.fontFamily).toEqual({ display: "Inter" });
+      expect(theme.fontSize).toEqual({ tiny: 10 });
+      expect(theme.spacing).toEqual({ xs: 4 });
+
+      // Test that parsing uses all of them
+      const result = tw`bg-primary font-display text-tiny m-xs`;
+      expect(result?.style).toEqual({
+        backgroundColor: "#007AFF",
+        fontFamily: "Inter",
+        fontSize: 10,
+        margin: 4,
+      });
+    });
   });
 
   describe("cache", () => {

package/src/runtime.ts

@@ -12,12 +12,19 @@ export type RuntimeConfig = {
     extend?: {
       colors?: Record<string, string | Record<string, string>>;
       fontFamily?: Record<string, string | string[]>;
+      fontSize?: Record<string, string | number>;
+      spacing?: Record<string, string | number>;
     };
   };
 };
 
 // Global custom theme configuration
-const globalCustomTheme: CustomTheme = { colors: {}, fontFamily: {} };
+const globalCustomTheme: CustomTheme = {
+  colors: {},
+  fontFamily: {},
+  fontSize: {},
+  spacing: {},
+};
 
 // Simple memoization cache
 const styleCache = new Map<string, TwStyle>();
@@ -72,6 +79,51 @@ export function setConfig(config: RuntimeConfig): void {
     globalCustomTheme.fontFamily = {};
   }
 
+  // Extract custom fontSize
+  if (config.theme?.extend?.fontSize) {
+    const fontSizeResult: Record<string, number> = {};
+    for (const [key, value] of Object.entries(config.theme.extend.fontSize)) {
+      if (typeof value === "number") {
+        fontSizeResult[key] = value;
+      } else if (typeof value === "string") {
+        // Parse string values like "18px" or "18" to number
+        const parsed = parseFloat(value.replace(/px$/, ""));
+        if (!isNaN(parsed)) {
+          fontSizeResult[key] = parsed;
+        }
+      }
+    }
+    globalCustomTheme.fontSize = fontSizeResult;
+  } else {
+    globalCustomTheme.fontSize = {};
+  }
+
+  // Extract custom spacing
+  if (config.theme?.extend?.spacing) {
+    const spacingResult: Record<string, number> = {};
+    for (const [key, value] of Object.entries(config.theme.extend.spacing)) {
+      if (typeof value === "number") {
+        spacingResult[key] = value;
+      } else if (typeof value === "string") {
+        // Parse string values: "18rem" -> 288, "16px" -> 16, "16" -> 16
+        let parsed: number;
+        if (value.endsWith("rem")) {
+          // Convert rem to px (1rem = 16px)
+          parsed = parseFloat(value.replace(/rem$/, "")) * 16;
+        } else {
+          // Parse px or unitless values
+          parsed = parseFloat(value.replace(/px$/, ""));
+        }
+        if (!isNaN(parsed)) {
+          spacingResult[key] = parsed;
+        }
+      }
+    }
+    globalCustomTheme.spacing = spacingResult;
+  } else {
+    globalCustomTheme.spacing = {};
+  }
+
   // Clear cache when config changes
   styleCache.clear();
 }