@mgcrea/react-native-tailwind 0.8.1 → 0.9.0

package/README.md

@@ -45,6 +45,7 @@ Compile-time Tailwind CSS for React Native with zero runtime overhead. Transform
 - 🔀 **Dynamic className** — Conditional styles with hybrid compile-time optimization
 - 🏃 **Runtime option** — Optional `tw` template tag for fully dynamic styling (~25KB)
 - 🎯 **State modifiers** — `active:`, `hover:`, `focus:`, and `disabled:` modifiers for interactive components
+- 📱 **Platform modifiers** — `ios:`, `android:`, and `web:` modifiers for platform-specific styling
 - 📜 **Special style props** — Support for `contentContainerClassName`, `columnWrapperClassName`, and more
 - 🎛️ **Custom attributes** — Configure which props to transform with exact matching or glob patterns
 
@@ -709,6 +710,157 @@ The enhanced `TextInput` also provides a convenient `disabled` prop that overrid
 - ✅ **Type-safe** — Full TypeScript autocomplete for all modifiers
 - ✅ **Works with custom colors** — `focus:border-primary`, `active:bg-secondary`, `disabled:bg-gray-200`, etc.
 
+### Platform Modifiers
+
+Apply platform-specific styles using `ios:`, `android:`, and `web:` modifiers. These work on **all components** (not just enhanced ones) and compile to `Platform.select()` calls with zero runtime parsing overhead.
+
+**Basic Example:**
+
+```tsx
+import { View, Text } from "react-native";
+
+export function PlatformCard() {
+  return (
+    <View className="p-4 ios:p-6 android:p-8 bg-white rounded-lg">
+      <Text className="text-base ios:text-blue-600 android:text-green-600">
+        Platform-specific styles
+      </Text>
+    </View>
+  );
+}
+```
+
+**Transforms to:**
+
+```tsx
+import { Platform, StyleSheet } from "react-native";
+
+<View
+  style={[
+    _twStyles._bg_white_p_4_rounded_lg,
+    Platform.select({
+      ios: _twStyles._ios_p_6,
+      android: _twStyles._android_p_8,
+    }),
+  ]}
+>
+  <Text
+    style={[
+      _twStyles._text_base,
+      Platform.select({
+        ios: _twStyles._ios_text_blue_600,
+        android: _twStyles._android_text_green_600,
+      }),
+    ]}
+  >
+    Platform-specific styles
+  </Text>
+</View>;
+
+// Generated styles:
+const _twStyles = StyleSheet.create({
+  _bg_white_p_4_rounded_lg: {
+    backgroundColor: "#FFFFFF",
+    padding: 16,
+    borderRadius: 8,
+  },
+  _ios_p_6: { padding: 24 },
+  _android_p_8: { padding: 32 },
+  _text_base: { fontSize: 16 },
+  _ios_text_blue_600: { color: "#2563EB" },
+  _android_text_green_600: { color: "#059669" },
+});
+```
+
+**Common Use Cases:**
+
+**Platform-specific colors:**
+
+```tsx
+// Different colors per platform for brand consistency
+<View className="bg-blue-500 ios:bg-blue-600 android:bg-green-600">
+  <Text className="text-white">Platform-specific background</Text>
+</View>
+```
+
+**Platform-specific spacing:**
+
+```tsx
+// More padding on Android due to larger default touch targets
+<View className="p-4 ios:p-6 android:p-8">
+  <Text>Platform-specific padding</Text>
+</View>
+```
+
+**Combined with base styles:**
+
+```tsx
+// Base styles + platform-specific overrides
+<View className="border-2 border-gray-300 ios:border-blue-500 android:border-green-500 rounded-lg p-4">
+  <Text className="text-gray-800 ios:text-blue-800 android:text-green-800">
+    Base styles with platform overrides
+  </Text>
+</View>
+```
+
+**Multiple platform modifiers:**
+
+```tsx
+// Combine multiple platform-specific styles
+<View className="bg-gray-100 ios:bg-blue-50 android:bg-green-50 p-4 ios:p-6 android:p-8 rounded-lg">
+  <Text>Multiple platform styles</Text>
+</View>
+```
+
+**Web platform support:**
+
+```tsx
+// Different styles for React Native Web
+<View className="p-4 ios:p-6 android:p-8 web:p-2">
+  <Text className="text-base web:text-lg">Cross-platform styling</Text>
+</View>
+```
+
+**Mixing with state modifiers:**
+
+```tsx
+import { Pressable } from "@mgcrea/react-native-tailwind";
+
+// Platform modifiers work alongside state modifiers
+<Pressable className="bg-blue-500 active:bg-blue-700 ios:border-2 android:border-0 p-4 rounded-lg">
+  <Text className="text-white">Button with platform + state modifiers</Text>
+</Pressable>;
+```
+
+**Key Features:**
+
+- ✅ **Works on all components** — No need for enhanced components (unlike state modifiers)
+- ✅ **Zero runtime overhead** — All parsing happens at compile-time
+- ✅ **Native Platform API** — Uses React Native's `Platform.select()` under the hood
+- ✅ **Type-safe** — Full TypeScript autocomplete for platform modifiers
+- ✅ **Optimized** — Styles deduplicated via `StyleSheet.create`
+- ✅ **Works with custom colors** — `ios:bg-primary`, `android:bg-secondary`, etc.
+- ✅ **Minimal runtime cost** — Only one `Platform.select()` call per element with platform modifiers
+
+**Supported Platforms:**
+
+| Modifier | Platform       | Description                   |
+| -------- | -------------- | ----------------------------- |
+| `ios:`   | iOS            | Styles specific to iOS        |
+| `android:` | Android      | Styles specific to Android    |
+| `web:`   | React Native Web | Styles for web platform     |
+
+**How it works:**
+
+The Babel plugin:
+1. Detects platform modifiers during compilation
+2. Parses all platform-specific classes at compile-time
+3. Generates `Platform.select()` expressions with references to pre-compiled styles
+4. Auto-imports `Platform` from `react-native` when needed
+5. Merges platform styles with base classes and other modifiers in style arrays
+
+This approach provides the best of both worlds: compile-time optimization for all styles, with minimal runtime platform detection only for the conditional selection logic.
+
 ### ScrollView Content Container
 
 Use `contentContainerClassName` to style the ScrollView's content container:

package/dist/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/dist/babel/index.cjs

@@ -1730,13 +1730,15 @@ function parsePlaceholderClasses(classes, customColors) {
 }
 
 // src/parser/modifiers.ts
-var SUPPORTED_MODIFIERS = [
+var STATE_MODIFIERS = [
   "active",
   "hover",
   "focus",
   "disabled",
   "placeholder"
 ];
+var PLATFORM_MODIFIERS = ["ios", "android", "web"];
+var SUPPORTED_MODIFIERS = [...STATE_MODIFIERS, ...PLATFORM_MODIFIERS];
 function parseModifier(cls) {
   const colonIndex = cls.indexOf(":");
   if (colonIndex === -1) {
@@ -1758,6 +1760,12 @@ function parseModifier(cls) {
     baseClass
   };
 }
+function isStateModifier(modifier) {
+  return STATE_MODIFIERS.includes(modifier);
+}
+function isPlatformModifier(modifier) {
+  return PLATFORM_MODIFIERS.includes(modifier);
+}
 function splitModifierClasses(className) {
   const classes = className.trim().split(/\s+/).filter(Boolean);
   const baseClasses = [];
@@ -2118,6 +2126,34 @@ function createStyleFunction(styleExpression, modifierTypes, t) {
   return t.arrowFunctionExpression([param], styleExpression);
 }
 
+// src/babel/utils/platformModifierProcessing.ts
+function processPlatformModifiers(platformModifiers, state, parseClassName2, generateStyleKey2, t) {
+  state.needsPlatformImport = true;
+  const modifiersByPlatform = /* @__PURE__ */ new Map();
+  for (const mod of platformModifiers) {
+    const platform = mod.modifier;
+    if (!modifiersByPlatform.has(platform)) {
+      modifiersByPlatform.set(platform, []);
+    }
+    const platformGroup = modifiersByPlatform.get(platform);
+    if (platformGroup) {
+      platformGroup.push(mod);
+    }
+  }
+  const selectProperties = [];
+  for (const [platform, modifiers] of modifiersByPlatform) {
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName2(classNames, state.customColors);
+    const styleKey = generateStyleKey2(`${platform}_${classNames}`);
+    state.styleRegistry.set(styleKey, styleObject);
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    selectProperties.push(t.objectProperty(t.identifier(platform), styleReference));
+  }
+  return t.callExpression(t.memberExpression(t.identifier("Platform"), t.identifier("select")), [
+    t.objectExpression(selectProperties)
+  ]);
+}
+
 // src/babel/utils/styleInjection.ts
 function addStyleSheetImport(path2, t) {
   const importDeclaration = t.importDeclaration(
@@ -2126,6 +2162,25 @@ function addStyleSheetImport(path2, t) {
   );
   path2.unshiftContainer("body", importDeclaration);
 }
+function addPlatformImport(path2, t) {
+  const body = path2.node.body;
+  let reactNativeImport = null;
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
+  if (reactNativeImport) {
+    reactNativeImport.specifiers.push(t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")));
+  } else {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))],
+      t.stringLiteral("react-native")
+    );
+    path2.unshiftContainer("body", importDeclaration);
+  }
+}
 function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
   const styleProperties = [];
   for (const [key, styleObject] of styleRegistry) {
@@ -2355,6 +2410,8 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           state.styleRegistry = /* @__PURE__ */ new Map();
           state.hasClassNames = false;
           state.hasStyleSheetImport = false;
+          state.hasPlatformImport = false;
+          state.needsPlatformImport = false;
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
@@ -2372,10 +2429,13 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           if (!state.hasStyleSheetImport) {
             addStyleSheetImport(path2, t);
           }
+          if (state.needsPlatformImport && !state.hasPlatformImport) {
+            addPlatformImport(path2, t);
+          }
           injectStylesAtTop(path2, 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(path2, state) {
         const node = path2.node;
         if (node.source.value === "react-native") {
@@ -2386,12 +2446,21 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             }
             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 {
             node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
             state.hasStyleSheetImport = true;
           }
+          if (hasPlatform) {
+            state.hasPlatformImport = true;
+          }
         }
         if (node.source.value === "@mgcrea/react-native-tailwind") {
           const specifiers = node.specifiers;
@@ -2494,7 +2563,10 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           state.hasClassNames = true;
           const { baseClasses, modifierClasses } = splitModifierClasses(className);
           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"
+          );
           if (placeholderModifiers.length > 0) {
             const jsxOpeningElement = path2.parent;
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
@@ -2512,7 +2584,108 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               }
             }
           }
-          if (stateModifiers.length > 0) {
+          const hasPlatformModifiers = platformModifiers.length > 0;
+          const hasStateModifiers = stateModifiers.length > 0;
+          const hasBaseClasses = baseClasses.length > 0;
+          if (hasStateModifiers && hasPlatformModifiers) {
+            const jsxOpeningElement = path2.parent;
+            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+            if (componentSupport) {
+              const styleArrayElements = [];
+              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))
+                );
+              }
+              const platformSelectExpression = processPlatformModifiers(
+                platformModifiers,
+                state,
+                parseClassName,
+                generateStyleKey,
+                t
+              );
+              styleArrayElements.push(platformSelectExpression);
+              const modifiersByType = /* @__PURE__ */ new Map();
+              for (const mod of stateModifiers) {
+                const modType = mod.modifier;
+                if (!modifiersByType.has(modType)) {
+                  modifiersByType.set(modType, []);
+                }
+                modifiersByType.get(modType)?.push(mod);
+              }
+              for (const [modifierType, modifiers] of modifiersByType) {
+                if (!componentSupport.supportedModifiers.includes(modifierType)) {
+                  continue;
+                }
+                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);
+              }
+              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 styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+              if (styleAttribute2) {
+                mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+              } else {
+                replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+              }
+              return;
+            } else {
+            }
+          }
+          if (hasPlatformModifiers && !hasStateModifiers) {
+            const styleExpressions = [];
+            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))
+              );
+            }
+            const platformSelectExpression = processPlatformModifiers(
+              platformModifiers,
+              state,
+              parseClassName,
+              generateStyleKey,
+              t
+            );
+            styleExpressions.push(platformSelectExpression);
+            const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
+            const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+            if (styleAttribute2) {
+              const existingStyle = styleAttribute2.value;
+              if (t.isJSXExpressionContainer(existingStyle) && !t.isJSXEmptyExpression(existingStyle.expression)) {
+                const existing = existingStyle.expression;
+                const mergedArray = t.isArrayExpression(existing) ? t.arrayExpression([styleExpression, ...existing.elements]) : t.arrayExpression([styleExpression, existing]);
+                styleAttribute2.value = t.jsxExpressionContainer(mergedArray);
+              } else {
+                styleAttribute2.value = t.jsxExpressionContainer(styleExpression);
+              }
+              path2.remove();
+            } else {
+              path2.node.name = t.jsxIdentifier(targetStyleProp);
+              path2.node.value = t.jsxExpressionContainer(styleExpression);
+            }
+            return;
+          }
+          if (hasStateModifiers) {
             const jsxOpeningElement = path2.parent;
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
             if (componentSupport) {

package/dist/babel/plugin.d.ts

@@ -29,6 +29,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[];

package/dist/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:/);
+  });
+});