@mgcrea/react-native-tailwind 0.8.1 → 0.9.1

package/dist/babel/plugin.test.ts

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

package/dist/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[];
@@ -66,6 +76,8 @@ type PluginState = PluginPass & {
   // Track tw/twStyle imports from main package
   twImportNames: Set<string>; // e.g., ['tw', 'twStyle'] or ['tw as customTw']
   hasTwImport: boolean;
+  // Track react-native import path for conditional StyleSheet/Platform injection
+  reactNativeImportPath?: NodePath<BabelTypes.ImportDeclaration>;
 };
 
 // Default identifier for the generated StyleSheet constant
@@ -90,6 +102,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 +130,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,13 +156,25 @@ 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;
+          });
+
+          // Only track if imports exist - don't mutate yet
+          // Actual import injection happens in Program.exit only if needed
           if (hasStyleSheet) {
             state.hasStyleSheetImport = true;
-          } else {
-            // Add StyleSheet to existing import
-            node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
-            state.hasStyleSheetImport = true;
           }
+
+          if (hasPlatform) {
+            state.hasPlatformImport = true;
+          }
+
+          // Store reference to the react-native import for later modification if needed
+          state.reactNativeImportPath = path;
         }
 
         // Track tw/twStyle imports from main package (for compile-time transformation)
@@ -291,12 +323,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 +357,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);

package/dist/babel/utils/platformModifierProcessing.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Utility functions for processing platform modifiers (ios:, android:, web:)
+ */
+import type * as BabelTypes from "@babel/types";
+import type { ParsedModifier } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+/**
+ * Plugin state interface (subset needed for platform modifier processing)
+ */
+export interface PlatformModifierProcessingState {
+    styleRegistry: Map<string, StyleObject>;
+    customColors: Record<string, string>;
+    stylesIdentifier: string;
+    needsPlatformImport: boolean;
+}
+/**
+ * Process platform modifiers and generate Platform.select() expression
+ *
+ * @param platformModifiers - Array of parsed platform modifiers
+ * @param state - Plugin state
+ * @param parseClassName - Function to parse class names into style objects
+ * @param generateStyleKey - Function to generate unique style keys
+ * @param t - Babel types
+ * @returns AST node for Platform.select() call
+ *
+ * @example
+ * Input: [{ modifier: "ios", baseClass: "shadow-lg" }, { modifier: "android", baseClass: "elevation-4" }]
+ * Output: Platform.select({ ios: styles._ios_shadow_lg, android: styles._android_elevation_4 })
+ */
+export declare function processPlatformModifiers(platformModifiers: ParsedModifier[], state: PlatformModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression;