@mgcrea/react-native-tailwind 0.7.0 → 0.8.0

package/dist/babel/utils/styleTransforms.test.ts

@@ -0,0 +1,349 @@
+import { transformSync } from "@babel/core";
+import { describe, expect, it } from "vitest";
+import babelPlugin from "../plugin.js";
+
+/**
+ * Helper to transform code with the Babel plugin
+ */
+function transform(code: string) {
+  const result = transformSync(code, {
+    presets: ["@babel/preset-react"],
+    plugins: [babelPlugin],
+    filename: "test.tsx",
+    configFile: false,
+    babelrc: false,
+  });
+
+  return result?.code ?? "";
+}
+
+describe("Style merging - mergeStyleAttribute", () => {
+  it("should merge className with identifier style prop (object variable)", () => {
+    const input = `
+      import { TouchableOpacity } from 'react-native';
+      export function Component() {
+        const style = { marginHorizontal: 24 };
+        return (
+          <TouchableOpacity
+            className="m-4"
+            style={style}
+            activeOpacity={0.8}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_m_4");
+
+    // Should create a simple array merge, NOT a function wrapper
+    expect(output).toContain("[_twStyles._m_4, style]");
+
+    // Should NOT have typeof check or _state parameter
+    expect(output).not.toContain("typeof");
+    expect(output).not.toContain("_state");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge className with member expression style prop", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component(props) {
+        return (
+          <View
+            className="p-2 bg-blue-500"
+            style={props.style}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_bg_blue_500_p_2");
+
+    // Should create a simple array merge, NOT a function wrapper
+    expect(output).toContain("[_twStyles._bg_blue_500_p_2, props.style]");
+
+    // Should NOT have typeof check or _state parameter
+    expect(output).not.toContain("typeof");
+    expect(output).not.toContain("_state");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge className with array style prop", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return (
+          <View
+            className="m-4"
+            style={[baseStyle, conditionalStyle]}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_m_4");
+
+    // Should create array merge without function wrapper
+    expect(output).toContain("_twStyles._m_4");
+
+    // Should NOT have typeof check or _state parameter
+    expect(output).not.toContain("typeof");
+    expect(output).not.toContain("_state");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge className with inline object style prop", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return (
+          <View
+            className="m-4 p-2"
+            style={{ backgroundColor: 'red' }}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_m_4_p_2");
+
+    // Should create array merge
+    expect(output).toContain("_twStyles._m_4_p_2");
+    expect(output).toContain("backgroundColor:");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge className with inline function style prop", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return (
+          <TextInput
+            className="border border-gray-300"
+            style={({ focused, disabled }) => [
+              baseStyles,
+              focused && focusedStyles,
+            ]}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_border_border_gray_300");
+
+    // Should create a wrapper function that merges both
+    expect(output).toContain("_state");
+    expect(output).toContain("_twStyles._border_border_gray_300");
+
+    // Should have a function that accepts state and returns an array
+    expect(output).toMatch(/_state\s*=>/);
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+});
+
+describe("Style merging - mergeDynamicStyleAttribute", () => {
+  it("should merge dynamic className with identifier style prop", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component({ isActive }) {
+        const customStyle = { opacity: 0.8 };
+        return (
+          <View
+            className={\`p-2 \${isActive ? 'bg-blue-500' : 'bg-gray-300'}\`}
+            style={customStyle}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with both className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_p_2");
+    expect(output).toContain("_bg_blue_500");
+    expect(output).toContain("_bg_gray_300");
+
+    // Should create array merge without function wrapper
+    expect(output).toContain("customStyle");
+
+    // Should NOT have typeof check or _state parameter for the style merge
+    expect(output).not.toContain("typeof");
+    expect(output).not.toContain("_state");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge dynamic className with inline function style prop", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component({ isError }) {
+        return (
+          <TextInput
+            className={\`border \${isError ? 'border-red-500' : 'border-gray-300'}\`}
+            style={({ focused }) => [
+              baseStyles,
+              focused && focusedStyles,
+            ]}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with both className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_border");
+    expect(output).toContain("_border_red_500");
+    expect(output).toContain("_border_gray_300");
+
+    // Should create a wrapper function that merges dynamic styles with function result
+    expect(output).toContain("_state");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge dynamic className with member expression style prop", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component({ variant, ...props }) {
+        return (
+          <View
+            className={\`m-2 \${variant === 'primary' ? 'bg-blue-500' : 'bg-gray-300'}\`}
+            style={props.style}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with both className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_m_2");
+    expect(output).toContain("_bg_blue_500");
+    expect(output).toContain("_bg_gray_300");
+
+    // Should create array merge without function wrapper
+    expect(output).toContain("props.style");
+
+    // Should NOT have typeof check or _state parameter for the style merge
+    expect(output).not.toContain("typeof");
+    expect(output).not.toContain("_state");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+});
+
+describe("Style merging - edge cases", () => {
+  it("should handle className without existing style prop", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="m-4 p-2" />;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_m_4_p_2");
+
+    // Should have style prop with reference to stylesheet
+    expect(output).toContain("style: _twStyles._m_4_p_2");
+
+    // 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="" style={myStyle} />;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should not create StyleSheet
+    expect(output).not.toContain("StyleSheet.create");
+
+    // Should preserve original style prop
+    expect(output).toContain("style: myStyle");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should handle multiple components with different merge scenarios", () => {
+    const input = `
+      import { View, TouchableOpacity } from 'react-native';
+      export function Component() {
+        const style1 = { opacity: 0.5 };
+        return (
+          <>
+            <View className="m-4" style={style1} />
+            <TouchableOpacity className="p-2" />
+            <View className="bg-red-500" style={[baseStyle]} />
+          </>
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have StyleSheet with all className styles
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_m_4");
+    expect(output).toContain("_p_2");
+    expect(output).toContain("_bg_red_500");
+
+    // Should handle identifier merge
+    expect(output).toContain("[_twStyles._m_4, style1]");
+
+    // Should handle no merge
+    expect(output).toContain("_twStyles._p_2");
+
+    // Should handle array merge
+    expect(output).toContain("_twStyles._bg_red_500");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+});

package/dist/babel/utils/styleTransforms.ts

@@ -0,0 +1,258 @@
+/**
+ * Utility functions for transforming and merging style attributes
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import type { DynamicExpressionResult } from "./dynamicProcessing.js";
+
+/**
+ * Helper to extract expression from JSX attribute value
+ * Returns null if not a valid expression container or if empty
+ */
+function getStyleExpression(
+  styleAttribute: BabelTypes.JSXAttribute,
+  t: typeof BabelTypes,
+): BabelTypes.Expression | null {
+  const value = styleAttribute.value;
+  if (!t.isJSXExpressionContainer(value)) return null;
+  const expression = value.expression;
+  if (t.isJSXEmptyExpression(expression)) return null;
+  return expression;
+}
+
+/**
+ * Helper to find existing style attribute on parent JSX element
+ */
+export function findStyleAttribute(
+  path: NodePath,
+  targetStyleProp: string,
+  t: typeof BabelTypes,
+): BabelTypes.JSXAttribute | undefined {
+  const parent = path.parent as BabelTypes.JSXOpeningElement;
+  return parent.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === targetStyleProp,
+  ) as BabelTypes.JSXAttribute | undefined;
+}
+
+/**
+ * Replace className with style attribute
+ */
+export function replaceWithStyleAttribute(
+  classNamePath: NodePath,
+  styleKey: string,
+  targetStyleProp: string,
+  stylesIdentifier: string,
+  t: typeof BabelTypes,
+): void {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey))),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge className styles with existing style prop
+ */
+export function mergeStyleAttribute(
+  classNamePath: NodePath,
+  styleAttribute: BabelTypes.JSXAttribute,
+  styleKey: string,
+  stylesIdentifier: string,
+  t: typeof BabelTypes,
+): void {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+
+  // Check if existing style is definitely a function expression (inline)
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    // Existing style is a function - create wrapper that calls it and merges results
+    // (_state) => [styles._key, existingStyleFn(_state)]
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+
+    const mergedArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
+      functionCall,
+    ]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    // For identifiers, member expressions, and other static values:
+    // Always use simple array merge - don't generate function wrappers
+    // React Native components (except Pressable) don't accept style functions,
+    // and even for Pressable, if the user passes a variable, we should trust
+    // their type and merge it as-is rather than wrapping in a runtime check.
+    //
+    // This fixes the issue where `style={myStyle}` would be incorrectly wrapped
+    // in a function when used with className.
+    const styleArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
+      existingStyle,
+    ]);
+
+    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  }
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
+/**
+ * Replace className with dynamic style attribute
+ */
+export function replaceDynamicWithStyleAttribute(
+  classNamePath: NodePath,
+  result: DynamicExpressionResult,
+  targetStyleProp: string,
+  t: typeof BabelTypes,
+): void {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(result.expression),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge dynamic className styles with existing style prop
+ */
+export function mergeDynamicStyleAttribute(
+  classNamePath: NodePath,
+  styleAttribute: BabelTypes.JSXAttribute,
+  result: DynamicExpressionResult,
+  t: typeof BabelTypes,
+): void {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+
+  // Check if existing style is definitely a function expression (inline)
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    // Existing style is a function - create wrapper that calls it and merges results
+    // (_state) => [dynamicStyles, existingStyleFn(_state)]
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+
+    const mergedArray = t.arrayExpression([result.expression, functionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    // For identifiers, member expressions, and other values:
+    // Always use simple array merge - don't generate function wrappers
+    // This matches the behavior of mergeStyleAttribute for consistency
+    let styleArray;
+    if (t.isArrayExpression(existingStyle)) {
+      // Prepend dynamic styles to existing array
+      styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
+    } else {
+      // Create new array with dynamic styles first, then existing
+      styleArray = t.arrayExpression([result.expression, existingStyle]);
+    }
+
+    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  }
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
+/**
+ * Replace className with style function attribute (for Pressable with modifiers)
+ */
+export function replaceWithStyleFunctionAttribute(
+  classNamePath: NodePath,
+  styleFunctionExpression: BabelTypes.Expression,
+  targetStyleProp: string,
+  t: typeof BabelTypes,
+): void {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(styleFunctionExpression),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge className style function with existing style prop (for Pressable with modifiers)
+ */
+export function mergeStyleFunctionAttribute(
+  classNamePath: NodePath,
+  styleAttribute: BabelTypes.JSXAttribute,
+  styleFunctionExpression: BabelTypes.Expression,
+  t: typeof BabelTypes,
+): void {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+
+  // Create a wrapper function that merges both styles
+  // ({ pressed }) => [styleFunctionResult, existingStyle]
+  // We need to call the style function and merge results
+
+  // If existing is already a function, we need to handle it specially
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    // Both are functions - create wrapper that calls both
+    // (_state) => [newStyleFn(_state), existingStyleFn(_state)]
+    // Create an identifier for the parameter to pass to the function calls
+    const paramIdentifier = t.identifier("_state");
+
+    const newFunctionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const existingFunctionCall = t.callExpression(existingStyle, [paramIdentifier]);
+
+    const mergedArray = t.arrayExpression([newFunctionCall, existingFunctionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    // Existing is static - create function that returns array
+    // (_state) => [styleFunctionResult, existingStyle]
+    // Create an identifier for the parameter to pass to the function call
+    const paramIdentifier = t.identifier("_state");
+
+    const functionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([functionCall, existingStyle]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  }
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
+/**
+ * Add or merge placeholderTextColor prop on a JSX element
+ * Handles merging with existing placeholderTextColor if present
+ */
+export function addOrMergePlaceholderTextColorProp(
+  jsxOpeningElement: BabelTypes.JSXOpeningElement,
+  color: string,
+  t: typeof BabelTypes,
+): void {
+  // Check if element already has placeholderTextColor prop
+  const existingProp = jsxOpeningElement.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && attr.name.name === "placeholderTextColor",
+  );
+
+  if (existingProp) {
+    // If explicit prop exists, don't override it (explicit props take precedence)
+    // This matches the behavior of style prop precedence
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. ` +
+          `Remove the explicit prop or the placeholder: modifier to avoid confusion.`,
+      );
+    }
+    // Override the existing prop value
+    (existingProp as BabelTypes.JSXAttribute).value = t.stringLiteral(color);
+  } else {
+    // Add new placeholderTextColor prop
+    const newProp = t.jsxAttribute(t.jsxIdentifier("placeholderTextColor"), t.stringLiteral(color));
+    jsxOpeningElement.attributes.push(newProp);
+  }
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Utility functions for processing tw`...` and twStyle() calls
+ */
+import type { NodePath } from "@babel/core";
+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 tw processing)
+ */
+export interface TwProcessingState {
+    styleRegistry: Map<string, StyleObject>;
+    customColors: Record<string, string>;
+    stylesIdentifier: string;
+}
+/**
+ * Process tw`...` or twStyle('...') call and replace with TwStyle object
+ * Generates: { style: styles._base, activeStyle: styles._active, ... }
+ */
+export declare function processTwCall(className: string, path: NodePath, state: TwProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: (className: string) => {
+    baseClasses: string[];
+    modifierClasses: ParsedModifier[];
+}, t: typeof BabelTypes): void;
+/**
+ * Remove tw/twStyle imports from @mgcrea/react-native-tailwind
+ * This is called after all tw calls have been transformed
+ */
+export declare function removeTwImports(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void;