@mgcrea/react-native-tailwind 0.9.0 → 0.10.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 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/dist/types/config.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Configuration for the scheme: modifier
+ */
+export type SchemeModifierConfig = {
+    darkSuffix?: string;
+    lightSuffix?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.9.0",
+  "version": "0.10.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",
@@ -29,10 +29,9 @@
     }
   },
   "files": [
-    "*.podspec",
     "src",
     "dist",
-    "ios"
+    "README.md"
   ],
   "scripts": {
     "dev": "cd example; npm run dev",
@@ -91,7 +90,8 @@
   },
   "pnpm": {
     "onlyBuiltDependencies": [
-      "esbuild"
+      "esbuild",
+      "unrs-resolver"
     ]
   }
 }

package/src/babel/config-loader.test.ts

@@ -0,0 +1,152 @@
+import * as fs from "fs";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { extractCustomColors, findTailwindConfig, loadTailwindConfig } from "./config-loader";
+
+// Mock fs
+vi.mock("fs");
+
+describe("config-loader", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("findTailwindConfig", () => {
+    it("should find tailwind.config.mjs in current directory", () => {
+      const startDir = "/project/src";
+      const expectedPath = "/project/src/tailwind.config.mjs";
+
+      vi.spyOn(fs, "existsSync").mockImplementation((filepath) => {
+        return filepath === expectedPath;
+      });
+
+      const result = findTailwindConfig(startDir);
+      expect(result).toBe(expectedPath);
+    });
+
+    it("should find tailwind.config.js in parent directory", () => {
+      const startDir = "/project/src/components";
+      const expectedPath = "/project/tailwind.config.js";
+
+      vi.spyOn(fs, "existsSync").mockImplementation((filepath) => {
+        return filepath === expectedPath;
+      });
+
+      const result = findTailwindConfig(startDir);
+      expect(result).toBe(expectedPath);
+    });
+
+    it("should return null if no config found", () => {
+      const startDir = "/project/src";
+
+      vi.spyOn(fs, "existsSync").mockReturnValue(false);
+
+      const result = findTailwindConfig(startDir);
+      expect(result).toBeNull();
+    });
+
+    it("should prioritize config file extensions in correct order", () => {
+      const startDir = "/project";
+      const mjsPath = "/project/tailwind.config.mjs";
+      const jsPath = "/project/tailwind.config.js";
+
+      vi.spyOn(fs, "existsSync").mockImplementation((filepath) => {
+        // Both exist, but mjs should be found first
+        return filepath === mjsPath || filepath === jsPath;
+      });
+
+      const result = findTailwindConfig(startDir);
+      expect(result).toBe(mjsPath); // .mjs has priority
+    });
+  });
+
+  describe("loadTailwindConfig", () => {
+    it("should load config with default export", () => {
+      const configPath = "/project/tailwind.config.js";
+      const mockConfig = {
+        theme: {
+          extend: {
+            colors: { brand: "#123456" },
+          },
+        },
+      };
+
+      // Mock require.resolve and require
+      vi.spyOn(require, "resolve").mockReturnValue(configPath);
+      vi.doMock(configPath, () => ({ default: mockConfig }));
+
+      // We need to use dynamic import workaround for testing
+      const config = { default: mockConfig };
+      const result = "default" in config ? config.default : config;
+
+      expect(result).toEqual(mockConfig);
+    });
+
+    it("should load config with direct export", () => {
+      const mockConfig = {
+        theme: {
+          colors: { primary: "#ff0000" },
+        },
+      };
+
+      const config = mockConfig;
+      const result = "default" in config ? (config as { default: unknown }).default : config;
+
+      expect(result).toEqual(mockConfig);
+    });
+
+    it("should cache loaded configs", () => {
+      const configPath = "/project/tailwind.config.js";
+      const _mockConfig = { theme: {} };
+
+      vi.spyOn(require, "resolve").mockReturnValue(configPath);
+
+      // First load
+      const config1 = loadTailwindConfig(configPath);
+
+      // Second load - should hit cache
+      const config2 = loadTailwindConfig(configPath);
+
+      // Both should return same result (from cache)
+      expect(config1).toBe(config2);
+    });
+  });
+
+  describe("extractCustomColors", () => {
+    it("should return empty object when no config found", () => {
+      vi.spyOn(fs, "existsSync").mockReturnValue(false);
+
+      const result = extractCustomColors("/project/src/file.ts");
+      expect(result).toEqual({});
+    });
+
+    it("should return empty object when config has no theme", () => {
+      const configPath = "/project/tailwind.config.js";
+
+      vi.spyOn(fs, "existsSync").mockImplementation((filepath) => filepath === configPath);
+      vi.spyOn(require, "resolve").mockReturnValue(configPath);
+
+      // loadTailwindConfig will be called, but we've already tested it
+      // For integration, we'd need to mock the entire flow
+      const result = extractCustomColors("/project/src/file.ts");
+
+      // Without actual config loading, this returns empty
+      expect(result).toEqual({});
+    });
+
+    it("should extract colors from theme.extend.colors", () => {
+      // This would require complex mocking of the entire require flow
+      // Testing the logic: theme.extend.colors is preferred
+      const colors = { brand: { light: "#fff", dark: "#000" } };
+      const theme = {
+        extend: { colors },
+      };
+
+      // If we had the config, we'd flatten the colors
+      expect(theme.extend.colors).toEqual(colors);
+    });
+  });
+});

