@mgcrea/react-native-tailwind 0.11.1 → 0.12.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`;(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 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"});});});});

package/dist/types/runtime.d.ts

@@ -5,11 +5,18 @@ import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
 export type NativeStyle = ViewStyle | TextStyle | ImageStyle;
 /**
  * Return type for tw/twStyle functions with separate style properties for modifiers
+ * When color-scheme modifiers (dark:, light:) are present, style becomes an array with runtime conditionals
+ * When platform modifiers (ios:, android:, web:) are present, style becomes an array with Platform.select()
  */
 export type TwStyle<T extends NativeStyle = NativeStyle> = {
-    style: T;
+    style: T | Array<T | false>;
     activeStyle?: T;
     focusStyle?: T;
     disabledStyle?: T;
     placeholderStyle?: TextStyle;
+    lightStyle?: T;
+    darkStyle?: T;
+    iosStyle?: T;
+    androidStyle?: T;
+    webStyle?: T;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.11.1",
+  "version": "0.12.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/plugin.test.ts

@@ -334,6 +334,89 @@ describe("Babel plugin - className transformation (existing behavior)", () => {
     // Should not have className in output
     expect(output).not.toContain("className");
   });
+
+  it('should transform className={"..."} (string literal in expression container)', () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className={"flex-row items-center justify-start"} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have StyleSheet
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_twStyles");
+
+    // Should replace className with style
+    expect(output).not.toContain("className");
+    expect(output).toContain("style:");
+
+    // Should have the expected style keys
+    expect(output).toContain("_flex_row_items_center_justify_start");
+  });
+
+  it('should transform className={"..."} with modifiers', () => {
+    const input = `
+      import { Pressable } from 'react-native';
+      export function Component() {
+        return <Pressable className={"bg-blue-500 active:bg-blue-700 p-4"} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have StyleSheet with both base and active styles
+    expect(output).toContain("_bg_blue_500_p_4");
+    expect(output).toContain("_active_bg_blue_700");
+
+    // Should have style function for active modifier (Pressable uses 'pressed' parameter)
+    expect(output).toMatch(/(pressed|_state)/);
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it('should transform className={"..."} with platform modifiers', () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className={"p-4 ios:p-6 android:p-8"} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+    expect(output).toMatch(/from ['"]react-native['"]/); // Match both single and double quotes
+
+    // Should have Platform.select
+    expect(output).toContain("Platform.select");
+
+    // Should have platform-specific styles
+    expect(output).toContain("_ios_p_6");
+    expect(output).toContain("_android_p_8");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it('should handle empty className={""}', () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className={""} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should remove empty className attribute entirely
+    expect(output).not.toContain("className");
+    expect(output).not.toContain("style=");
+  });
 });
 
 describe("Babel plugin - placeholder: modifier transformation", () => {
@@ -1250,6 +1333,34 @@ describe("Babel plugin - custom color scheme hook import", () => {
     expect(output).not.toContain("_twColorScheme = useTheme()");
   });
 
+  it("should not treat type-only imports as having the hook", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+      import type { useColorScheme } from 'react-native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should add a VALUE import for useColorScheme (type import doesn't count)
+    expect(output).toMatch(/import\s+\{[^}]*useColorScheme[^}]*\}\s+from\s+['"]react-native['"]/);
+
+    // Should inject the hook
+    expect(output).toContain("_twColorScheme = useColorScheme()");
+
+    // Should have both type-only and value imports in output
+    // (TypeScript preset keeps type imports for type checking)
+    const colorSchemeMatches = output.match(/useColorScheme/g);
+    expect(colorSchemeMatches).toBeTruthy();
+    if (colorSchemeMatches) {
+      expect(colorSchemeMatches.length).toBeGreaterThanOrEqual(2); // At least in import and hook call
+    }
+  });
+
   it("should handle both type-only and aliased imports together", () => {
     const input = `
       import React from 'react';
@@ -1412,3 +1523,390 @@ describe("Babel plugin - scheme: modifier", () => {
     expect(output).toContain("_twColorScheme === 'light'");
   });
 });
+
+describe("Babel plugin - color scheme modifiers in tw/twStyle", () => {
+  it("should transform tw with dark: modifier inside component", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white dark:bg-gray-900\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should inject useColorScheme hook
+    expect(output).toContain("useColorScheme");
+    expect(output).toContain("_twColorScheme");
+
+    // Should generate style array with conditionals
+    expect(output).toContain("style: [");
+    expect(output).toContain('_twColorScheme === "dark"');
+    expect(output).toContain("_twStyles._dark_bg_gray_900");
+    expect(output).toContain("_twStyles._bg_white");
+
+    // Should have StyleSheet.create
+    expect(output).toContain("StyleSheet.create");
+  });
+
+  it("should transform twStyle with light: modifier inside component", () => {
+    const input = `
+      import { twStyle } from '@mgcrea/react-native-tailwind';
+
+      export const MyComponent = () => {
+        const buttonStyles = twStyle('text-gray-900 light:text-gray-100');
+        return null;
+      };
+    `;
+
+    const output = transform(input);
+
+    // Should inject useColorScheme hook
+    expect(output).toContain("useColorScheme");
+    expect(output).toContain("_twColorScheme");
+
+    // Should generate style array with conditionals
+    expect(output).toContain("style: [");
+    expect(output).toContain('_twColorScheme === "light"');
+    expect(output).toContain("_twStyles._light_text_gray_100");
+    expect(output).toContain("_twStyles._text_gray_900");
+  });
+
+  it("should transform tw with both dark: and light: modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-blue-500 dark:bg-blue-900 light:bg-blue-100\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have both conditionals
+    expect(output).toContain('_twColorScheme === "dark"');
+    expect(output).toContain('_twColorScheme === "light"');
+    expect(output).toContain("_twStyles._dark_bg_blue_900");
+    expect(output).toContain("_twStyles._light_bg_blue_100");
+    expect(output).toContain("_twStyles._bg_blue_500");
+  });
+
+  it("should combine color scheme modifiers with state modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white dark:bg-gray-900 active:bg-blue-500\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have color scheme conditionals in style array
+    expect(output).toContain("style: [");
+    expect(output).toContain('_twColorScheme === "dark"');
+
+    // Should have activeStyle property (separate from color scheme)
+    expect(output).toContain("activeStyle:");
+    expect(output).toContain("_twStyles._active_bg_blue_500");
+  });
+
+  it("should warn if tw with color scheme modifiers used outside component", () => {
+    const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      const globalStyles = tw\`bg-white dark:bg-gray-900\`;
+    `;
+
+    const output = transform(input);
+
+    // Should warn about usage outside component
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("Color scheme modifiers (dark:, light:) in tw/twStyle calls"),
+    );
+
+    // Should not inject hook (no component scope)
+    expect(output).not.toContain("useColorScheme");
+
+    // Should still generate styles but without runtime conditionals
+    expect(output).toContain("_twStyles");
+
+    consoleWarnSpy.mockRestore();
+  });
+
+  it("should handle tw with only dark: modifier (no base class)", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`dark:bg-gray-900\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should still generate style array
+    expect(output).toContain("style: [");
+    expect(output).toContain('_twColorScheme === "dark"');
+    expect(output).toContain("_twStyles._dark_bg_gray_900");
+  });
+
+  it("should work with custom color scheme hook import", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+      import { useTheme } from '@react-navigation/native';
+
+      function MyComponent() {
+        const styles = tw\`bg-white dark:bg-gray-900\`;
+        return null;
+      }
+    `;
+
+    const options: PluginOptions = {
+      colorScheme: {
+        importFrom: "@react-navigation/native",
+        importName: "useTheme",
+      },
+    };
+
+    const output = transform(input, options);
+
+    // Should use existing import (not duplicate)
+    const themeImportCount = (output.match(/useTheme/g) ?? []).length;
+    // Should appear in import statement and hook call
+    expect(themeImportCount).toBeGreaterThanOrEqual(2);
+
+    // Should call the custom hook
+    expect(output).toContain("useTheme()");
+  });
+
+  it("should generate both style array and darkStyle/lightStyle properties", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white dark:bg-gray-900 light:bg-gray-50\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have runtime conditional in style array
+    expect(output).toContain("style: [");
+    expect(output).toContain('_twColorScheme === "dark"');
+    expect(output).toContain('_twColorScheme === "light"');
+
+    // Should ALSO have darkStyle and lightStyle properties for manual access
+    expect(output).toContain("darkStyle:");
+    expect(output).toContain("lightStyle:");
+    expect(output).toContain("_twStyles._dark_bg_gray_900");
+    expect(output).toContain("_twStyles._light_bg_gray_50");
+  });
+
+  it("should allow accessing raw color values from darkStyle/lightStyle", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const btnStyles = tw\`bg-blue-500 dark:bg-blue-900\`;
+        // User can access raw hex for Reanimated
+        const darkBgColor = btnStyles.darkStyle?.backgroundColor;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have darkStyle property available
+    expect(output).toContain("darkStyle:");
+    expect(output).toContain("_twStyles._dark_bg_blue_900");
+
+    // The actual usage line should be preserved (TypeScript/Babel doesn't remove it)
+    expect(output).toContain("btnStyles.darkStyle");
+  });
+
+  // Platform modifier tests for tw/twStyle
+  it("should transform tw with ios: modifier", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white ios:p-6\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should add Platform import
+    expect(output).toContain("Platform");
+    expect(output).toContain('from "react-native"');
+
+    // Should generate style array with Platform.select()
+    expect(output).toContain("style: [");
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("ios:");
+    expect(output).toContain("_twStyles._ios_p_6");
+    expect(output).toContain("_twStyles._bg_white");
+
+    // Should have StyleSheet.create
+    expect(output).toContain("StyleSheet.create");
+  });
+
+  it("should transform twStyle with android: modifier", () => {
+    const input = `
+      import { twStyle } from '@mgcrea/react-native-tailwind';
+
+      export const MyComponent = () => {
+        const buttonStyles = twStyle('bg-blue-500 android:p-8');
+        return null;
+      };
+    `;
+
+    const output = transform(input);
+
+    // Should add Platform import
+    expect(output).toContain("Platform");
+
+    // Should generate style array with Platform.select()
+    expect(output).toContain("style: [");
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("android:");
+    expect(output).toContain("_twStyles._android_p_8");
+    expect(output).toContain("_twStyles._bg_blue_500");
+  });
+
+  it("should transform tw with multiple platform modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white ios:p-6 android:p-8 web:p-4\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should generate Platform.select() with all platforms
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("ios:");
+    expect(output).toContain("android:");
+    expect(output).toContain("web:");
+    expect(output).toContain("_twStyles._ios_p_6");
+    expect(output).toContain("_twStyles._android_p_8");
+    expect(output).toContain("_twStyles._web_p_4");
+  });
+
+  it("should combine platform modifiers with color-scheme modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white ios:p-6 dark:bg-gray-900\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have both Platform and useColorScheme
+    expect(output).toContain("Platform");
+    expect(output).toContain("useColorScheme");
+    expect(output).toContain("_twColorScheme");
+
+    // Should have both conditionals in style array
+    expect(output).toContain("Platform.select");
+    expect(output).toContain('_twColorScheme === "dark"');
+  });
+
+  it("should generate iosStyle/androidStyle/webStyle properties for manual access", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white ios:p-6 android:p-8 web:p-4\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have separate platform style properties
+    expect(output).toContain("iosStyle:");
+    expect(output).toContain("_twStyles._ios_p_6");
+    expect(output).toContain("androidStyle:");
+    expect(output).toContain("_twStyles._android_p_8");
+    expect(output).toContain("webStyle:");
+    expect(output).toContain("_twStyles._web_p_4");
+
+    // Should also have runtime Platform.select() in style array
+    expect(output).toContain("Platform.select");
+  });
+
+  it("should work with only platform modifiers (no base class)", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`ios:p-6 android:p-8\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should generate Platform.select() even without base classes
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("_twStyles._ios_p_6");
+    expect(output).toContain("_twStyles._android_p_8");
+  });
+
+  it("should allow accessing platform-specific styles manually", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const btnStyles = tw\`bg-blue-500 ios:p-6\`;
+        const iosPadding = btnStyles.iosStyle;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have iosStyle property available
+    expect(output).toContain("iosStyle:");
+    expect(output).toContain("_twStyles._ios_p_6");
+
+    // The actual usage line should be preserved
+    expect(output).toContain("btnStyles.iosStyle");
+  });
+
+  it("should combine state modifiers with platform modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white active:bg-blue-500 ios:p-6\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have both activeStyle and platform modifiers
+    expect(output).toContain("activeStyle:");
+    expect(output).toContain("_twStyles._active_bg_blue_500");
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("_twStyles._ios_p_6");
+  });
+});