@mgcrea/react-native-tailwind 0.7.0 → 0.8.0

package/dist/babel/index.d.ts

@@ -1,42 +1,6 @@
 /**
- * Babel plugin for react-native-tailwind
- * Transforms className props to style props at compile time
+ * Main entry point for the Babel plugin
+ * Re-exports the plugin from plugin.ts
  */
-import type { PluginObj, PluginPass } from "@babel/core";
-import * as BabelTypes from "@babel/types";
-import { StyleObject } from "src/types.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 {};
+export { default } from "./plugin.js";
+export type { PluginOptions } from "./plugin.js";

package/dist/babel/index.test.ts

@@ -1,5 +1,5 @@
 import { transformSync } from "@babel/core";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import babelPlugin, { type PluginOptions } from "./index.js";
 
 /**
@@ -265,4 +265,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("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();
+  });
 });