@mgcrea/react-native-tailwind 0.8.0 → 0.9.0

package/dist/stubs/tw.test.js

@@ -0,0 +1 @@
+var _vitest=require("vitest");var _tw=require("./tw");(0,_vitest.describe)("tw stub",function(){(0,_vitest.it)("should throw error when tw() is called without Babel transformation",function(){(0,_vitest.expect)(function(){return(0,_tw.tw)`bg-blue-500`;}).toThrow("tw() must be transformed by the Babel plugin. "+"Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. "+"For runtime parsing, use: import { tw } from '@mgcrea/react-native-tailwind/runtime'");});(0,_vitest.it)("should throw error when twStyle() is called without Babel transformation",function(){(0,_vitest.expect)(function(){return(0,_tw.twStyle)("bg-blue-500");}).toThrow("twStyle() must be transformed by the Babel plugin. "+"Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. "+"For runtime parsing, use: import { twStyle } from '@mgcrea/react-native-tailwind/runtime'");});(0,_vitest.it)("should throw error with template literal interpolation",function(){var dynamic="active";(0,_vitest.expect)(function(){return(0,_tw.tw)`bg-blue-500 ${dynamic}:bg-blue-700`;}).toThrow("tw() must be transformed by the Babel plugin");});});

package/dist/utils/flattenColors.d.ts

