@mgcrea/react-native-tailwind 0.9.0 → 0.9.1

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 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 colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(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 colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(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 colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(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`;(0,_vitest.expect)(result==null?void 0:result.style.backgroundColor).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 colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(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 colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(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 colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(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`;(0,_vitest.expect)(result==null?void 0:result.style.backgroundColor).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.9.0",
+  "version": "0.9.1",
   "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",
@@ -29,10 +29,9 @@
     }
   },
   "files": [
-    "*.podspec",
     "src",
     "dist",
-    "ios"
+    "README.md"
   ],
   "scripts": {
     "dev": "cd example; npm run dev",

package/src/babel/plugin.test.ts

@@ -721,3 +721,89 @@ describe("Babel plugin - platform modifier transformation", () => {
     expect(output).not.toMatch(/(?<!_ios|_android|_web)_p_8:/);
   });
 });
+
+describe("Babel plugin - import injection", () => {
+  it("should not add StyleSheet import to files without className usage", () => {
+    const input = `
+      import { View, Text } from 'react-native';
+
+      function MyComponent() {
+        return <View><Text>Hello</Text></View>;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should not mutate the import by adding StyleSheet
+    // Count occurrences of "StyleSheet" in output
+    const styleSheetCount = (output.match(/StyleSheet/g) ?? []).length;
+    expect(styleSheetCount).toBe(0);
+
+    // Should not have _twStyles definition
+    expect(output).not.toContain("_twStyles");
+    expect(output).not.toContain("StyleSheet.create");
+
+    // Original imports should remain unchanged
+    expect(output).toContain("View");
+    expect(output).toContain("Text");
+  });
+
+  it("should add StyleSheet import only when className is used", () => {
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="m-4 p-2" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have StyleSheet import (both single and double quotes)
+    expect(output).toMatch(/import.*StyleSheet.*from ['"]react-native['"]|require\(['"]react-native['"]\)/);
+
+    // Should have _twStyles definition
+    expect(output).toContain("_twStyles");
+    expect(output).toContain("StyleSheet.create");
+  });
+
+  it("should add Platform import only when platform modifiers are used", () => {
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="ios:m-4 android:m-2" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+
+    // Should have StyleSheet import too
+    expect(output).toContain("StyleSheet");
+
+    // Should use Platform.select
+    expect(output).toContain("Platform.select");
+  });
+
+  it("should not add Platform import without platform modifiers", () => {
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="m-4 p-2" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should not have Platform import
+    const platformCount = (output.match(/Platform/g) ?? []).length;
+    expect(platformCount).toBe(0);
+
+    // Should still have StyleSheet
+    expect(output).toContain("StyleSheet");
+  });
+});

package/src/babel/plugin.ts

@@ -76,6 +76,8 @@ type PluginState = PluginPass & {
   // Track tw/twStyle imports from main package
   twImportNames: Set<string>; // e.g., ['tw', 'twStyle'] or ['tw as customTw']
   hasTwImport: boolean;
+  // Track react-native import path for conditional StyleSheet/Platform injection
+  reactNativeImportPath?: NodePath<BabelTypes.ImportDeclaration>;
 };
 
 // Default identifier for the generated StyleSheet constant
@@ -161,17 +163,18 @@ export default function reactNativeTailwindBabelPlugin(
             return false;
           });
 
+          // Only track if imports exist - don't mutate yet
+          // Actual import injection happens in Program.exit only if needed
           if (hasStyleSheet) {
             state.hasStyleSheetImport = true;
-          } else {
-            // Add StyleSheet to existing import
-            node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
-            state.hasStyleSheetImport = true;
           }
 
           if (hasPlatform) {
             state.hasPlatformImport = true;
           }
+
+          // Store reference to the react-native import for later modification if needed
+          state.reactNativeImportPath = path;
         }
 
         // Track tw/twStyle imports from main package (for compile-time transformation)

package/src/babel/utils/styleInjection.ts

@@ -7,16 +7,33 @@ import type * as BabelTypes from "@babel/types";
 import type { StyleObject } from "../../types/core.js";
 
 /**
- * Add StyleSheet import to the file
+ * Add StyleSheet import to the file or merge with existing react-native import
  */
 export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  const importDeclaration = t.importDeclaration(
-    [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
-    t.stringLiteral("react-native"),
-  );
+  // Check if there's already a react-native import
+  const body = path.node.body;
+  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
 
-  // Add import at the top of the file
-  path.unshiftContainer("body", importDeclaration);
+  if (reactNativeImport) {
+    // Add StyleSheet to existing react-native import
+    reactNativeImport.specifiers.push(
+      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+    );
+  } else {
+    // Create new react-native import with StyleSheet
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
+      t.stringLiteral("react-native"),
+    );
+    path.unshiftContainer("body", importDeclaration);
+  }
 }
 
 /**

package/src/parser/aspectRatio.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { ASPECT_RATIO_PRESETS, parseAspectRatio } from "./aspectRatio";
+import { parseClassName } from "./index";
 
 describe("ASPECT_RATIO_PRESETS", () => {
   it("should export aspect ratio presets", () => {
@@ -29,8 +30,8 @@ describe("parseAspectRatio - preset values", () => {
   });
 
   it("should parse aspect-auto", () => {
-    // aspect-auto removes the aspect ratio constraint
-    expect(parseAspectRatio("aspect-auto")).toEqual({});
+    // aspect-auto removes the aspect ratio constraint by explicitly setting to undefined
+    expect(parseAspectRatio("aspect-auto")).toEqual({ aspectRatio: undefined });
   });
 });
 
@@ -131,6 +132,28 @@ describe("parseAspectRatio - type validation", () => {
   });
 });
 
+describe("parseAspectRatio - override behavior", () => {
+  it("should allow aspect-auto to override previously set aspect ratios", () => {
+    // This tests the fix for issue #3 - aspect-auto must explicitly set aspectRatio: undefined
+    // to override previous aspect ratio values when using Object.assign
+    const result = parseClassName("aspect-square aspect-auto");
+    expect(result).toEqual({ aspectRatio: undefined });
+  });
+
+  it("should allow aspect ratios to override aspect-auto", () => {
+    const result = parseClassName("aspect-auto aspect-square");
+    expect(result).toEqual({ aspectRatio: 1 });
+  });
+
+  it("should apply last aspect ratio in sequence", () => {
+    const result = parseClassName("aspect-square aspect-video aspect-auto");
+    expect(result).toEqual({ aspectRatio: undefined });
+
+    const result2 = parseClassName("aspect-auto aspect-square aspect-video");
+    expect(result2).toEqual({ aspectRatio: 16 / 9 });
+  });
+});
+
 describe("parseAspectRatio - comprehensive coverage", () => {
   it("should parse all preset variants without errors", () => {
     const presets = ["aspect-auto", "aspect-square", "aspect-video"];

package/src/parser/aspectRatio.ts

@@ -52,10 +52,10 @@ export function parseAspectRatio(cls: string): StyleObject | null {
   // Check for preset values
   if (cls in ASPECT_RATIO_PRESETS) {
     const aspectRatio = ASPECT_RATIO_PRESETS[cls];
-    // aspect-auto removes the aspect ratio constraint by returning empty object
-    // (this effectively unsets the aspectRatio property)
+    // aspect-auto removes the aspect ratio constraint by explicitly setting to undefined
+    // This ensures it overrides any previously set aspectRatio in Object.assign
     if (aspectRatio === undefined) {
-      return {};
+      return { aspectRatio: undefined };
     }
     return { aspectRatio };
   }

package/src/parser/spacing.test.ts

@@ -60,6 +60,69 @@ describe("parseSpacing - margin", () => {
   });
 });
 
+describe("parseSpacing - negative margin", () => {
+  it("should parse negative margin all sides", () => {
+    expect(parseSpacing("-m-0")).toEqual({ margin: -0 }); // JavaScript -0 is distinct from +0
+    expect(parseSpacing("-m-4")).toEqual({ margin: -16 });
+    expect(parseSpacing("-m-8")).toEqual({ margin: -32 });
+    expect(parseSpacing("-m-96")).toEqual({ margin: -384 });
+  });
+
+  it("should parse negative margin with fractional values", () => {
+    expect(parseSpacing("-m-0.5")).toEqual({ margin: -2 });
+    expect(parseSpacing("-m-1.5")).toEqual({ margin: -6 });
+    expect(parseSpacing("-m-2.5")).toEqual({ margin: -10 });
+  });
+
+  it("should parse negative margin horizontal", () => {
+    expect(parseSpacing("-mx-4")).toEqual({ marginHorizontal: -16 });
+    expect(parseSpacing("-mx-8")).toEqual({ marginHorizontal: -32 });
+  });
+
+  it("should parse negative margin vertical", () => {
+    expect(parseSpacing("-my-4")).toEqual({ marginVertical: -16 });
+    expect(parseSpacing("-my-8")).toEqual({ marginVertical: -32 });
+  });
+
+  it("should parse negative margin directional", () => {
+    expect(parseSpacing("-mt-4")).toEqual({ marginTop: -16 });
+    expect(parseSpacing("-mr-4")).toEqual({ marginRight: -16 });
+    expect(parseSpacing("-mb-4")).toEqual({ marginBottom: -16 });
+    expect(parseSpacing("-ml-4")).toEqual({ marginLeft: -16 });
+  });
+
+  it("should parse negative margin with arbitrary values", () => {
+    expect(parseSpacing("-m-[16px]")).toEqual({ margin: -16 });
+    expect(parseSpacing("-m-[16]")).toEqual({ margin: -16 });
+    expect(parseSpacing("-m-[100px]")).toEqual({ margin: -100 });
+    expect(parseSpacing("-m-[100]")).toEqual({ margin: -100 });
+  });
+
+  it("should parse negative margin directional with arbitrary values", () => {
+    expect(parseSpacing("-mt-[24px]")).toEqual({ marginTop: -24 });
+    expect(parseSpacing("-mr-[32]")).toEqual({ marginRight: -32 });
+    expect(parseSpacing("-mb-[16px]")).toEqual({ marginBottom: -16 });
+    expect(parseSpacing("-ml-[48]")).toEqual({ marginLeft: -48 });
+  });
+
+  it("should parse negative margin horizontal/vertical with arbitrary values", () => {
+    expect(parseSpacing("-mx-[20px]")).toEqual({ marginHorizontal: -20 });
+    expect(parseSpacing("-my-[30]")).toEqual({ marginVertical: -30 });
+  });
+
+  it("should not parse negative padding (invalid)", () => {
+    expect(parseSpacing("-p-4")).toBeNull();
+    expect(parseSpacing("-px-4")).toBeNull();
+    expect(parseSpacing("-pt-4")).toBeNull();
+    expect(parseSpacing("-p-[16px]")).toBeNull();
+  });
+
+  it("should not parse negative gap (invalid)", () => {
+    expect(parseSpacing("-gap-4")).toBeNull();
+    expect(parseSpacing("-gap-[16px]")).toBeNull();
+  });
+});
+
 describe("parseSpacing - padding", () => {
   it("should parse padding all sides", () => {
     expect(parseSpacing("p-0")).toEqual({ padding: 0 });

package/src/parser/spacing.ts

@@ -69,24 +69,28 @@ 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]
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], -m-4, -mt-[10px]
  */
 export function parseSpacing(cls: string): StyleObject | null {
-  // Margin: m-4, mx-2, mt-8, m-[16px], etc.
-  const marginMatch = cls.match(/^m([xytrbls]?)-(.+)$/);
+  // Margin: m-4, mx-2, mt-8, m-[16px], -m-4, -mt-2, etc.
+  // Supports negative values for margins (but not padding or gap)
+  const marginMatch = cls.match(/^(-?)m([xytrbls]?)-(.+)$/);
   if (marginMatch) {
-    const [, dir, valueStr] = marginMatch;
+    const [, negativePrefix, dir, valueStr] = marginMatch;
+    const isNegative = negativePrefix === "-";
 
     // Try arbitrary value first
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
-      return getMarginStyle(dir, arbitraryValue);
+      const finalValue = isNegative ? -arbitraryValue : arbitraryValue;
+      return getMarginStyle(dir, finalValue);
     }
 
     // Try preset scale
     const scaleValue = SPACING_SCALE[valueStr];
     if (scaleValue !== undefined) {
-      return getMarginStyle(dir, scaleValue);
+      const finalValue = isNegative ? -scaleValue : scaleValue;
+      return getMarginStyle(dir, finalValue);
     }
   }
 

package/src/runtime.test.ts

@@ -45,6 +45,33 @@ describe("runtime", () => {
       });
     });
 
+    it("should preserve zero values in template literals", () => {
+      // Issue #1 fix: 0 should be treated as valid value, not filtered out
+      const result = tw`opacity-${0} m-4`;
+      expect(result?.style).toEqual({
+        opacity: 0,
+        margin: 16,
+      });
+    });
+
+    it("should preserve empty string values in template literals", () => {
+      // Empty strings should be preserved (even though they don't contribute to className)
+      const result = tw`m-4 ${""}p-2`;
+      expect(result?.style).toEqual({
+        margin: 16,
+        padding: 8,
+      });
+    });
+
+    it("should handle mixed falsy and truthy numeric values", () => {
+      const spacing = 0;
+      const result = tw`m-${spacing} p-4`;
+      expect(result?.style).toEqual({
+        margin: 0,
+        padding: 16,
+      });
+    });
+
     it("should return empty style object for empty className", () => {
       const result = tw``;
       expect(result).toEqual({ style: {} });

package/src/runtime.ts

@@ -211,8 +211,9 @@ export function tw<T extends NativeStyle = NativeStyle>(
   const className = strings.reduce((acc, str, i) => {
     const value = values[i];
     // Handle falsy values (false, null, undefined) - don't add them
+    // Note: 0 and empty string are preserved as they may be valid values
     // eslint-disable-next-line @typescript-eslint/no-base-to-string
-    const valueStr = value ? String(value) : "";
+    const valueStr = value != null && value !== false ? String(value) : "";
     return acc + str + valueStr;
   }, "");