@mgcrea/react-native-tailwind 0.7.0 → 0.8.0

package/dist/babel/plugin.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Babel plugin for react-native-tailwind
+ * Transforms className props to style props at compile time
+ */
+import type { PluginObj, PluginPass } from "@babel/core";
+import * as BabelTypes from "@babel/types";
+import type { StyleObject } from "../types/core.js";
+/**
+ * Plugin options
+ */
+export type PluginOptions = {
+    /**
+     * List of JSX attribute names to transform (in addition to or instead of 'className')
+     * Supports exact matches and glob patterns:
+     * - Exact: 'className', 'containerClassName'
+     * - Glob: '*ClassName' (matches any attribute ending in 'ClassName')
+     *
+     * @default ['className', 'contentContainerClassName', 'columnWrapperClassName', 'ListHeaderComponentClassName', 'ListFooterComponentClassName']
+     */
+    attributes?: string[];
+    /**
+     * Custom identifier name for the generated StyleSheet constant
+     *
+     * @default '_twStyles'
+     */
+    stylesIdentifier?: string;
+};
+type PluginState = PluginPass & {
+    styleRegistry: Map<string, StyleObject>;
+    hasClassNames: boolean;
+    hasStyleSheetImport: boolean;
+    customColors: Record<string, string>;
+    supportedAttributes: Set<string>;
+    attributePatterns: RegExp[];
+    stylesIdentifier: string;
+    twImportNames: Set<string>;
+    hasTwImport: boolean;
+};
+export default function reactNativeTailwindBabelPlugin({ types: t }: {
+    types: typeof BabelTypes;
+}, options?: PluginOptions): PluginObj<PluginState>;
+export {};

package/{src/babel/index.test.ts → dist/babel/plugin.test.ts}

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import { transformSync } from "@babel/core";
-import { describe, expect, it } from "vitest";
-import babelPlugin, { type PluginOptions } from "./index.js";
+import { describe, expect, it, vi } from "vitest";
+import babelPlugin, { type PluginOptions } from "./plugin.js";
 
 /**
  * Helper to transform code with the Babel plugin
@@ -265,4 +266,217 @@ describe("Babel plugin - className transformation (existing behavior)", () => {
     expect(output).toContain("_bg_red_500");
     expect(output).toContain("_m_4_p_2");
   });
+
+  it("should merge className with function-based style prop", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return (
+          <TextInput
+            className="border border-gray-300 bg-gray-100"
+            style={({ focused, disabled }) => [
+              baseStyles,
+              focused && focusedStyles,
+            ]}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true); // Enable JSX
+
+    // Should have StyleSheet with className styles
+    expect(output).toContain("StyleSheet.create");
+    // Style keys are sorted alphabetically: bg-gray-100 comes before border
+    expect(output).toContain("_bg_gray_100_border_border_gray_300");
+
+    // Should create a wrapper function that merges both
+    // The wrapper should call the original function and merge results
+    expect(output).toContain("_state");
+    expect(output).toContain("_twStyles._bg_gray_100_border_border_gray_300");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+
+    // Should have a function that accepts state and returns an array
+    expect(output).toMatch(/_state\s*=>/);
+  });
+
+  it("should merge dynamic className with function-based 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, undefined, true); // Enable JSX
+
+    // 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");
+  });
+});
+
+describe("Babel plugin - placeholder: modifier transformation", () => {
+  it("should transform placeholder:text-{color} to placeholderTextColor prop", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return (
+          <TextInput
+            className="border-2 placeholder:text-gray-400"
+            placeholder="Email"
+          />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have placeholderTextColor prop with correct hex value (from custom palette)
+    expect(output).toContain('placeholderTextColor: "#99a1af"');
+
+    // Should still have style for border-2
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_border_2");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should support placeholder colors with opacity", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return <TextInput className="placeholder:text-red-500/50" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have 8-digit hex with alpha channel (custom palette red-500, uppercased)
+    expect(output).toContain('placeholderTextColor: "#FB2C3680"');
+  });
+
+  it("should support arbitrary placeholder colors", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return <TextInput className="placeholder:text-[#ff0000]" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    expect(output).toContain('placeholderTextColor: "#ff0000"');
+  });
+
+  it("should combine placeholder: with other modifiers", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return (
+          <TextInput
+            className="border-2 focus:border-blue-500 placeholder:text-gray-400"
+            placeholder="Email"
+          />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have placeholderTextColor prop (custom palette gray-400)
+    expect(output).toContain('placeholderTextColor: "#99a1af"');
+
+    // Should have focus: modifier handling (style function)
+    expect(output).toContain("focused");
+    expect(output).toMatch(/style[\s\S]*=>/); // Style function
+
+    // Should not have className
+    expect(output).not.toContain("className");
+  });
+
+  it("should handle multiple placeholder: classes (last wins)", () => {
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return (
+          <TextInput className="placeholder:text-red-500 placeholder:text-blue-500" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Blue should win (last color, custom palette blue-500)
+    expect(output).toContain('placeholderTextColor: "#2b7fff"');
+  });
+
+  it("should ignore non-text utilities in placeholder: modifier", () => {
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const input = `
+      import { TextInput } from 'react-native';
+      export function Component() {
+        return (
+          <TextInput className="placeholder:font-bold placeholder:text-gray-400" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should still have the valid text color (custom palette gray-400)
+    expect(output).toContain('placeholderTextColor: "#99a1af"');
+
+    // Should not have font-bold anywhere
+    expect(output).not.toContain("fontWeight");
+
+    consoleSpy.mockRestore();
+  });
+
+  it.skip("should work with custom colors", () => {
+    // Note: This test would require setting up a tailwind.config file
+    // For now, we'll skip custom color testing in Babel tests
+    // Custom colors are tested in the parser tests
+  });
+
+  it("should not transform placeholder: on non-TextInput elements", () => {
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="placeholder:text-gray-400" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should not have placeholderTextColor prop (View doesn't support it)
+    expect(output).not.toContain("placeholderTextColor");
+
+    // Should warn about unsupported modifier
+    // (The warning happens because View doesn't support any modifiers)
+
+    consoleSpy.mockRestore();
+  });
 });