@@ -7,6 +7,7 @@ type NestedColors = {
 /**
  * Flatten nested color objects into flat key-value map
  * Example: { brand: { light: '#fff', dark: '#000' } } => { 'brand-light': '#fff', 'brand-dark': '#000' }
+ * Special handling for DEFAULT: { primary: { DEFAULT: '#000', 500: '#333' } } => { 'primary': '#000', 'primary-500': '#333' }
  *
  * @param colors - Nested color object where values can be strings or objects
  * @param prefix - Optional prefix for nested keys (used for recursion)

package/dist/utils/flattenColors.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.flattenColors=flattenColors;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));function flattenColors(colors){var prefix=arguments.length>1&&arguments[1]!==undefined?arguments[1]:"";var result={};for(var _ref of Object.entries(colors)){var _ref2=(0,_slicedToArray2.default)(_ref,2);var _key=_ref2[0];var value=_ref2[1];var newKey=prefix?`${prefix}-${_key}`:_key;if(typeof value==="string"){result[newKey]=value;}else if(typeof value==="object"&&value!==null){Object.assign(result,flattenColors(value,newKey));}}return result;}
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.flattenColors=flattenColors;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));function flattenColors(colors){var prefix=arguments.length>1&&arguments[1]!==undefined?arguments[1]:"";var result={};for(var _ref of Object.entries(colors)){var _ref2=(0,_slicedToArray2.default)(_ref,2);var _key=_ref2[0];var value=_ref2[1];var newKey=_key==="DEFAULT"&&prefix?prefix:prefix?`${prefix}-${_key}`:_key;if(typeof value==="string"){result[newKey]=value;}else if(typeof value==="object"&&value!==null){Object.assign(result,flattenColors(value,newKey));}}return result;}

package/dist/utils/flattenColors.test.js

@@ -1 +1 @@
-var _vitest=require("vitest");var _flattenColors=require("./flattenColors");(0,_vitest.describe)("flattenColors",function(){(0,_vitest.it)("should handle flat color objects",function(){var colors={red:"#ff0000",blue:"#0000ff",green:"#00ff00"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#ff0000",blue:"#0000ff",green:"#00ff00"});});(0,_vitest.it)("should flatten single-level nested objects",function(){var colors={brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"brand-primary":"#ff6b6b","brand-secondary":"#4ecdc4"});});(0,_vitest.it)("should flatten multi-level nested objects",function(){var colors={brand:{light:{primary:"#ffcccc",secondary:"#ccffff"},dark:{primary:"#990000",secondary:"#006666"}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"brand-light-primary":"#ffcccc","brand-light-secondary":"#ccffff","brand-dark-primary":"#990000","brand-dark-secondary":"#006666"});});(0,_vitest.it)("should handle mixed flat and nested objects",function(){var colors={white:"#ffffff",black:"#000000",brand:{primary:"#ff6b6b",secondary:"#4ecdc4"},accent:"#ffe66d"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({white:"#ffffff",black:"#000000","brand-primary":"#ff6b6b","brand-secondary":"#4ecdc4",accent:"#ffe66d"});});(0,_vitest.it)("should handle Tailwind-style color scale objects",function(){var colors={gray:{"50":"#f9fafb","100":"#f3f4f6","200":"#e5e7eb","500":"#6b7280","900":"#111827"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"gray-50":"#f9fafb","gray-100":"#f3f4f6","gray-200":"#e5e7eb","gray-500":"#6b7280","gray-900":"#111827"});});(0,_vitest.it)("should handle empty object",function(){(0,_vitest.expect)((0,_flattenColors.flattenColors)({})).toEqual({});});(0,_vitest.it)("should handle single color",function(){var colors={primary:"#ff0000"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({primary:"#ff0000"});});(0,_vitest.it)("should handle deeply nested objects (3+ levels)",function(){var colors={theme:{light:{brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}},dark:{brand:{primary:"#990000",secondary:"#006666"}}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"theme-light-brand-primary":"#ff6b6b","theme-light-brand-secondary":"#4ecdc4","theme-dark-brand-primary":"#990000","theme-dark-brand-secondary":"#006666"});});(0,_vitest.it)("should handle numeric keys",function(){var colors={blue:{"100":"#dbeafe","500":"#3b82f6","900":"#1e3a8a"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"blue-100":"#dbeafe","blue-500":"#3b82f6","blue-900":"#1e3a8a"});});(0,_vitest.it)("should handle keys with hyphens",function(){var colors={"brand-primary":"#ff0000","brand-secondary":{light:"#00ff00",dark:"#006600"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"brand-primary":"#ff0000","brand-secondary-light":"#00ff00","brand-secondary-dark":"#006600"});});(0,_vitest.it)("should handle uppercase and lowercase hex values",function(){var colors={red:"#FF0000",blue:"#0000ff",green:"#00Ff00"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#FF0000",blue:"#0000ff",green:"#00Ff00"});});(0,_vitest.it)("should handle 3-digit hex values",function(){var colors={red:"#f00",blue:"#00f",green:"#0f0"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#f00",blue:"#00f",green:"#0f0"});});(0,_vitest.it)("should handle 8-digit hex values (with alpha)",function(){var colors={"red-50":"#ff000080","blue-50":"#0000ff80"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"red-50":"#ff000080","blue-50":"#0000ff80"});});(0,_vitest.it)("should handle complex real-world Tailwind config",function(){var colors={transparent:"transparent",current:"currentColor",white:"#ffffff",black:"#000000",gray:{"50":"#f9fafb","100":"#f3f4f6","500":"#6b7280","900":"#111827"},brand:{primary:"#ff6b6b",secondary:"#4ecdc4",accent:{light:"#ffe66d",dark:"#ffb900"}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({transparent:"transparent",current:"currentColor",white:"#ffffff",black:"#000000","gray-50":"#f9fafb","gray-100":"#f3f4f6","gray-500":"#6b7280","gray-900":"#111827","brand-primary":"#ff6b6b","brand-secondary":"#4ecdc4","brand-accent-light":"#ffe66d","brand-accent-dark":"#ffb900"});});(0,_vitest.it)("should not mutate input object",function(){var colors={brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}};var original=JSON.parse(JSON.stringify(colors));(0,_flattenColors.flattenColors)(colors);(0,_vitest.expect)(colors).toEqual(original);});(0,_vitest.it)("should handle undefined values gracefully",function(){var colors={red:"#ff0000",blue:undefined,green:"#00ff00"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#ff0000",green:"#00ff00"});});(0,_vitest.it)("should handle special color keywords",function(){var colors={transparent:"transparent",current:"currentColor",inherit:"inherit"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({transparent:"transparent",current:"currentColor",inherit:"inherit"});});(0,_vitest.it)("should handle RGB/RGBA color values",function(){var colors={primary:"rgb(255, 0, 0)",secondary:"rgba(0, 255, 0, 0.5)"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({primary:"rgb(255, 0, 0)",secondary:"rgba(0, 255, 0, 0.5)"});});(0,_vitest.it)("should handle very deeply nested structures (stress test)",function(){var colors={level1:{level2:{level3:{level4:{level5:"#ff0000"}}}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"level1-level2-level3-level4-level5":"#ff0000"});});(0,_vitest.it)("should handle camelCase keys",function(){var colors={brandPrimary:"#ff0000",accentColor:{lightShade:"#ffcccc",darkShade:"#cc0000"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({brandPrimary:"#ff0000","accentColor-lightShade":"#ffcccc","accentColor-darkShade":"#cc0000"});});(0,_vitest.it)("should produce consistent output",function(){var colors={brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}};var result1=(0,_flattenColors.flattenColors)(colors);var result2=(0,_flattenColors.flattenColors)(colors);var result3=(0,_flattenColors.flattenColors)(colors);(0,_vitest.expect)(result1).toEqual(result2);(0,_vitest.expect)(result2).toEqual(result3);});(0,_vitest.it)("should maintain key order (insertion order)",function(){var colors={z:"#000001",a:"#000002",m:"#000003"};var flattened=(0,_flattenColors.flattenColors)(colors);var keys=Object.keys(flattened);(0,_vitest.expect)(keys).toEqual(["z","a","m"]);});});
+var _vitest=require("vitest");var _flattenColors=require("./flattenColors");(0,_vitest.describe)("flattenColors",function(){(0,_vitest.it)("should handle flat color objects",function(){var colors={red:"#ff0000",blue:"#0000ff",green:"#00ff00"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#ff0000",blue:"#0000ff",green:"#00ff00"});});(0,_vitest.it)("should flatten single-level nested objects",function(){var colors={brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"brand-primary":"#ff6b6b","brand-secondary":"#4ecdc4"});});(0,_vitest.it)("should flatten multi-level nested objects",function(){var colors={brand:{light:{primary:"#ffcccc",secondary:"#ccffff"},dark:{primary:"#990000",secondary:"#006666"}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"brand-light-primary":"#ffcccc","brand-light-secondary":"#ccffff","brand-dark-primary":"#990000","brand-dark-secondary":"#006666"});});(0,_vitest.it)("should handle mixed flat and nested objects",function(){var colors={white:"#ffffff",black:"#000000",brand:{primary:"#ff6b6b",secondary:"#4ecdc4"},accent:"#ffe66d"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({white:"#ffffff",black:"#000000","brand-primary":"#ff6b6b","brand-secondary":"#4ecdc4",accent:"#ffe66d"});});(0,_vitest.it)("should handle Tailwind-style color scale objects",function(){var colors={gray:{"50":"#f9fafb","100":"#f3f4f6","200":"#e5e7eb","500":"#6b7280","900":"#111827"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"gray-50":"#f9fafb","gray-100":"#f3f4f6","gray-200":"#e5e7eb","gray-500":"#6b7280","gray-900":"#111827"});});(0,_vitest.it)("should handle empty object",function(){(0,_vitest.expect)((0,_flattenColors.flattenColors)({})).toEqual({});});(0,_vitest.it)("should handle single color",function(){var colors={primary:"#ff0000"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({primary:"#ff0000"});});(0,_vitest.it)("should handle deeply nested objects (3+ levels)",function(){var colors={theme:{light:{brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}},dark:{brand:{primary:"#990000",secondary:"#006666"}}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"theme-light-brand-primary":"#ff6b6b","theme-light-brand-secondary":"#4ecdc4","theme-dark-brand-primary":"#990000","theme-dark-brand-secondary":"#006666"});});(0,_vitest.it)("should handle numeric keys",function(){var colors={blue:{"100":"#dbeafe","500":"#3b82f6","900":"#1e3a8a"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"blue-100":"#dbeafe","blue-500":"#3b82f6","blue-900":"#1e3a8a"});});(0,_vitest.it)("should handle keys with hyphens",function(){var colors={"brand-primary":"#ff0000","brand-secondary":{light:"#00ff00",dark:"#006600"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"brand-primary":"#ff0000","brand-secondary-light":"#00ff00","brand-secondary-dark":"#006600"});});(0,_vitest.it)("should handle uppercase and lowercase hex values",function(){var colors={red:"#FF0000",blue:"#0000ff",green:"#00Ff00"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#FF0000",blue:"#0000ff",green:"#00Ff00"});});(0,_vitest.it)("should handle 3-digit hex values",function(){var colors={red:"#f00",blue:"#00f",green:"#0f0"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#f00",blue:"#00f",green:"#0f0"});});(0,_vitest.it)("should handle 8-digit hex values (with alpha)",function(){var colors={"red-50":"#ff000080","blue-50":"#0000ff80"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"red-50":"#ff000080","blue-50":"#0000ff80"});});(0,_vitest.it)("should handle complex real-world Tailwind config",function(){var colors={transparent:"transparent",current:"currentColor",white:"#ffffff",black:"#000000",gray:{"50":"#f9fafb","100":"#f3f4f6","500":"#6b7280","900":"#111827"},brand:{primary:"#ff6b6b",secondary:"#4ecdc4",accent:{light:"#ffe66d",dark:"#ffb900"}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({transparent:"transparent",current:"currentColor",white:"#ffffff",black:"#000000","gray-50":"#f9fafb","gray-100":"#f3f4f6","gray-500":"#6b7280","gray-900":"#111827","brand-primary":"#ff6b6b","brand-secondary":"#4ecdc4","brand-accent-light":"#ffe66d","brand-accent-dark":"#ffb900"});});(0,_vitest.it)("should not mutate input object",function(){var colors={brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}};var original=JSON.parse(JSON.stringify(colors));(0,_flattenColors.flattenColors)(colors);(0,_vitest.expect)(colors).toEqual(original);});(0,_vitest.it)("should handle undefined values gracefully",function(){var colors={red:"#ff0000",blue:undefined,green:"#00ff00"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({red:"#ff0000",green:"#00ff00"});});(0,_vitest.it)("should handle special color keywords",function(){var colors={transparent:"transparent",current:"currentColor",inherit:"inherit"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({transparent:"transparent",current:"currentColor",inherit:"inherit"});});(0,_vitest.it)("should handle RGB/RGBA color values",function(){var colors={primary:"rgb(255, 0, 0)",secondary:"rgba(0, 255, 0, 0.5)"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({primary:"rgb(255, 0, 0)",secondary:"rgba(0, 255, 0, 0.5)"});});(0,_vitest.it)("should handle very deeply nested structures (stress test)",function(){var colors={level1:{level2:{level3:{level4:{level5:"#ff0000"}}}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"level1-level2-level3-level4-level5":"#ff0000"});});(0,_vitest.it)("should handle camelCase keys",function(){var colors={brandPrimary:"#ff0000",accentColor:{lightShade:"#ffcccc",darkShade:"#cc0000"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({brandPrimary:"#ff0000","accentColor-lightShade":"#ffcccc","accentColor-darkShade":"#cc0000"});});(0,_vitest.it)("should produce consistent output",function(){var colors={brand:{primary:"#ff6b6b",secondary:"#4ecdc4"}};var result1=(0,_flattenColors.flattenColors)(colors);var result2=(0,_flattenColors.flattenColors)(colors);var result3=(0,_flattenColors.flattenColors)(colors);(0,_vitest.expect)(result1).toEqual(result2);(0,_vitest.expect)(result2).toEqual(result3);});(0,_vitest.it)("should maintain key order (insertion order)",function(){var colors={z:"#000001",a:"#000002",m:"#000003"};var flattened=(0,_flattenColors.flattenColors)(colors);var keys=Object.keys(flattened);(0,_vitest.expect)(keys).toEqual(["z","a","m"]);});(0,_vitest.it)("should handle DEFAULT key in color scale objects",function(){var colors={primary:{"50":"#eefdfd","100":"#d4f9f9","200":"#aef2f3","500":"#1bacb5","900":"#1e4f5b",DEFAULT:"#1bacb5"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({primary:"#1bacb5","primary-50":"#eefdfd","primary-100":"#d4f9f9","primary-200":"#aef2f3","primary-500":"#1bacb5","primary-900":"#1e4f5b"});});(0,_vitest.it)("should handle DEFAULT key with multiple color scales",function(){var colors={primary:{DEFAULT:"#1bacb5","500":"#1bacb5"},secondary:{DEFAULT:"#ff6b6b","500":"#ff6b6b"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({primary:"#1bacb5","primary-500":"#1bacb5",secondary:"#ff6b6b","secondary-500":"#ff6b6b"});});(0,_vitest.it)("should handle DEFAULT key in nested structures",function(){var colors={brand:{primary:{DEFAULT:"#1bacb5",light:"#d4f9f9",dark:"#0e343e"}}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"brand-primary":"#1bacb5","brand-primary-light":"#d4f9f9","brand-primary-dark":"#0e343e"});});(0,_vitest.it)("should handle DEFAULT at top level (edge case)",function(){var colors={DEFAULT:"#000000",primary:"#ff0000"};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({DEFAULT:"#000000",primary:"#ff0000"});});(0,_vitest.it)("should handle mixed DEFAULT and regular keys",function(){var colors={gray:{"50":"#f9fafb","100":"#f3f4f6",DEFAULT:"#6b7280","500":"#6b7280","900":"#111827"},white:"#ffffff",brand:{DEFAULT:"#ff6b6b",accent:"#4ecdc4"}};(0,_vitest.expect)((0,_flattenColors.flattenColors)(colors)).toEqual({"gray-50":"#f9fafb","gray-100":"#f3f4f6",gray:"#6b7280","gray-500":"#6b7280","gray-900":"#111827",white:"#ffffff",brand:"#ff6b6b","brand-accent":"#4ecdc4"});});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.8.0",
+  "version": "0.9.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",
@@ -46,7 +46,7 @@
     "lint": "eslint src/",
     "prettify": "prettier --write src/",
     "check": "tsc --noEmit",
-    "spec": "vitest --run",
+    "spec": "vitest --run --coverage",
     "test": "npm run lint && npm run check && npm run spec",
     "prepare": "npm run build"
   },
@@ -69,7 +69,8 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.28.0",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.6",
+    "@vitest/coverage-v8": "^4.0.13",
     "babel-plugin-module-resolver": "^5.0.2",
     "esbuild": "^0.27.0",
     "eslint": "^9.39.1",
@@ -79,12 +80,12 @@
     "react": "^19.2.0",
     "react-native": "0.82.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.10"
+    "vitest": "^4.0.13"
   },
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "pnpm@10.22.0",
+  "packageManager": "pnpm@10.23.0",
   "publishConfig": {
     "access": "public"
   },

package/src/babel/config-loader.ts

@@ -72,6 +72,7 @@ export function loadTailwindConfig(configPath: string): TailwindConfig | null {
     configCache.set(configPath, resolved);
     return resolved;
   } catch (error) {
+    /* v8 ignore next 3 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(`[react-native-tailwind] Failed to load config from ${configPath}:`, error);
     }
@@ -98,6 +99,7 @@ export function extractCustomColors(filename: string): Record<string, string> {
   }
 
   // Warn if using theme.colors instead of theme.extend.colors
+  /* v8 ignore next 5 */
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
     console.warn(
       "[react-native-tailwind] Using theme.colors will override all default colors. " +

package/src/babel/plugin.test.ts

@@ -480,3 +480,244 @@ describe("Babel plugin - placeholder: modifier transformation", () => {
     consoleSpy.mockRestore();
   });
 });
