@mgcrea/react-native-tailwind 0.12.1 → 0.14.0

package/dist/babel/plugin/visitors/program.test.ts

@@ -0,0 +1,325 @@
+import { describe, expect, it } from "vitest";
+import { transform } from "../../../../test/helpers/babelTransform.js";
+
+describe("program visitor - Program.exit behavior", () => {
+  describe("StyleSheet injection", () => {
+    it("should inject StyleSheet.create when className is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="m-4 p-2 bg-blue-500" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should have StyleSheet import
+      expect(output).toContain("StyleSheet");
+
+      // Should inject StyleSheet.create
+      expect(output).toContain("StyleSheet.create");
+      expect(output).toContain("_twStyles");
+
+      // Should have the styles
+      expect(output).toMatch(/margin:\s*16/);
+      expect(output).toMatch(/padding:\s*8/);
+      expect(output).toMatch(/backgroundColor:/);
+    });
+
+    it("should not inject StyleSheet when no className is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should not add StyleSheet import
+      expect(output).not.toContain("StyleSheet");
+      expect(output).not.toContain("_twStyles");
+    });
+
+    it("should inject styles at top of file after imports", () => {
+      const input = `
+        import React from 'react';
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="m-4" />;
+        }
+
+        function AnotherComponent() {
+          return <View className="p-2" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // StyleSheet.create should come before component definitions
+      const styleSheetIndex = output.indexOf("StyleSheet.create");
+      const firstComponentIndex = output.indexOf("function MyComponent");
+
+      expect(styleSheetIndex).toBeGreaterThan(0);
+      expect(styleSheetIndex).toBeLessThan(firstComponentIndex);
+    });
+  });
+
+  describe("tw import removal", () => {
+    it("should remove tw import when tw tagged template is used", () => {
+      const input = `
+        import { tw } from '@mgcrea/react-native-tailwind';
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          const styles = tw\`m-4 p-2\`;
+          return <View style={styles.style} />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should not have tw import anymore
+      expect(output).not.toMatch(/import.*tw.*from ['"]@mgcrea\/react-native-tailwind['"]/);
+
+      // Should have StyleSheet instead
+      expect(output).toContain("StyleSheet");
+    });
+
+    it("should remove twStyle import when twStyle call is used", () => {
+      const input = `
+        import { twStyle } from '@mgcrea/react-native-tailwind';
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          const styles = twStyle('m-4 p-2');
+          return <View style={styles.style} />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should not have twStyle import anymore
+      expect(output).not.toMatch(/import.*twStyle.*from ['"]@mgcrea\/react-native-tailwind['"]/);
+
+      // Should have StyleSheet instead
+      expect(output).toContain("StyleSheet");
+    });
+  });
+
+  describe("hook injection - color scheme", () => {
+    it("should inject useColorScheme hook when dark: modifier is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="bg-white dark:bg-gray-900" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import useColorScheme
+      expect(output).toContain("useColorScheme");
+
+      // Should inject hook call
+      expect(output).toContain("_twColorScheme");
+      expect(output).toContain("useColorScheme()");
+
+      // Should use in conditional
+      expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+    });
+
+    it("should inject useColorScheme hook when light: modifier is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="bg-gray-900 light:bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import and inject hook
+      expect(output).toContain("useColorScheme");
+      expect(output).toContain("_twColorScheme");
+
+      // Should use in conditional
+      expect(output).toMatch(/_twColorScheme\s*===\s*['"]light['"]/);
+    });
+
+    it("should inject hook only once for multiple color scheme modifiers", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return (
+            <>
+              <View className="dark:bg-gray-900" />
+              <View className="light:bg-white" />
+              <View className="dark:text-white" />
+            </>
+          );
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Count hook injections (should be exactly 1)
+      const hookMatches = output.match(/_twColorScheme\s*=\s*useColorScheme\(\)/g) ?? [];
+      expect(hookMatches.length).toBe(1);
+    });
+
+    it("should use custom color scheme hook when configured", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="dark:bg-gray-900" />;
+        }
+      `;
+
+      const output = transform(
+        input,
+        {
+          colorScheme: {
+            importFrom: "@react-navigation/native",
+            importName: "useTheme",
+          },
+        },
+        true,
+      );
+
+      // Should import from custom source
+      expect(output).toContain("@react-navigation/native");
+      expect(output).toContain("useTheme");
+
+      // Should use custom hook
+      expect(output).toContain("useTheme()");
+    });
+  });
+
+  describe("hook injection - window dimensions", () => {
+    it("should inject useWindowDimensions hook when w-screen is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="w-screen bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import useWindowDimensions
+      expect(output).toContain("useWindowDimensions");
+
+      // Should inject hook call
+      expect(output).toContain("_twDimensions");
+      expect(output).toContain("useWindowDimensions()");
+
+      // Should use in inline style
+      expect(output).toMatch(/width:\s*_twDimensions\.width/);
+    });
+
+    it("should inject useWindowDimensions hook when h-screen is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="h-screen bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import and inject hook
+      expect(output).toContain("useWindowDimensions");
+      expect(output).toContain("_twDimensions");
+
+      // Should use in inline style
+      expect(output).toMatch(/height:\s*_twDimensions\.height/);
+    });
+
+    it("should inject hook only once for multiple w-screen/h-screen uses", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return (
+            <>
+              <View className="w-screen" />
+              <View className="h-screen" />
+              <View className="w-screen h-screen" />
+            </>
+          );
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Count hook injections (should be exactly 1)
+      const hookMatches = output.match(/_twDimensions\s*=\s*useWindowDimensions\(\)/g) ?? [];
+      expect(hookMatches.length).toBe(1);
+    });
+  });
+
+  describe("combined scenarios", () => {
+    it("should inject color scheme and platform imports together", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return (
+            <View className="ios:p-4 android:p-2 dark:bg-gray-900 light:bg-white" />
+          );
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should have all imports
+      expect(output).toContain("StyleSheet");
+      expect(output).toContain("Platform");
+      expect(output).toContain("useColorScheme");
+
+      // Should have color scheme hook
+      expect(output).toContain("_twColorScheme");
+      expect(output).toContain("useColorScheme()");
+
+      // Should have platform select
+      expect(output).toContain("Platform.select");
+    });
+
+    it("should inject window dimensions and color scheme hooks in separate components", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function ComponentA() {
+          return <View className="w-screen h-screen" />;
+        }
+
+        function ComponentB() {
+          return <View className="dark:bg-gray-900 light:bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should have both hooks
+      expect(output).toContain("useColorScheme");
+      expect(output).toContain("useWindowDimensions");
+
+      // Should have both hook calls
+      expect(output).toContain("_twColorScheme");
+      expect(output).toContain("_twDimensions");
+
+      // Should have StyleSheet
+      expect(output).toContain("StyleSheet.create");
+    });
+  });
+});

package/dist/babel/plugin/visitors/program.ts

@@ -0,0 +1,116 @@
+/**
+ * Program visitor - entry and exit points for file processing
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import {
+  addColorSchemeImport,
+  addI18nManagerImport,
+  addPlatformImport,
+  addStyleSheetImport,
+  addWindowDimensionsImport,
+  injectColorSchemeHook,
+  injectI18nManagerVariable,
+  injectStylesAtTop,
+  injectWindowDimensionsHook,
+} from "../../utils/styleInjection.js";
+import { removeTwImports } from "../../utils/twProcessing.js";
+import type { PluginState } from "../state.js";
+
+/**
+ * Program enter visitor - initialize state for each file
+ */
+export function programEnter(_path: NodePath<BabelTypes.Program>, _state: PluginState): void {
+  // Note: State initialization is already handled by the createInitialState function
+  // This is called before any other visitors and receives the initialized state
+  // The actual initialization happens in the main plugin.ts file via Object.assign
+}
+
+/**
+ * Program exit visitor - finalize transformations
+ * Injects imports, hooks, and StyleSheet.create
+ */
+export function programExit(
+  path: NodePath<BabelTypes.Program>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  // Remove tw/twStyle imports if they were used (and transformed)
+  if (state.hasTwImport) {
+    removeTwImports(path, t);
+  }
+
+  // If no classNames were found and no hooks/imports needed, skip processing
+  if (
+    !state.hasClassNames &&
+    !state.needsWindowDimensionsImport &&
+    !state.needsColorSchemeImport &&
+    !state.needsI18nManagerImport
+  ) {
+    return;
+  }
+
+  // Add StyleSheet import if not already present (and we have styles to inject)
+  if (!state.hasStyleSheetImport && state.styleRegistry.size > 0) {
+    addStyleSheetImport(path, t);
+  }
+
+  // Add Platform import if platform modifiers were used and not already present
+  if (state.needsPlatformImport && !state.hasPlatformImport) {
+    addPlatformImport(path, t);
+  }
+
+  // Add I18nManager import if directional modifiers were used and not already present
+  if (state.needsI18nManagerImport && !state.hasI18nManagerImport) {
+    addI18nManagerImport(path, t);
+  }
+
+  // Inject I18nManager.isRTL variable at module level (not a hook, so no component scope needed)
+  if (state.needsI18nManagerImport) {
+    injectI18nManagerVariable(path, state.i18nManagerVariableName, state.i18nManagerLocalIdentifier, t);
+  }
+
+  // Add color scheme hook import if color scheme modifiers were used and not already present
+  if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
+    addColorSchemeImport(path, state.colorSchemeImportSource, state.colorSchemeHookName, t);
+  }
+
+  // Inject color scheme hook in function components that need it
+  if (state.needsColorSchemeImport) {
+    for (const functionPath of state.functionComponentsNeedingColorScheme) {
+      injectColorSchemeHook(
+        functionPath,
+        state.colorSchemeVariableName,
+        state.colorSchemeHookName,
+        state.colorSchemeLocalIdentifier,
+        t,
+      );
+    }
+  }
+
+  // Add useWindowDimensions import if w-screen/h-screen classes were used and not already present
+  if (state.needsWindowDimensionsImport && !state.hasWindowDimensionsImport) {
+    addWindowDimensionsImport(path, t);
+  }
+
+  // Inject useWindowDimensions hook in function components that need it
+  if (state.needsWindowDimensionsImport) {
+    for (const functionPath of state.functionComponentsNeedingWindowDimensions) {
+      injectWindowDimensionsHook(
+        functionPath,
+        state.windowDimensionsVariableName,
+        "useWindowDimensions",
+        state.windowDimensionsLocalIdentifier,
+        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
+  // Only inject if we actually have styles to inject
+  if (state.styleRegistry.size > 0) {
+    injectStylesAtTop(path, state.styleRegistry, state.stylesIdentifier, t);
+  }
+}

package/dist/babel/plugin/visitors/tw.d.ts

@@ -0,0 +1,16 @@
+/**
+ * tw and twStyle visitors - handles compile-time tw tagged templates and twStyle calls
+ */
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import type { PluginState } from "../state.js";
+/**
+ * TaggedTemplateExpression visitor
+ * Handles tw`...` tagged template expressions
+ */
+export declare function taggedTemplateVisitor(path: NodePath<BabelTypes.TaggedTemplateExpression>, state: PluginState, t: typeof BabelTypes): void;
+/**
+ * CallExpression visitor
+ * Handles twStyle('...') call expressions
+ */
+export declare function callExpressionVisitor(path: NodePath<BabelTypes.CallExpression>, state: PluginState, t: typeof BabelTypes): void;