@mgcrea/react-native-tailwind 0.11.1 → 0.12.0

package/dist/babel/plugin.test.ts

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

package/dist/babel/plugin.ts

@@ -276,6 +276,10 @@ export default function reactNativeTailwindBabelPlugin(
           state.twImportNames = new Set();
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = new Set();
+          state.hasColorSchemeImport = false;
+          state.colorSchemeLocalIdentifier = undefined;
+          state.needsPlatformImport = false;
+          state.hasPlatformImport = false;
 
           // Load custom theme from tailwind.config.*
           state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
@@ -367,7 +371,8 @@ export default function reactNativeTailwindBabelPlugin(
 
         // Track color scheme hook import from the configured source
         // (default: react-native, but can be custom like @/hooks/useColorScheme)
-        if (node.source.value === state.colorSchemeImportSource) {
+        // Only track value imports (not type-only imports which get erased)
+        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
           const specifiers = node.specifiers;
 
           for (const spec of specifiers) {
@@ -444,7 +449,16 @@ export default function reactNativeTailwindBabelPlugin(
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
       },
 
       // Handle twStyle('...') call expressions
@@ -494,7 +508,16 @@ export default function reactNativeTailwindBabelPlugin(
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
       },
 
       JSXAttribute(path, state) {
@@ -517,20 +540,22 @@ export default function reactNativeTailwindBabelPlugin(
         // Determine target style prop based on attribute name
         const targetStyleProp = getTargetStyleProp(attributeName);
 
-        // Handle static string literals
-        if (t.isStringLiteral(value)) {
-          const className = value.value.trim();
+        /**
+         * Process static className string (handles both direct StringLiteral and StringLiteral in JSXExpressionContainer)
+         */
+        const processStaticClassName = (className: string): boolean => {
+          const trimmedClassName = className.trim();
 
           // Skip empty classNames
-          if (!className) {
+          if (!trimmedClassName) {
             path.remove();
-            return;
+            return true;
           }
 
           state.hasClassNames = true;
 
           // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:, dark:, light:, scheme:)
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
 
           // Expand scheme: modifiers into dark: and light: modifiers
           const modifierClasses: ParsedModifier[] = [];
@@ -697,7 +722,7 @@ export default function reactNativeTailwindBabelPlugin(
               } else {
                 replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
               }
-              return;
+              return true;
             } else {
               // Component doesn't support state modifiers, but we can still use platform modifiers
               // Fall through to platform-only handling
@@ -771,7 +796,7 @@ export default function reactNativeTailwindBabelPlugin(
               path.node.name = t.jsxIdentifier(targetStyleProp);
               path.node.value = t.jsxExpressionContainer(styleExpression);
             }
-            return;
+            return true;
           }
 
           // If there are state modifiers (and no platform modifiers), check if this component supports them
@@ -829,12 +854,12 @@ export default function reactNativeTailwindBabelPlugin(
                   } else {
                     replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                   }
-                  return;
+                  return true;
                 }
               } else {
                 // All modifiers are supported - process normally
                 const styleExpression = processStaticClassNameWithModifiers(
-                  className,
+                  trimmedClassName,
                   state,
                   parseClassName,
                   generateStyleKey,
@@ -851,7 +876,7 @@ export default function reactNativeTailwindBabelPlugin(
                 } else {
                   replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                 }
-                return;
+                return true;
               }
             } else {
               // Component doesn't support any modifiers
@@ -871,7 +896,7 @@ export default function reactNativeTailwindBabelPlugin(
           if (!classNameForStyle) {
             // No base classes, only had placeholder modifiers - just remove className
             path.remove();
-            return;
+            return true;
           }
 
           const styleObject = parseClassName(classNameForStyle, state.customTheme);
@@ -888,7 +913,14 @@ export default function reactNativeTailwindBabelPlugin(
             // Replace className with style prop
             replaceWithStyleAttribute(path, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
-          return;
+          return true;
+        };
+
+        // Handle static string literals
+        if (t.isStringLiteral(value)) {
+          if (processStaticClassName(value.value)) {
+            return;
+          }
         }
 
         // Handle dynamic expressions (JSXExpressionContainer)
@@ -900,6 +932,13 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
+          // Fast path: Support string literals wrapped in JSXExpressionContainer: className={"flex-row"}
+          if (t.isStringLiteral(expression)) {
+            if (processStaticClassName(expression.value)) {
+              return;
+            }
+          }
+
           try {
             // Find component scope for color scheme modifiers
             const componentScope = findComponentScope(path, t);