feat: add fontSize and spacing extraction to babel config loader

Extract fontSize and spacing from tailwind.config alongside existing colors and fontFamily:
- Convert string values to numbers ("18px" -> 18, "2rem" -> 32)
- Update SUPPORTED_THEME_KEYS to include fontSize and spacing
- Add tests for supported theme keys validation

Author: mgcrea

src/babel/config-loader.test.ts

@@ -125,7 +125,7 @@ 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: {} });
     });
   });
 
@@ -136,8 +136,9 @@ describe("config-loader", () => {
         theme: {
           extend: {
             colors: { brand: "#123456" },
-            spacing: { "72": "18rem" }, // Unsupported
+            spacing: { "72": "18rem" }, // Supported (now!)
             borderRadius: { xl: "1rem" }, // Unsupported
+            lineHeight: { tight: "1.25" }, // Unsupported
           },
           screens: { tablet: "640px" }, // Unsupported
         },
@@ -150,8 +151,10 @@ describe("config-loader", () => {
       expect(consoleSpy).toHaveBeenCalledWith(
         expect.stringContaining("Unsupported theme configuration detected"),
       );
-      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("theme.extend.spacing"));
+      // 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"),
@@ -168,6 +171,7 @@ describe("config-loader", () => {
             colors: { brand: "#123456" },
             fontFamily: { custom: "CustomFont" },
             fontSize: { huge: "48px" },
+            spacing: { "72": "18rem" },
           },
         },
       };
@@ -186,7 +190,7 @@ describe("config-loader", () => {
       const mockConfig = {
         theme: {
           extend: {
-            spacing: { "72": "18rem" },
+            borderRadius: { xl: "1rem" }, // Unsupported
           },
         },
       };

src/babel/config-loader.ts

@@ -15,19 +15,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;
   };
 };
 
 /**
  * Theme keys currently supported by react-native-tailwind
  */
-const SUPPORTED_THEME_KEYS = new Set(["colors", "fontFamily", "fontSize", "extend"]);
+const SUPPORTED_THEME_KEYS = new Set(["colors", "fontFamily", "fontSize", "spacing", "extend"]);
 
 /**
  * Cache for warned config paths to avoid duplicate warnings
@@ -68,7 +70,7 @@ export function warnUnsupportedThemeKeys(config: TailwindConfig, configPath: str
     console.warn(
       `[react-native-tailwind] Unsupported theme configuration detected:\n` +
         `  ${unsupportedKeys.join(", ")}\n\n` +
-        `  Currently supported: colors, fontFamily, fontSize\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`,
     );
@@ -145,6 +147,7 @@ export type CustomTheme = {
   colors: Record<string, string>;
   fontFamily: Record<string, string>;
   fontSize: Record<string, number>;
+  spacing: Record<string, number>;
 };
 
 /**
@@ -156,12 +159,12 @@ 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
@@ -229,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,
   };
 }