feat: add fontSize and spacing support to runtime config

Extend RuntimeConfig to support theme.extend.fontSize and theme.extend.spacing:
- Parse fontSize values from numbers or strings ("18px", "18")
- Parse spacing values from numbers, px, or rem ("2rem" -> 32px)
- Clear cache when config changes
- Add comprehensive tests for all theme extensions

Author: mgcrea

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", () => {

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();
 }