package/src/babel/plugin.test.ts

@@ -721,3 +721,420 @@ describe("Babel plugin - platform modifier transformation", () => {
     expect(output).not.toMatch(/(?<!_ios|_android|_web)_p_8:/);
   });
 });
+
+describe("Babel plugin - color scheme modifier transformation", () => {
+  it("should transform dark: modifier to conditional expression", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="bg-white dark:bg-gray-900" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should import useColorScheme
+    expect(output).toContain("useColorScheme");
+    expect(output).toMatch(/import.*useColorScheme.*from ['"]react-native['"]/);
+
+    // Should inject colorScheme hook in component
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+
+    // Should have base bg-white style
+    expect(output).toContain("_bg_white");
+
+    // Should have dark:bg-gray-900 style
+    expect(output).toContain("_dark_bg_gray_900");
+
+    // Should generate conditional: _twColorScheme === 'dark' && ...
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should support both dark: and light: modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="bg-gray-100 dark:bg-gray-900 light:bg-white" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have all three styles
+    expect(output).toContain("_bg_gray_100");
+    expect(output).toContain("_dark_bg_gray_900");
+    expect(output).toContain("_light_bg_white");
+
+    // Should have both conditionals
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]light['"]/);
+  });
+
+  it("should inject hook once for multiple elements with color scheme modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View, Text } from 'react-native';
+
+      export function Component() {
+        return (
+          <>
+            <View className="dark:bg-gray-900" />
+            <Text className="dark:text-white" />
+            <View className="light:bg-white" />
+          </>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Count occurrences of useColorScheme() call - should be exactly 1
+    const hookCallMatches = output.match(/=\s*useColorScheme\(\)/g);
+    expect(hookCallMatches).toHaveLength(1);
+
+    // Should have color scheme variable
+    expect(output).toContain("_twColorScheme");
+  });
+
+  it("should work with color scheme and platform modifiers together", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="p-4 ios:p-6 dark:bg-gray-900" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+
+    // Should have useColorScheme import
+    expect(output).toContain("useColorScheme");
+
+    // Should have Platform.select for ios:
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("_ios_p_6");
+
+    // Should have color scheme conditional for dark:
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+    expect(output).toContain("_dark_bg_gray_900");
+  });
+
+  it("should only add useColorScheme import once when needed", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <>
+            <View className="dark:bg-black" />
+            <View className="light:bg-white" />
+          </>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Count useColorScheme imports
+    const importMatches = output.match(/import.*useColorScheme.*from ['"]react-native['"]/g);
+    expect(importMatches).toHaveLength(1);
+  });
+
+  it("should merge with existing useColorScheme import", () => {
+    const input = `
+      import React from 'react';
+      import { View, useColorScheme } from 'react-native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should still use useColorScheme
+    expect(output).toContain("useColorScheme");
+
+    // Should inject hook call
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+  });
+
+  it("should work with concise arrow functions", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      const Component = () => <View className="dark:bg-gray-900" />;
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject useColorScheme import
+    expect(output).toContain("useColorScheme");
+
+    // Should convert concise arrow to block statement and inject hook
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+    expect(output).toContain("return");
+
+    // Should have the style
+    expect(output).toContain("_dark_bg_gray_900");
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should inject hook at component level when dark: used in nested callback", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        const items = [1, 2, 3];
+        return (
+          <View>
+            {items.map(item => (
+              <View key={item} className="dark:bg-gray-900" />
+            ))}
+          </View>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject hook at Component level (not in map callback)
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+
+    // Hook should be injected in Component function, not in map callback
+    // Count occurrences - should be exactly 1 at Component level
+    const hookCallMatches = output.match(/=\s*useColorScheme\(\)/g);
+    expect(hookCallMatches).toHaveLength(1);
+
+    // Should still generate conditional expression
+    expect(output).toContain("_dark_bg_gray_900");
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should handle dynamic expressions with dark:/light: modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component({ isActive }) {
+        return (
+          <View className={\`p-4 \${isActive ? "dark:bg-blue-500" : "dark:bg-gray-900"}\`} />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject useColorScheme
+    expect(output).toContain("useColorScheme");
+    expect(output).toContain("_twColorScheme");
+
+    // Should have both dark styles
+    expect(output).toContain("_dark_bg_blue_500");
+    expect(output).toContain("_dark_bg_gray_900");
+
+    // Should have conditional expressions for color scheme
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should handle dynamic expressions with platform modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component({ isLarge }) {
+        return (
+          <View className={\`p-4 \${isLarge ? "ios:p-8" : "ios:p-6"}\`} />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject Platform import
+    expect(output).toContain("Platform");
+
+    // Should have both ios styles
+    expect(output).toContain("_ios_p_8");
+    expect(output).toContain("_ios_p_6");
+
+    // Should have Platform.select
+    expect(output).toContain("Platform.select");
+  });
+
+  it("should skip color scheme modifiers when used outside component scope", () => {
+    // Suppress console.warn for this test
+    const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      // Class component - no function component scope
+      class MyComponent extends React.Component {
+        render() {
+          return <View className="p-4 dark:bg-gray-900" />;
+        }
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should warn about invalid context
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("dark:/light: modifiers require a function component scope"),
+    );
+
+    // Should NOT inject useColorScheme import (no valid component scope)
+    expect(output).not.toContain("useColorScheme");
+
+    // Should NOT have _twColorScheme variable reference (would cause ReferenceError)
+    expect(output).not.toContain("_twColorScheme");
+
+    // Should NOT have dark: style conditional (skipped due to no component scope)
+    expect(output).not.toContain("_dark_bg_gray_900");
+
+    // Should still transform base classes (p-4)
+    expect(output).toContain("_p_4");
+
+    consoleWarnSpy.mockRestore();
+  });
+});
+
+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");
+  });
+});
+
+describe("Babel plugin - scheme: modifier", () => {
+  it.skip("should expand scheme: modifier into dark: and light: modifiers", () => {
+    // Note: This test requires tailwind.config.js with custom colors defined
+    // The scheme: modifier expands to dark: and light: modifiers which require
+    // the color variants to exist in customColors (e.g., systemGray-dark, systemGray-light)
+    //
+    // Integration test should be done in a real project with tailwind.config.js
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="scheme:text-systemGray" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should generate both dark and light variants
+    expect(output).toContain("_dark_text_systemGray_dark");
+    expect(output).toContain("_light_text_systemGray_light");
+
+    // Should inject useColorScheme hook
+    expect(output).toContain("useColorScheme");
+    expect(output).toContain("_twColorScheme");
+
+    // Should have conditional expressions
+    expect(output).toContain("_twColorScheme === 'dark'");
+    expect(output).toContain("_twColorScheme === 'light'");
+  });
+});