@mgcrea/react-native-tailwind 0.14.0 → 0.15.0

package/README.md

@@ -112,7 +112,7 @@ The Babel plugin transforms your code at compile time:
 **Input** (what you write):
 
 ```tsx
-<View className="m-4 p-2 bg-blue-500 rounded-lg" />
+<View className={`rounded-lg p-4 ${isSelected ? "bg-blue-500 border border-blue-700" : "bg-gray-200"}`} />
 ```
 
 **Output** (what Babel generates):
@@ -120,15 +120,19 @@ The Babel plugin transforms your code at compile time:
 ```tsx
 import { StyleSheet } from "react-native";
 
-<View style={_twStyles._bg_blue_500_m_4_p_2_rounded_lg} />;
+<View
+  style={[
+    _twStyles._rounded_lg,
+    _twStyles._p_4,
+    isSelected ? _twStyles._bg_blue_500_border_border_blue_700 : _twStyles._bg_gray_200,
+  ]}
+/>;
 
 const _twStyles = StyleSheet.create({
-  _bg_blue_500_m_4_p_2_rounded_lg: {
-    margin: 16,
-    padding: 8,
-    backgroundColor: "#3B82F6",
-    borderRadius: 8,
-  },
+  _rounded_lg: { borderRadius: 8 },
+  _p_4: { padding: 16 },
+  _bg_blue_500_border_border_blue_700: { backgroundColor: "#3B82F6", borderWidth: 1, borderColor: "#1D4ED8" },
+  _bg_gray_200: { backgroundColor: "#E5E7EB" },
 });
 ```
 

package/dist/babel/config-loader.d.ts

@@ -8,12 +8,21 @@ export type TailwindConfig = {
             colors?: Record<string, string | Record<string, string>>;
             fontFamily?: Record<string, string | string[]>;
             fontSize?: Record<string, string | number>;
+            spacing?: Record<string, string | number>;
+            [key: string]: unknown;
         };
         colors?: Record<string, string | Record<string, string>>;
         fontFamily?: Record<string, string | string[]>;
         fontSize?: Record<string, string | number>;
+        spacing?: Record<string, string | number>;
+        [key: string]: unknown;
     };
 };
+/**
+ * Check for unsupported theme extensions and warn the user
+ * @internal Exported for testing
+ */
+export declare function warnUnsupportedThemeKeys(config: TailwindConfig, configPath: string): void;
 /**
  * Find tailwind.config.* file by traversing up from startDir
  */
@@ -29,6 +38,7 @@ export type CustomTheme = {
     colors: Record<string, string>;
     fontFamily: Record<string, string>;
     fontSize: Record<string, number>;
+    spacing: Record<string, number>;
 };
 /**
  * Extract all custom theme extensions from tailwind config

package/dist/babel/config-loader.test.ts

@@ -1,6 +1,11 @@
 import * as fs from "fs";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { extractCustomTheme, findTailwindConfig, loadTailwindConfig } from "./config-loader";
+import {
+  extractCustomTheme,
+  findTailwindConfig,
+  loadTailwindConfig,
+  warnUnsupportedThemeKeys,
+} from "./config-loader";
 
 // Mock fs
 vi.mock("fs");
@@ -120,35 +125,84 @@ describe("config-loader", () => {
       vi.spyOn(fs, "existsSync").mockReturnValue(false);
 
       const result = extractCustomTheme("/project/src/file.ts");
-      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
+      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {}, spacing: {} });
     });
+  });
 
-    it("should return empty theme when config has no theme", () => {
-      const configPath = "/project/tailwind.config.js";
+  describe("warnUnsupportedThemeKeys", () => {
+    it("should warn about unsupported theme keys", () => {
+      const configPath = "/project/unsupported/tailwind.config.js";
+      const mockConfig = {
+        theme: {
+          extend: {
+            colors: { brand: "#123456" },
+            spacing: { "72": "18rem" }, // Supported (now!)
+            borderRadius: { xl: "1rem" }, // Unsupported
+            lineHeight: { tight: "1.25" }, // Unsupported
+          },
+          screens: { tablet: "640px" }, // Unsupported
+        },
+      };
 
-      vi.spyOn(fs, "existsSync").mockImplementation((filepath) => filepath === configPath);
-      vi.spyOn(require, "resolve").mockReturnValue(configPath);
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
 
-      // loadTailwindConfig will be called, but we've already tested it
-      // For integration, we'd need to mock the entire flow
-      const result = extractCustomTheme("/project/src/file.ts");
+      warnUnsupportedThemeKeys(mockConfig, configPath);
 
-      // Without actual config loading, this returns empty
-      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining("Unsupported theme configuration detected"),
+      );
+      // spacing is now supported, so should NOT warn about it
+      expect(consoleSpy).not.toHaveBeenCalledWith(expect.stringContaining("theme.extend.spacing"));
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("theme.extend.borderRadius"));
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("theme.extend.lineHeight"));
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("theme.screens"));
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining("https://github.com/mgcrea/react-native-tailwind/issues/new"),
+      );
+
+      consoleSpy.mockRestore();
     });
 
-    it("should extract colors and fontFamily from theme.extend", () => {
-      // This would require complex mocking of the entire require flow
-      // Testing the logic: theme.extend is preferred
-      const colors = { brand: { light: "#fff", dark: "#000" } };
-      const fontFamily = { sans: ['"SF Pro"'], custom: ['"Custom Font"'] };
-      const theme = {
-        extend: { colors, fontFamily },
+    it("should not warn for supported theme keys only", () => {
+      const configPath = "/project/supported/tailwind.config.js";
+      const mockConfig = {
+        theme: {
+          extend: {
+            colors: { brand: "#123456" },
+            fontFamily: { custom: "CustomFont" },
+            fontSize: { huge: "48px" },
+            spacing: { "72": "18rem" },
+          },
+        },
+      };
+
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+      warnUnsupportedThemeKeys(mockConfig, configPath);
+
+      expect(consoleSpy).not.toHaveBeenCalled();
+
+      consoleSpy.mockRestore();
+    });
+
+    it("should only warn once per config path", () => {
+      const configPath = "/project/once/tailwind.config.js";
+      const mockConfig = {
+        theme: {
+          extend: {
+            borderRadius: { xl: "1rem" }, // Unsupported
+          },
+        },
       };
 
-      // If we had the config, we'd flatten the colors and convert fontFamily
-      expect(theme.extend.colors).toEqual(colors);
-      expect(theme.extend.fontFamily).toEqual(fontFamily);
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+      warnUnsupportedThemeKeys(mockConfig, configPath);
+      warnUnsupportedThemeKeys(mockConfig, configPath);
+
+      expect(consoleSpy).toHaveBeenCalledTimes(1);
+
+      consoleSpy.mockRestore();
     });
   });
 });

package/dist/babel/config-loader.ts

@@ -15,13 +15,68 @@ export type TailwindConfig = {
       colors?: Record<string, string | Record<string, string>>;
       fontFamily?: Record<string, string | string[]>;
       fontSize?: Record<string, string | number>;
+      spacing?: Record<string, string | number>;
+      [key: string]: unknown;
     };
     colors?: Record<string, string | Record<string, string>>;
     fontFamily?: Record<string, string | string[]>;
     fontSize?: Record<string, string | number>;
+    spacing?: Record<string, string | number>;
+    [key: string]: unknown;
   };
 };
 
+/**
+ * Theme keys currently supported by react-native-tailwind
+ */
+const SUPPORTED_THEME_KEYS = new Set(["colors", "fontFamily", "fontSize", "spacing", "extend"]);
+
+/**
+ * Cache for warned config paths to avoid duplicate warnings
+ */
+const warnedConfigPaths = new Set<string>();
+
+/**
+ * Check for unsupported theme extensions and warn the user
+ * @internal Exported for testing
+ */
+export function warnUnsupportedThemeKeys(config: TailwindConfig, configPath: string): void {
+  if (process.env.NODE_ENV === "production" || warnedConfigPaths.has(configPath)) {
+    return;
+  }
+
+  const unsupportedKeys: string[] = [];
+
+  // Check theme.extend keys
+  if (config.theme?.extend && typeof config.theme.extend === "object") {
+    for (const key of Object.keys(config.theme.extend)) {
+      if (!SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.extend.${key}`);
+      }
+    }
+  }
+
+  // Check direct theme keys (excluding 'extend')
+  if (config.theme && typeof config.theme === "object") {
+    for (const key of Object.keys(config.theme)) {
+      if (key !== "extend" && !SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.${key}`);
+      }
+    }
+  }
+
+  if (unsupportedKeys.length > 0) {
+    warnedConfigPaths.add(configPath);
+    console.warn(
+      `[react-native-tailwind] Unsupported theme configuration detected:\n` +
+        `  ${unsupportedKeys.join(", ")}\n\n` +
+        `  Currently supported: colors, fontFamily, fontSize, spacing\n\n` +
+        `  These extensions will be ignored. If you need support for these features,\n` +
+        `  please open an issue: https://github.com/mgcrea/react-native-tailwind/issues/new`,
+    );
+  }
+}
+
 // Cache configs per path to avoid repeated file I/O
 const configCache = new Map<string, TailwindConfig | null>();
 
@@ -92,6 +147,7 @@ export type CustomTheme = {
   colors: Record<string, string>;
   fontFamily: Record<string, string>;
   fontSize: Record<string, number>;
+  spacing: Record<string, number>;
 };
 
 /**
@@ -103,14 +159,17 @@ export function extractCustomTheme(filename: string): CustomTheme {
   const configPath = findTailwindConfig(projectDir);
 
   if (!configPath) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
 
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
 
+  // Warn about unsupported theme keys
+  warnUnsupportedThemeKeys(config, configPath);
+
   // Extract colors
   /* v8 ignore next 5 */
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
@@ -173,9 +232,48 @@ export function extractCustomTheme(filename: string): CustomTheme {
     }
   }
 
+  // Extract spacing
+  /* v8 ignore next 5 */
+  if (config.theme.spacing && !config.theme.extend?.spacing && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.spacing will override all default spacing. " +
+        "Use theme.extend.spacing to add custom spacing while keeping defaults.",
+    );
+  }
+  const spacing = config.theme.extend?.spacing ?? config.theme.spacing ?? {};
+
+  // Convert spacing values to numbers (handle rem, px, or number values)
+  const spacingResult: Record<string, number> = {};
+  for (const [key, value] of Object.entries(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;
+      } else {
+        /* v8 ignore next 5 */
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid spacing value for "${key}": ${value}. Expected number or string like "16px" or "1rem".`,
+          );
+        }
+      }
+    }
+  }
+
   return {
     colors: flattenColors(colors),
     fontFamily: fontFamilyResult,
     fontSize: fontSizeResult,
+    spacing: spacingResult,
   };
 }

package/dist/babel/index.cjs

@@ -53,6 +53,40 @@ function flattenColors(colors, prefix = "") {
 }
 
 // src/babel/config-loader.ts
+var SUPPORTED_THEME_KEYS = /* @__PURE__ */ new Set(["colors", "fontFamily", "fontSize", "spacing", "extend"]);
+var warnedConfigPaths = /* @__PURE__ */ new Set();
+function warnUnsupportedThemeKeys(config, configPath) {
+  if (process.env.NODE_ENV === "production" || warnedConfigPaths.has(configPath)) {
+    return;
+  }
+  const unsupportedKeys = [];
+  if (config.theme?.extend && typeof config.theme.extend === "object") {
+    for (const key of Object.keys(config.theme.extend)) {
+      if (!SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.extend.${key}`);
+      }
+    }
+  }
+  if (config.theme && typeof config.theme === "object") {
+    for (const key of Object.keys(config.theme)) {
+      if (key !== "extend" && !SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.${key}`);
+      }
+    }
+  }
+  if (unsupportedKeys.length > 0) {
+    warnedConfigPaths.add(configPath);
+    console.warn(
+      `[react-native-tailwind] Unsupported theme configuration detected:
+  ${unsupportedKeys.join(", ")}
+
+  Currently supported: colors, fontFamily, fontSize, spacing
+
+  These extensions will be ignored. If you need support for these features,
+  please open an issue: https://github.com/mgcrea/react-native-tailwind/issues/new`
+    );
+  }
+}
 var configCache = /* @__PURE__ */ new Map();
 function findTailwindConfig(startDir) {
   let currentDir = startDir;
@@ -97,12 +131,13 @@ function extractCustomTheme(filename) {
   const projectDir = path.dirname(filename);
   const configPath = findTailwindConfig(projectDir);
   if (!configPath) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
+  warnUnsupportedThemeKeys(config, configPath);
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
     console.warn(
       "[react-native-tailwind] Using theme.colors will override all default colors. Use theme.extend.colors to add custom colors while keeping defaults."
@@ -146,10 +181,39 @@ function extractCustomTheme(filename) {
       }
     }
   }
+  if (config.theme.spacing && !config.theme.extend?.spacing && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.spacing will override all default spacing. Use theme.extend.spacing to add custom spacing while keeping defaults."
+    );
+  }
+  const spacing = config.theme.extend?.spacing ?? config.theme.spacing ?? {};
+  const spacingResult = {};
+  for (const [key, value] of Object.entries(spacing)) {
+    if (typeof value === "number") {
+      spacingResult[key] = value;
+    } else if (typeof value === "string") {
+      let parsed;
+      if (value.endsWith("rem")) {
+        parsed = parseFloat(value.replace(/rem$/, "")) * 16;
+      } else {
+        parsed = parseFloat(value.replace(/px$/, ""));
+      }
+      if (!isNaN(parsed)) {
+        spacingResult[key] = parsed;
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid spacing value for "${key}": ${value}. Expected number or string like "16px" or "1rem".`
+          );
+        }
+      }
+    }
+  }
   return {
     colors: flattenColors(colors),
     fontFamily: fontFamilyResult,
-    fontSize: fontSizeResult
+    fontSize: fontSizeResult,
+    spacing: spacingResult
   };
 }
 
@@ -1083,7 +1147,8 @@ var INSET_SCALE = {
   20: 80,
   24: 96
 };
-function parseLayout(cls) {
+function parseLayout(cls, customSpacing) {
+  const insetMap = customSpacing ? { ...INSET_SCALE, ...customSpacing } : INSET_SCALE;
   if (cls.startsWith("z-")) {
     const zKey = cls.substring(2);
     const arbitraryZ = parseArbitraryZIndex(zKey);
@@ -1104,7 +1169,7 @@ function parseLayout(cls) {
     if (arbitraryTop !== null) {
       return { top: arbitraryTop };
     }
-    const topValue = INSET_SCALE[topKey];
+    const topValue = insetMap[topKey];
     if (topValue !== void 0) {
       return { top: topValue };
     }
@@ -1118,7 +1183,7 @@ function parseLayout(cls) {
     if (arbitraryRight !== null) {
       return { right: arbitraryRight };
     }
-    const rightValue = INSET_SCALE[rightKey];
+    const rightValue = insetMap[rightKey];
     if (rightValue !== void 0) {
       return { right: rightValue };
     }
@@ -1132,7 +1197,7 @@ function parseLayout(cls) {
     if (arbitraryBottom !== null) {
       return { bottom: arbitraryBottom };
     }
-    const bottomValue = INSET_SCALE[bottomKey];
+    const bottomValue = insetMap[bottomKey];
     if (bottomValue !== void 0) {
       return { bottom: bottomValue };
     }
@@ -1146,7 +1211,7 @@ function parseLayout(cls) {
     if (arbitraryLeft !== null) {
       return { left: arbitraryLeft };
     }
-    const leftValue = INSET_SCALE[leftKey];
+    const leftValue = insetMap[leftKey];
     if (leftValue !== void 0) {
       return { left: leftValue };
     }
@@ -1169,7 +1234,7 @@ function parseLayout(cls) {
       }
       return { start: arbitraryStart };
     }
-    const startValue = INSET_SCALE[startKey];
+    const startValue = insetMap[startKey];
     if (startValue !== void 0) {
       return { start: isNegative ? -startValue : startValue };
     }
@@ -1192,7 +1257,7 @@ function parseLayout(cls) {
       }
       return { end: arbitraryEnd };
     }
-    const endValue = INSET_SCALE[endKey];
+    const endValue = insetMap[endKey];
     if (endValue !== void 0) {
       return { end: isNegative ? -endValue : endValue };
     }
@@ -1203,7 +1268,7 @@ function parseLayout(cls) {
     if (arbitraryInset !== null) {
       return { left: arbitraryInset, right: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       return { left: insetValue, right: insetValue };
     }
@@ -1214,7 +1279,7 @@ function parseLayout(cls) {
     if (arbitraryInset !== null) {
       return { top: arbitraryInset, bottom: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       return { top: insetValue, bottom: insetValue };
     }
@@ -1225,7 +1290,7 @@ function parseLayout(cls) {
     if (arbitraryInset !== null) {
       return { start: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       return { start: insetValue };
     }
@@ -1236,7 +1301,7 @@ function parseLayout(cls) {
     if (arbitraryInset !== null) {
       return { end: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       return { end: insetValue };
     }
@@ -1247,7 +1312,7 @@ function parseLayout(cls) {
     if (arbitraryInset !== null) {
       return { top: arbitraryInset, right: arbitraryInset, bottom: arbitraryInset, left: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
     }
@@ -1407,7 +1472,8 @@ function parseArbitrarySize(value) {
   }
   return null;
 }
-function parseSizing(cls) {
+function parseSizing(cls, customSpacing) {
+  const sizeMap = customSpacing ? { ...SIZE_SCALE, ...customSpacing } : SIZE_SCALE;
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
     if (sizeKey === "screen") {
@@ -1421,7 +1487,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { width: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { width: numericSize };
     }
@@ -1442,7 +1508,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { height: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { height: numericSize };
     }
@@ -1460,7 +1526,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { minWidth: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { minWidth: numericSize };
     }
@@ -1475,7 +1541,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { minHeight: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { minHeight: numericSize };
     }
@@ -1490,7 +1556,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { maxWidth: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { maxWidth: numericSize };
     }
@@ -1505,7 +1571,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { maxHeight: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { maxHeight: numericSize };
     }
@@ -1565,7 +1631,8 @@ function parseArbitrarySpacing(value) {
   }
   return null;
 }
-function parseSpacing(cls) {
+function parseSpacing(cls, customSpacing) {
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
   const marginMatch = cls.match(/^(-?)m([xytrblse]?)-(.+)$/);
   if (marginMatch) {
     const [, negativePrefix, dir, valueStr] = marginMatch;
@@ -1575,7 +1642,7 @@ function parseSpacing(cls) {
       const finalValue = isNegative ? -arbitraryValue : arbitraryValue;
       return getMarginStyle(dir, finalValue);
     }
-    const scaleValue = SPACING_SCALE[valueStr];
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== void 0) {
       const finalValue = isNegative ? -scaleValue : scaleValue;
       return getMarginStyle(dir, finalValue);
@@ -1588,7 +1655,7 @@ function parseSpacing(cls) {
     if (arbitraryValue !== null) {
       return getPaddingStyle(dir, arbitraryValue);
     }
-    const scaleValue = SPACING_SCALE[valueStr];
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== void 0) {
       return getPaddingStyle(dir, scaleValue);
     }
@@ -1600,7 +1667,7 @@ function parseSpacing(cls) {
     if (arbitraryValue !== null) {
       return { gap: arbitraryValue };
     }
-    const scaleValue = SPACING_SCALE[valueStr];
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== void 0) {
       return { gap: scaleValue };
     }
@@ -1766,7 +1833,8 @@ function parseArbitraryPerspective(value) {
   }
   return null;
 }
-function parseTransform(cls) {
+function parseTransform(cls, customSpacing) {
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
   if (cls.startsWith("origin-")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
@@ -1872,7 +1940,7 @@ function parseTransform(cls) {
       const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
       return { transform: [{ translateX: value }] };
     }
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== void 0) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateX: value }] };
@@ -1886,7 +1954,7 @@ function parseTransform(cls) {
       const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
       return { transform: [{ translateY: value }] };
     }
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== void 0) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateY: value }] };
@@ -2267,15 +2335,15 @@ function parseClassName(className, customTheme) {
 }
 function parseClass(cls, customTheme) {
   const parsers = [
-    parseSpacing,
+    (cls2) => parseSpacing(cls2, customTheme?.spacing),
     (cls2) => parseBorder(cls2, customTheme?.colors),
     (cls2) => parseColor(cls2, customTheme?.colors),
-    parseLayout,
+    (cls2) => parseLayout(cls2, customTheme?.spacing),
     (cls2) => parseTypography(cls2, customTheme?.fontFamily, customTheme?.fontSize),
-    parseSizing,
+    (cls2) => parseSizing(cls2, customTheme?.spacing),
     parseShadow,
     parseAspectRatio,
-    parseTransform
+    (cls2) => parseTransform(cls2, customTheme?.spacing)
   ];
   for (const parser of parsers) {
     const result = parser(cls);

package/dist/parser/index.d.ts

@@ -10,6 +10,7 @@ export type CustomTheme = {
     colors?: Record<string, string>;
     fontFamily?: Record<string, string>;
     fontSize?: Record<string, number>;
+    spacing?: Record<string, number>;
 };
 /**
  * Parse a className string and return a React Native style object