@mgcrea/react-native-tailwind 0.14.0 → 0.15.0

package/dist/runtime.test.js

@@ -1 +1 @@
-var _vitest=require("vitest");var _runtime=require("./runtime");(0,_vitest.describe)("runtime",function(){(0,_vitest.beforeEach)(function(){(0,_runtime.clearCache)();(0,_runtime.setConfig)({});});(0,_vitest.describe)("tw template tag",function(){(0,_vitest.it)("should parse static classes",function(){var result=(0,_runtime.tw)`m-4 p-2 bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should handle interpolated values",function(){var isActive=true;var result=(0,_runtime.tw)`m-4 ${isActive&&"bg-blue-500"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,backgroundColor:"#2b7fff"});});(0,_vitest.it)("should handle conditional classes",function(){var isLarge=true;var result=(0,_runtime.tw)`p-4 ${isLarge?"text-xl":"text-sm"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,fontSize:20});});(0,_vitest.it)("should handle falsy values",function(){var result=(0,_runtime.tw)`m-4 ${false} ${null} ${undefined} p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should preserve zero values in template literals",function(){var result=(0,_runtime.tw)`opacity-${0} m-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({opacity:0,margin:16});});(0,_vitest.it)("should preserve empty string values in template literals",function(){var result=(0,_runtime.tw)`m-4 ${""}p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should handle mixed falsy and truthy numeric values",function(){var spacing=0;var result=(0,_runtime.tw)`m-${spacing} p-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:0,padding:16});});(0,_vitest.it)("should return empty style object for empty className",function(){var result=(0,_runtime.tw)``;(0,_vitest.expect)(result).toEqual({style:{}});});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.tw)`m-4    p-2   bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("twStyle function",function(){(0,_vitest.it)("should parse className string",function(){var result=(0,_runtime.twStyle)("m-4 p-2 bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return undefined for empty string",function(){var result=(0,_runtime.twStyle)("");(0,_vitest.expect)(result).toBeUndefined();});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.twStyle)("m-4    p-2   bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("setConfig",function(){(0,_vitest.it)("should set custom colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",secondary:"#5856D6"}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({primary:"#007AFF",secondary:"#5856D6"});});(0,_vitest.it)("should flatten nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({"brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should handle mixed flat and nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({primary:"#007AFF","brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should clear cache when config changes",function(){var style=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(1);(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});(0,_vitest.it)("should use custom colors in parsing",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});var result=(0,_runtime.tw)`bg-primary`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#007AFF"});});});(0,_vitest.describe)("cache",function(){(0,_vitest.it)("should cache parsed styles",function(){var result1=(0,_runtime.tw)`m-4 p-2`;var result2=(0,_runtime.tw)`m-4 p-2`;(0,_vitest.expect)(result1).toBe(result2);});(0,_vitest.it)("should track cache stats",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;var style3=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)(style3).toBeDefined();var stats=(0,_runtime.getCacheStats)();(0,_vitest.expect)(stats.size).toBe(3);(0,_vitest.expect)(stats.keys).toContain("m-4");(0,_vitest.expect)(stats.keys).toContain("p-2");(0,_vitest.expect)(stats.keys).toContain("bg-blue-500");});(0,_vitest.it)("should clear cache",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(2);(0,_runtime.clearCache)();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});});(0,_vitest.describe)("state modifiers",function(){(0,_vitest.it)("should return activeStyle when active: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return disabledStyle when disabled: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return both activeStyle and disabledStyle when both modifiers are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});(0,_vitest.it)("should merge base and active styles with multiple properties",function(){var result=(0,_runtime.tw)`p-4 m-2 bg-blue-500 active:bg-blue-700 active:p-6`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,margin:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6",padding:24});});(0,_vitest.it)("should handle only modifier classes (no base)",function(){var result=(0,_runtime.tw)`active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should work with twStyle function",function(){var result=(0,_runtime.twStyle)("bg-blue-500 active:bg-blue-700");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should provide raw hex values for animations",function(){var _result$activeStyle;var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;var style=Array.isArray(result==null?void 0:result.style)?result.style.find(function(s){return s!==false;}):result==null?void 0:result.style;(0,_vitest.expect)(style&&typeof style==="object"&&"backgroundColor"in style?style.backgroundColor:undefined).toBe("#2b7fff");(0,_vitest.expect)(result==null||(_result$activeStyle=result.activeStyle)==null?void 0:_result$activeStyle.backgroundColor).toBe("#1447e6");});(0,_vitest.it)("should return focusStyle when focus: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 focus:bg-blue-800`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return all three modifier styles when all are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 focus:bg-blue-800 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});});});
+var _vitest=require("vitest");var _runtime=require("./runtime");(0,_vitest.describe)("runtime",function(){(0,_vitest.beforeEach)(function(){(0,_runtime.clearCache)();(0,_runtime.setConfig)({});});(0,_vitest.describe)("tw template tag",function(){(0,_vitest.it)("should parse static classes",function(){var result=(0,_runtime.tw)`m-4 p-2 bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should handle interpolated values",function(){var isActive=true;var result=(0,_runtime.tw)`m-4 ${isActive&&"bg-blue-500"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,backgroundColor:"#2b7fff"});});(0,_vitest.it)("should handle conditional classes",function(){var isLarge=true;var result=(0,_runtime.tw)`p-4 ${isLarge?"text-xl":"text-sm"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,fontSize:20});});(0,_vitest.it)("should handle falsy values",function(){var result=(0,_runtime.tw)`m-4 ${false} ${null} ${undefined} p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should preserve zero values in template literals",function(){var result=(0,_runtime.tw)`opacity-${0} m-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({opacity:0,margin:16});});(0,_vitest.it)("should preserve empty string values in template literals",function(){var result=(0,_runtime.tw)`m-4 ${""}p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should handle mixed falsy and truthy numeric values",function(){var spacing=0;var result=(0,_runtime.tw)`m-${spacing} p-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:0,padding:16});});(0,_vitest.it)("should return empty style object for empty className",function(){var result=(0,_runtime.tw)``;(0,_vitest.expect)(result).toEqual({style:{}});});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.tw)`m-4    p-2   bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("twStyle function",function(){(0,_vitest.it)("should parse className string",function(){var result=(0,_runtime.twStyle)("m-4 p-2 bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return undefined for empty string",function(){var result=(0,_runtime.twStyle)("");(0,_vitest.expect)(result).toBeUndefined();});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.twStyle)("m-4    p-2   bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("setConfig",function(){(0,_vitest.it)("should set custom colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",secondary:"#5856D6"}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({primary:"#007AFF",secondary:"#5856D6"});});(0,_vitest.it)("should flatten nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({"brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should handle mixed flat and nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({primary:"#007AFF","brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should clear cache when config changes",function(){var style=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(1);(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});(0,_vitest.it)("should use custom colors in parsing",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});var result=(0,_runtime.tw)`bg-primary`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#007AFF"});});(0,_vitest.it)("should set custom fontFamily",function(){(0,_runtime.setConfig)({theme:{extend:{fontFamily:{display:"Inter",body:["Roboto","sans-serif"]}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.fontFamily).toEqual({display:"Inter",body:"Roboto"});});(0,_vitest.it)("should set custom fontSize",function(){(0,_runtime.setConfig)({theme:{extend:{fontSize:{tiny:10,small:"12px",medium:16,large:"24"}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.fontSize).toEqual({tiny:10,small:12,medium:16,large:24});});(0,_vitest.it)("should set custom spacing",function(){(0,_runtime.setConfig)({theme:{extend:{spacing:{xs:4,sm:"8px",md:16,lg:"2rem"}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.spacing).toEqual({xs:4,sm:8,md:16,lg:32});});(0,_vitest.it)("should use custom fontSize in parsing",function(){(0,_runtime.setConfig)({theme:{extend:{fontSize:{tiny:10}}}});var result=(0,_runtime.tw)`text-tiny`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({fontSize:10});});(0,_vitest.it)("should use custom spacing in parsing",function(){(0,_runtime.setConfig)({theme:{extend:{spacing:{xs:4}}}});var result=(0,_runtime.tw)`m-xs p-xs`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:4,padding:4});});(0,_vitest.it)("should reset fontSize and spacing when config is cleared",function(){(0,_runtime.setConfig)({theme:{extend:{fontSize:{tiny:10},spacing:{xs:4}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.fontSize).toEqual({tiny:10});(0,_vitest.expect)(theme.spacing).toEqual({xs:4});(0,_runtime.setConfig)({});theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.fontSize).toEqual({});(0,_vitest.expect)(theme.spacing).toEqual({});});(0,_vitest.it)("should handle all theme extensions together",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"},fontFamily:{display:"Inter"},fontSize:{tiny:10},spacing:{xs:4}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({primary:"#007AFF"});(0,_vitest.expect)(theme.fontFamily).toEqual({display:"Inter"});(0,_vitest.expect)(theme.fontSize).toEqual({tiny:10});(0,_vitest.expect)(theme.spacing).toEqual({xs:4});var result=(0,_runtime.tw)`bg-primary font-display text-tiny m-xs`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#007AFF",fontFamily:"Inter",fontSize:10,margin:4});});});(0,_vitest.describe)("cache",function(){(0,_vitest.it)("should cache parsed styles",function(){var result1=(0,_runtime.tw)`m-4 p-2`;var result2=(0,_runtime.tw)`m-4 p-2`;(0,_vitest.expect)(result1).toBe(result2);});(0,_vitest.it)("should track cache stats",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;var style3=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)(style3).toBeDefined();var stats=(0,_runtime.getCacheStats)();(0,_vitest.expect)(stats.size).toBe(3);(0,_vitest.expect)(stats.keys).toContain("m-4");(0,_vitest.expect)(stats.keys).toContain("p-2");(0,_vitest.expect)(stats.keys).toContain("bg-blue-500");});(0,_vitest.it)("should clear cache",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(2);(0,_runtime.clearCache)();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});});(0,_vitest.describe)("state modifiers",function(){(0,_vitest.it)("should return activeStyle when active: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return disabledStyle when disabled: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return both activeStyle and disabledStyle when both modifiers are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});(0,_vitest.it)("should merge base and active styles with multiple properties",function(){var result=(0,_runtime.tw)`p-4 m-2 bg-blue-500 active:bg-blue-700 active:p-6`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,margin:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6",padding:24});});(0,_vitest.it)("should handle only modifier classes (no base)",function(){var result=(0,_runtime.tw)`active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should work with twStyle function",function(){var result=(0,_runtime.twStyle)("bg-blue-500 active:bg-blue-700");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should provide raw hex values for animations",function(){var _result$activeStyle;var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;var style=Array.isArray(result==null?void 0:result.style)?result.style.find(function(s){return s!==false;}):result==null?void 0:result.style;(0,_vitest.expect)(style&&typeof style==="object"&&"backgroundColor"in style?style.backgroundColor:undefined).toBe("#2b7fff");(0,_vitest.expect)(result==null||(_result$activeStyle=result.activeStyle)==null?void 0:_result$activeStyle.backgroundColor).toBe("#1447e6");});(0,_vitest.it)("should return focusStyle when focus: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 focus:bg-blue-800`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return all three modifier styles when all are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 focus:bg-blue-800 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",

package/src/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/src/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/src/parser/index.ts

@@ -21,6 +21,7 @@ export type CustomTheme = {
   colors?: Record<string, string>;
   fontFamily?: Record<string, string>;
   fontSize?: Record<string, number>;
+  spacing?: Record<string, number>;
 };
 
 /**
@@ -50,17 +51,17 @@ export function parseClassName(className: string, customTheme?: CustomTheme): St
 export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject {
   // Try each parser in order
   // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
-  // parseBorder, parseColor and parseTypography get custom theme
+  // Parsers receive relevant custom theme properties
   const parsers: Array<(cls: string) => StyleObject | null> = [
-    parseSpacing,
+    (cls: string) => parseSpacing(cls, customTheme?.spacing),
     (cls: string) => parseBorder(cls, customTheme?.colors),
     (cls: string) => parseColor(cls, customTheme?.colors),
-    parseLayout,
+    (cls: string) => parseLayout(cls, customTheme?.spacing),
     (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),
-    parseSizing,
+    (cls: string) => parseSizing(cls, customTheme?.spacing),
     parseShadow,
     parseAspectRatio,
-    parseTransform,
+    (cls: string) => parseTransform(cls, customTheme?.spacing),
   ];
 
   for (const parser of parsers) {

package/src/parser/layout.test.ts

@@ -719,3 +719,97 @@ describe("parseLayout - logical inset (RTL-aware)", () => {
     expect(parseLayout("inset-e-[20%]")).toEqual({ end: "20%" });
   });
 });
+
+describe("parseLayout - 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 top/right/bottom/left", () => {
+    expect(parseLayout("top-xs", customSpacing)).toEqual({ top: 4 });
+    expect(parseLayout("top-sm", customSpacing)).toEqual({ top: 8 });
+    expect(parseLayout("top-md", customSpacing)).toEqual({ top: 16 });
+    expect(parseLayout("top-lg", customSpacing)).toEqual({ top: 32 });
+    expect(parseLayout("top-xl", customSpacing)).toEqual({ top: 64 });
+
+    expect(parseLayout("right-xs", customSpacing)).toEqual({ right: 4 });
+    expect(parseLayout("bottom-sm", customSpacing)).toEqual({ bottom: 8 });
+    expect(parseLayout("left-md", customSpacing)).toEqual({ left: 16 });
+  });
+
+  it("should override default spacing values", () => {
+    // Without custom spacing, top-4 is 16
+    expect(parseLayout("top-4")).toEqual({ top: 16 });
+
+    // With custom spacing, top-4 is 20 (overridden)
+    expect(parseLayout("top-4", customSpacing)).toEqual({ top: 20 });
+  });
+
+  it("should merge custom spacing with defaults", () => {
+    // Custom spacing should merge with defaults
+    // top-0 should still work (from defaults)
+    expect(parseLayout("top-0", customSpacing)).toEqual({ top: 0 });
+
+    // top-8 should still work (from defaults, not overridden)
+    expect(parseLayout("top-8", customSpacing)).toEqual({ top: 32 });
+
+    // top-xs should work (from custom)
+    expect(parseLayout("top-xs", customSpacing)).toEqual({ top: 4 });
+  });
+
+  it("should support custom spacing for start/end (RTL-aware)", () => {
+    expect(parseLayout("start-xs", customSpacing)).toEqual({ start: 4 });
+    expect(parseLayout("end-lg", customSpacing)).toEqual({ end: 32 });
+  });
+
+  it("should support custom spacing for inset utilities", () => {
+    expect(parseLayout("inset-xs", customSpacing)).toEqual({
+      top: 4,
+      right: 4,
+      bottom: 4,
+      left: 4,
+    });
+
+    expect(parseLayout("inset-x-sm", customSpacing)).toEqual({
+      left: 8,
+      right: 8,
+    });
+
+    expect(parseLayout("inset-y-md", customSpacing)).toEqual({
+      top: 16,
+      bottom: 16,
+    });
+  });
+
+  it("should support custom spacing for inset-s/inset-e", () => {
+    expect(parseLayout("inset-s-lg", customSpacing)).toEqual({ start: 32 });
+    expect(parseLayout("inset-e-xl", customSpacing)).toEqual({ end: 64 });
+  });
+
+  it("should support negative values with custom spacing for start/end", () => {
+    // Note: -top-*, -left-*, -right-*, -bottom-* negative prefixes are not supported
+    // Use arbitrary values like top-[-10px] for negative positioning
+    expect(parseLayout("-start-sm", customSpacing)).toEqual({ start: -8 });
+    expect(parseLayout("-end-md", customSpacing)).toEqual({ end: -16 });
+  });
+
+  it("should still support arbitrary values with custom spacing", () => {
+    expect(parseLayout("top-[100px]", customSpacing)).toEqual({ top: 100 });
+    expect(parseLayout("inset-[50%]", customSpacing)).toEqual({
+      top: "50%",
+      right: "50%",
+      bottom: "50%",
+      left: "50%",
+    });
+  });
+
+  it("should handle non-layout classes as null", () => {
+    expect(parseLayout("text-xl", customSpacing)).toBeNull();
+    expect(parseLayout("bg-blue-500", customSpacing)).toBeNull();
+  });
+});

package/src/parser/layout.ts

@@ -237,8 +237,13 @@ export const INSET_SCALE: Record<string, number> = {
 
 /**
  * Parse layout classes
+ * @param cls - The class name to parse
+ * @param customSpacing - Optional custom spacing values from tailwind.config (for inset utilities)
  */
-export function parseLayout(cls: string): StyleObject | null {
+export function parseLayout(cls: string, customSpacing?: Record<string, number>): StyleObject | null {
+  // Merge custom spacing with defaults for inset utilities
+  const insetMap = customSpacing ? { ...INSET_SCALE, ...customSpacing } : INSET_SCALE;
+
   // Z-index: z-0, z-10, z-20, z-[999], etc.
   if (cls.startsWith("z-")) {
     const zKey = cls.substring(2);
@@ -270,7 +275,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { top: arbitraryTop };
     }
 
-    const topValue = INSET_SCALE[topKey];
+    const topValue = insetMap[topKey];
     if (topValue !== undefined) {
       return { top: topValue };
     }
@@ -291,7 +296,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { right: arbitraryRight };
     }
 
-    const rightValue = INSET_SCALE[rightKey];
+    const rightValue = insetMap[rightKey];
     if (rightValue !== undefined) {
       return { right: rightValue };
     }
@@ -312,7 +317,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { bottom: arbitraryBottom };
     }
 
-    const bottomValue = INSET_SCALE[bottomKey];
+    const bottomValue = insetMap[bottomKey];
     if (bottomValue !== undefined) {
       return { bottom: bottomValue };
     }
@@ -333,7 +338,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { left: arbitraryLeft };
     }
 
-    const leftValue = INSET_SCALE[leftKey];
+    const leftValue = insetMap[leftKey];
     if (leftValue !== undefined) {
       return { left: leftValue };
     }
@@ -364,7 +369,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { start: arbitraryStart };
     }
 
-    const startValue = INSET_SCALE[startKey];
+    const startValue = insetMap[startKey];
     if (startValue !== undefined) {
       return { start: isNegative ? -startValue : startValue };
     }
@@ -395,7 +400,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { end: arbitraryEnd };
     }
 
-    const endValue = INSET_SCALE[endKey];
+    const endValue = insetMap[endKey];
     if (endValue !== undefined) {
       return { end: isNegative ? -endValue : endValue };
     }
@@ -411,7 +416,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { left: arbitraryInset, right: arbitraryInset };
     }
 
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== undefined) {
       return { left: insetValue, right: insetValue };
     }
@@ -427,7 +432,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { top: arbitraryInset, bottom: arbitraryInset };
     }
 
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== undefined) {
       return { top: insetValue, bottom: insetValue };
     }
@@ -443,7 +448,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { start: arbitraryInset };
     }
 
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== undefined) {
       return { start: insetValue };
     }
@@ -459,7 +464,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { end: arbitraryInset };
     }
 
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== undefined) {
       return { end: insetValue };
     }
@@ -475,7 +480,7 @@ export function parseLayout(cls: string): StyleObject | null {
       return { top: arbitraryInset, right: arbitraryInset, bottom: arbitraryInset, left: arbitraryInset };
     }
 
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== undefined) {
       return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
     }

package/src/parser/sizing.test.ts

@@ -254,3 +254,59 @@ describe("parseSizing - comprehensive coverage", () => {
     expect(parseSizing("h-full")).toEqual({ height: "100%" });
   });
 });
+
+describe("parseSizing - 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 width", () => {
+    expect(parseSizing("w-xs", customSpacing)).toEqual({ width: 4 });
+    expect(parseSizing("w-sm", customSpacing)).toEqual({ width: 8 });
+    expect(parseSizing("w-lg", customSpacing)).toEqual({ width: 32 });
+    expect(parseSizing("w-xl", customSpacing)).toEqual({ width: 64 });
+  });
+
+  it("should support custom spacing values for height", () => {
+    expect(parseSizing("h-xs", customSpacing)).toEqual({ height: 4 });
+    expect(parseSizing("h-md", customSpacing)).toEqual({ height: 16 });
+    expect(parseSizing("h-xl", customSpacing)).toEqual({ height: 64 });
+  });
+
+  it("should support custom spacing values for min/max dimensions", () => {
+    expect(parseSizing("min-w-sm", customSpacing)).toEqual({ minWidth: 8 });
+    expect(parseSizing("min-h-lg", customSpacing)).toEqual({ minHeight: 32 });
+    expect(parseSizing("max-w-xl", customSpacing)).toEqual({ maxWidth: 64 });
+    expect(parseSizing("max-h-md", customSpacing)).toEqual({ maxHeight: 16 });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    expect(parseSizing("w-4", customSpacing)).toEqual({ width: 20 }); // Custom 20, not default 16
+    expect(parseSizing("h-4", customSpacing)).toEqual({ height: 20 }); // Custom 20, not default 16
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseSizing("w-[24px]", customSpacing)).toEqual({ width: 24 }); // Arbitrary wins
+    expect(parseSizing("h-[50]", customSpacing)).toEqual({ height: 50 }); // Arbitrary wins
+  });
+
+  it("should fall back to preset scale for unknown custom keys", () => {
+    expect(parseSizing("w-8", customSpacing)).toEqual({ width: 32 }); // Not overridden, uses preset
+    expect(parseSizing("h-12", customSpacing)).toEqual({ height: 48 }); // Not overridden, uses preset
+  });
+
+  it("should preserve percentage values with custom spacing", () => {
+    expect(parseSizing("w-full", customSpacing)).toEqual({ width: "100%" });
+    expect(parseSizing("h-1/2", customSpacing)).toEqual({ height: "50%" });
+  });
+
+  it("should work without custom spacing (backward compatible)", () => {
+    expect(parseSizing("w-4")).toEqual({ width: 16 }); // Default behavior
+    expect(parseSizing("h-8")).toEqual({ height: 32 }); // Default behavior
+  });
+});