+
+describe("Babel plugin - platform modifier transformation", () => {
+  it("should transform platform modifiers to Platform.select()", () => {
+    const input = `
+      import React from 'react';
+      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 import Platform from react-native
+    expect(output).toContain("Platform");
+    expect(output).toMatch(/import.*Platform.*from ['"]react-native['"]/);
+
+    // Should generate Platform.select()
+    expect(output).toContain("Platform.select");
+
+    // Should have base padding style
+    expect(output).toContain("_p_4");
+
+    // Should have iOS and Android specific styles
+    expect(output).toContain("_ios_p_6");
+    expect(output).toContain("_android_p_8");
+
+    // Should have correct style values in StyleSheet.create
+    expect(output).toMatch(/padding:\s*16/); // p-4
+    expect(output).toMatch(/padding:\s*24/); // p-6 (ios)
+    expect(output).toMatch(/padding:\s*32/); // p-8 (android)
+  });
+
+  it("should support multiple platform modifiers on same element", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="bg-white ios:bg-blue-50 android:bg-green-50 p-4 ios:p-6 android:p-8" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+
+    // Should have base styles (combined key)
+    expect(output).toContain("_bg_white_p_4");
+
+    // Should have iOS specific styles (combined key for multiple ios: modifiers)
+    expect(output).toContain("_ios_bg_blue_50_p_6");
+
+    // Should have Android specific styles (combined key for multiple android: modifiers)
+    expect(output).toContain("_android_bg_green_50_p_8");
+
+    // Should contain Platform.select with both platforms
+    expect(output).toMatch(/Platform\.select\s*\(\s*\{[\s\S]*ios:/);
+    expect(output).toMatch(/Platform\.select\s*\(\s*\{[\s\S]*android:/);
+  });
+
+  it("should support web platform modifier", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="p-4 web:p-2" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform.select with web
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("web:");
+    expect(output).toContain("_web_p_2");
+  });
+
+  it("should work with platform modifiers on all components", () => {
+    const input = `
+      import React from 'react';
+      import { View, Text, ScrollView } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="ios:bg-blue-500 android:bg-green-500">
+            <Text className="ios:text-lg android:text-xl">Platform text</Text>
+            <ScrollView contentContainerClassName="ios:p-4 android:p-8" />
+          </View>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should work on View - check for Platform.select separately (not checking style= format)
+    expect(output).toContain("Platform.select");
+
+    // Should work on Text
+    expect(output).toContain("_ios_text_lg");
+    expect(output).toContain("_android_text_xl");
+
+    // Should work on ScrollView contentContainerStyle
+    expect(output).toContain("contentContainerStyle");
+  });
+
+  it("should combine platform modifiers with state modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { Pressable, Text } from 'react-native';
+
+      export function Component() {
+        return (
+          <Pressable className="bg-blue-500 active:bg-blue-700 ios:shadow-md android:shadow-sm p-4">
+            <Text className="text-white">Button</Text>
+          </Pressable>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform.select for platform modifiers
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("_ios_shadow_md");
+    expect(output).toContain("_android_shadow_sm");
+
+    // Should have state modifier function for active
+    expect(output).toMatch(/\(\s*\{\s*pressed\s*\}\s*\)\s*=>/);
+    expect(output).toContain("pressed");
+    expect(output).toContain("_active_bg_blue_700");
+
+    // Should have base styles
+    expect(output).toContain("_bg_blue_500");
+    expect(output).toContain("_p_4");
+  });
+
+  it("should handle platform-specific colors", () => {
+    const input = `
+      import React from 'react';
+      import { View, Text } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="bg-gray-100 ios:bg-blue-50 android:bg-green-50">
+            <Text className="text-gray-900 ios:text-blue-900 android:text-green-900">
+              Platform colors
+            </Text>
+          </View>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have color values in StyleSheet
+    expect(output).toMatch(/#[0-9A-F]{6}/i); // Hex color format
+
+    // Should have platform-specific color classes
+    expect(output).toContain("_ios_text_blue_900");
+    expect(output).toContain("_android_text_green_900");
+  });
+
+  it("should only add Platform import once when needed", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <>
+            <View className="ios:p-4" />
+            <View className="android:p-8" />
+            <View className="ios:bg-blue-500" />
+          </>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+
+    // Count how many times Platform is imported (should be once)
+    const platformImports = output.match(/import.*Platform.*from ['"]react-native['"]/g);
+    expect(platformImports).toHaveLength(1);
+  });
+
+  it("should merge with existing Platform import", () => {
+    const input = `
+      import React from 'react';
+      import { View, Platform } from 'react-native';
+
+      export function Component() {
+        return <View className="ios:p-4 android:p-8" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should still use Platform.select
+    expect(output).toContain("Platform.select");
+
+    // Should not duplicate Platform import - Platform appears in import and Platform.select calls
+    expect(output).toMatch(/Platform.*react-native/);
+  });
+
+  it("should handle platform modifiers without base classes", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return <View className="ios:p-6 android:p-8" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should only have Platform.select, no base style
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("_ios_p_6");
+    expect(output).toContain("_android_p_8");
+
+    // Should not have generic padding without platform prefix
+    // Check that non-platform-prefixed style keys don't exist
+    expect(output).not.toMatch(/(?<!_ios|_android|_web)_p_4:/);
+    expect(output).not.toMatch(/(?<!_ios|_android|_web)_p_6:/);
+    expect(output).not.toMatch(/(?<!_ios|_android|_web)_p_8:/);
+  });
+});

package/src/babel/plugin.ts

@@ -5,7 +5,14 @@
 
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
-import { parseClassName, parsePlaceholderClasses, splitModifierClasses } from "../parser/index.js";
+import type { ParsedModifier, StateModifierType } from "../parser/index.js";
+import {
+  isPlatformModifier,
+  isStateModifier,
+  parseClassName,
+  parsePlaceholderClasses,
+  splitModifierClasses,
+} from "../parser/index.js";
 import type { StyleObject } from "../types/core.js";
 import { generateStyleKey } from "../utils/styleKey.js";
 import { extractCustomColors } from "./config-loader.js";
@@ -17,10 +24,11 @@ import {
   getTargetStyleProp,
   isAttributeSupported,
 } from "./utils/attributeMatchers.js";
-import { getComponentModifierSupport } from "./utils/componentSupport.js";
+import { getComponentModifierSupport, getStatePropertyForModifier } from "./utils/componentSupport.js";
 import { processDynamicExpression } from "./utils/dynamicProcessing.js";
 import { createStyleFunction, processStaticClassNameWithModifiers } from "./utils/modifierProcessing.js";
-import { addStyleSheetImport, injectStylesAtTop } from "./utils/styleInjection.js";
+import { processPlatformModifiers } from "./utils/platformModifierProcessing.js";
+import { addPlatformImport, addStyleSheetImport, injectStylesAtTop } from "./utils/styleInjection.js";
 import {
   addOrMergePlaceholderTextColorProp,
   findStyleAttribute,
@@ -59,6 +67,8 @@ type PluginState = PluginPass & {
   styleRegistry: Map<string, StyleObject>;
   hasClassNames: boolean;
   hasStyleSheetImport: boolean;
+  hasPlatformImport: boolean;
+  needsPlatformImport: boolean;
   customColors: Record<string, string>;
   supportedAttributes: Set<string>;
   attributePatterns: RegExp[];
@@ -90,6 +100,8 @@ export default function reactNativeTailwindBabelPlugin(
           state.styleRegistry = new Map();
           state.hasClassNames = false;
           state.hasStyleSheetImport = false;
+          state.hasPlatformImport = false;
+          state.needsPlatformImport = false;
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
@@ -116,19 +128,25 @@ export default function reactNativeTailwindBabelPlugin(
             addStyleSheetImport(path, t);
           }
 
+          // Add Platform import if platform modifiers were used and not already present
+          if (state.needsPlatformImport && !state.hasPlatformImport) {
+            addPlatformImport(path, t);
+          }
+
           // Generate and inject StyleSheet.create at the beginning of the file (after imports)
           // This ensures _twStyles is defined before any code that references it
           injectStylesAtTop(path, state.styleRegistry, state.stylesIdentifier, t);
         },
       },
 
-      // Check if StyleSheet is already imported and track tw/twStyle imports
+      // Check if StyleSheet/Platform are already imported and track tw/twStyle imports
       ImportDeclaration(path, state) {
         const node = path.node;
 
-        // Track react-native StyleSheet import
+        // Track react-native StyleSheet and Platform imports
         if (node.source.value === "react-native") {
           const specifiers = node.specifiers;
+
           const hasStyleSheet = specifiers.some((spec) => {
             if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
               return spec.imported.name === "StyleSheet";
@@ -136,6 +154,13 @@ export default function reactNativeTailwindBabelPlugin(
             return false;
           });
 
+          const hasPlatform = specifiers.some((spec) => {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              return spec.imported.name === "Platform";
+            }
+            return false;
+          });
+
           if (hasStyleSheet) {
             state.hasStyleSheetImport = true;
           } else {
@@ -143,6 +168,10 @@ export default function reactNativeTailwindBabelPlugin(
             node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
             state.hasStyleSheetImport = true;
           }
+
+          if (hasPlatform) {
+            state.hasPlatformImport = true;
+          }
         }
 
         // Track tw/twStyle imports from main package (for compile-time transformation)
@@ -291,12 +320,15 @@ export default function reactNativeTailwindBabelPlugin(
 
           state.hasClassNames = true;
 
-          // Check if className contains modifiers (active:, hover:, focus:, placeholder:)
+          // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:)
           const { baseClasses, modifierClasses } = splitModifierClasses(className);
 
-          // Separate placeholder modifiers from state modifiers
+          // Separate modifiers by type
           const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
-          const stateModifiers = modifierClasses.filter((m) => m.modifier !== "placeholder");
+          const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+          const stateModifiers = modifierClasses.filter(
+            (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder",
+          );
 
           // Handle placeholder modifiers first (they generate placeholderTextColor prop, not style)
           if (placeholderModifiers.length > 0) {
@@ -322,8 +354,153 @@ export default function reactNativeTailwindBabelPlugin(
             }
           }
 
-          // If there are state modifiers, check if this component supports them
-          if (stateModifiers.length > 0) {
+          // Handle combination of modifiers
+          const hasPlatformModifiers = platformModifiers.length > 0;
+          const hasStateModifiers = stateModifiers.length > 0;
+          const hasBaseClasses = baseClasses.length > 0;
+
+          // If we have both state and platform modifiers, or platform modifiers with complex state,
+          // we need to combine them in an array expression wrapped in an arrow function
+          if (hasStateModifiers && hasPlatformModifiers) {
+            // Get the JSX opening element for component support checking
+            const jsxOpeningElement = path.parent;
+            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+
+            if (componentSupport) {
+              // Build style array: [baseStyle, Platform.select(...), stateConditionals]
+              const styleArrayElements: BabelTypes.Expression[] = [];
+
+              // Add base classes
+              if (hasBaseClasses) {
+                const baseClassName = baseClasses.join(" ");
+                const baseStyleObject = parseClassName(baseClassName, state.customColors);
+                const baseStyleKey = generateStyleKey(baseClassName);
+                state.styleRegistry.set(baseStyleKey, baseStyleObject);
+                styleArrayElements.push(
+                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+                );
+              }
+
+              // Add platform modifiers as Platform.select()
+              const platformSelectExpression = processPlatformModifiers(
+                platformModifiers,
+                state,
+                parseClassName,
+                generateStyleKey,
+                t,
+              );
+              styleArrayElements.push(platformSelectExpression);
+
+              // Add state modifiers as conditionals
+              // Group by modifier type
+              const modifiersByType = new Map<StateModifierType, ParsedModifier[]>();
+              for (const mod of stateModifiers) {
+                const modType = mod.modifier as StateModifierType;
+                if (!modifiersByType.has(modType)) {
+                  modifiersByType.set(modType, []);
+                }
+                modifiersByType.get(modType)?.push(mod);
+              }
+
+              // Build conditionals for each state modifier type
+              for (const [modifierType, modifiers] of modifiersByType) {
+                if (!componentSupport.supportedModifiers.includes(modifierType)) {
+                  continue; // Skip unsupported modifiers
+                }
+
+                const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+                const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+                const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+                state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+
+                const stateProperty = getStatePropertyForModifier(modifierType);
+                const conditionalExpression = t.logicalExpression(
+                  "&&",
+                  t.identifier(stateProperty),
+                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey)),
+                );
+
+                styleArrayElements.push(conditionalExpression);
+              }
+
+              // Wrap in arrow function for state support
+              const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier))).filter((mod) =>
+                componentSupport.supportedModifiers.includes(mod),
+              );
+              const styleArrayExpression = t.arrayExpression(styleArrayElements);
+              const styleFunctionExpression = createStyleFunction(styleArrayExpression, usedModifiers, t);
+
+              const styleAttribute = findStyleAttribute(path, targetStyleProp, t);
+              if (styleAttribute) {
+                mergeStyleFunctionAttribute(path, styleAttribute, styleFunctionExpression, t);
+              } else {
+                replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
+              }
+              return;
+            } else {
+              // Component doesn't support state modifiers, but we can still use platform modifiers
+              // Fall through to platform-only handling
+            }
+          }
+
+          // Handle platform-only modifiers (no state modifiers)
+          if (hasPlatformModifiers && !hasStateModifiers) {
+            // Build style array/expression: [baseStyle, Platform.select(...)]
+            const styleExpressions: BabelTypes.Expression[] = [];
+
+            // Add base classes
+            if (hasBaseClasses) {
+              const baseClassName = baseClasses.join(" ");
+              const baseStyleObject = parseClassName(baseClassName, state.customColors);
+              const baseStyleKey = generateStyleKey(baseClassName);
+              state.styleRegistry.set(baseStyleKey, baseStyleObject);
+              styleExpressions.push(
+                t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+              );
+            }
+
+            // Add platform modifiers as Platform.select()
+            const platformSelectExpression = processPlatformModifiers(
+              platformModifiers,
+              state,
+              parseClassName,
+              generateStyleKey,
+              t,
+            );
+            styleExpressions.push(platformSelectExpression);
+
+            // Generate style attribute
+            const styleExpression =
+              styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
+
+            const styleAttribute = findStyleAttribute(path, targetStyleProp, t);
+            if (styleAttribute) {
+              // Merge with existing style attribute
+              const existingStyle = styleAttribute.value;
+              if (
+                t.isJSXExpressionContainer(existingStyle) &&
+                !t.isJSXEmptyExpression(existingStyle.expression)
+              ) {
+                const existing = existingStyle.expression;
+                // Merge as array: [ourStyles, existingStyles]
+                const mergedArray = t.isArrayExpression(existing)
+                  ? t.arrayExpression([styleExpression, ...existing.elements])
+                  : t.arrayExpression([styleExpression, existing]);
+                styleAttribute.value = t.jsxExpressionContainer(mergedArray);
+              } else {
+                styleAttribute.value = t.jsxExpressionContainer(styleExpression);
+              }
+              path.remove();
+            } else {
+              // Replace className with style prop containing our expression
+              path.node.name = t.jsxIdentifier(targetStyleProp);
+              path.node.value = t.jsxExpressionContainer(styleExpression);
+            }
+            return;
+          }
+
+          // If there are state modifiers (and no platform modifiers), check if this component supports them
+          if (hasStateModifiers) {
             // Get the JSX opening element (the direct parent of the attribute)
             const jsxOpeningElement = path.parent;
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);