@mgcrea/react-native-tailwind 0.8.0 → 0.9.0

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

@@ -0,0 +1,426 @@
+import { parseSync } from "@babel/core";
+import * as t from "@babel/types";
+import { describe, expect, it } from "vitest";
+import { getComponentModifierSupport, getStatePropertyForModifier } from "./componentSupport";
+
+/**
+ * Helper to create a JSXOpeningElement from JSX code
+ */
+function createJSXElement(code: string): t.JSXOpeningElement {
+  const ast = parseSync(code, {
+    sourceType: "module",
+    plugins: [["@babel/plugin-syntax-jsx", {}]],
+    filename: "test.tsx",
+    configFile: false,
+    babelrc: false,
+  });
+
+  if (!ast) {
+    throw new Error(`Failed to parse: ${code}`);
+  }
+
+  // Find the JSXOpeningElement in the AST
+  let element: t.JSXOpeningElement | null = null;
+
+  const traverse = (node: t.Node) => {
+    if (t.isJSXOpeningElement(node)) {
+      element = node;
+      return;
+    }
+    for (const key in node) {
+      // @ts-expect-error - Dynamic key access
+      if (node[key] && typeof node[key] === "object") {
+        // @ts-expect-error - Dynamic key access
+        traverse(node[key] as t.Node);
+      }
+    }
+  };
+
+  traverse(ast);
+
+  if (!element) {
+    throw new Error(`Could not find JSXOpeningElement in: ${code}`);
+  }
+
+  return element;
+}
+
+describe("getComponentModifierSupport", () => {
+  describe("Supported components", () => {
+    it("should recognize Pressable component", () => {
+      const element = createJSXElement("<Pressable />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "Pressable",
+        supportedModifiers: ["active", "hover", "focus", "disabled"],
+      });
+    });
+
+    it("should recognize TextInput component", () => {
+      const element = createJSXElement("<TextInput />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "TextInput",
+        supportedModifiers: ["focus", "disabled", "placeholder"],
+      });
+    });
+
+    it("should recognize Pressable with attributes", () => {
+      const element = createJSXElement('<Pressable className="m-4" onPress={handlePress} />');
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "Pressable",
+        supportedModifiers: ["active", "hover", "focus", "disabled"],
+      });
+    });
+
+    it("should recognize TextInput with attributes", () => {
+      const element = createJSXElement('<TextInput className="border" placeholder="Email" />');
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "TextInput",
+        supportedModifiers: ["focus", "disabled", "placeholder"],
+      });
+    });
+  });
+
+  describe("Member expressions", () => {
+    it("should recognize ReactNative.Pressable", () => {
+      const element = createJSXElement("<ReactNative.Pressable />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "Pressable",
+        supportedModifiers: ["active", "hover", "focus", "disabled"],
+      });
+    });
+
+    it("should recognize RN.TextInput", () => {
+      const element = createJSXElement("<RN.TextInput />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "TextInput",
+        supportedModifiers: ["focus", "disabled", "placeholder"],
+      });
+    });
+
+    it("should recognize nested member expressions", () => {
+      const element = createJSXElement("<Components.Input.TextInput />");
+      const result = getComponentModifierSupport(element, t);
+
+      // Should extract "TextInput" from the rightmost property
+      expect(result).toEqual({
+        component: "TextInput",
+        supportedModifiers: ["focus", "disabled", "placeholder"],
+      });
+    });
+
+    it("should recognize Pressable in namespaced imports", () => {
+      const element = createJSXElement("<UI.Pressable />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "Pressable",
+        supportedModifiers: ["active", "hover", "focus", "disabled"],
+      });
+    });
+  });
+
+  describe("Unsupported components", () => {
+    it("should return null for View", () => {
+      const element = createJSXElement("<View />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toBeNull();
+    });
+
+    it("should return null for TouchableOpacity", () => {
+      const element = createJSXElement("<TouchableOpacity />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toBeNull();
+    });
+
+    it("should return null for custom components", () => {
+      const element = createJSXElement("<CustomButton />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toBeNull();
+    });
+
+    it("should return null for Text", () => {
+      const element = createJSXElement("<Text />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toBeNull();
+    });
+
+    it("should return null for Image", () => {
+      const element = createJSXElement("<Image />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe("Edge cases", () => {
+    it("should be case-sensitive", () => {
+      // lowercase "pressable" should not match
+      const element = createJSXElement("<pressable />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toBeNull();
+    });
+
+    it("should not match similar names", () => {
+      const element1 = createJSXElement("<PressableButton />");
+      const result1 = getComponentModifierSupport(element1, t);
+      expect(result1).toBeNull();
+
+      const element2 = createJSXElement("<MyPressable />");
+      const result2 = getComponentModifierSupport(element2, t);
+      expect(result2).toBeNull();
+
+      const element3 = createJSXElement("<TextInputField />");
+      const result3 = getComponentModifierSupport(element3, t);
+      expect(result3).toBeNull();
+    });
+
+    it("should handle self-closing tags", () => {
+      const element = createJSXElement("<Pressable />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).not.toBeNull();
+      expect(result?.component).toBe("Pressable");
+    });
+
+    it("should return null for non-JSXOpeningElement nodes", () => {
+      // Test with a random node type
+      const identifier = t.identifier("foo");
+      const result = getComponentModifierSupport(identifier, t);
+
+      expect(result).toBeNull();
+    });
+
+    it("should return null for JSXFragment", () => {
+      // JSXFragment doesn't have a JSXOpeningElement, so create a mock fragment
+      const fragment = {
+        type: "JSXFragment",
+        openingFragment: {},
+        closingFragment: {},
+        children: [],
+      };
+
+      const result = getComponentModifierSupport(fragment as t.Node, t);
+      expect(result).toBeNull();
+    });
+  });
+
+  describe("Modifier support differences", () => {
+    it("should show Pressable supports active modifier but TextInput does not", () => {
+      const pressable = createJSXElement("<Pressable />");
+      const textInput = createJSXElement("<TextInput />");
+
+      const pressableResult = getComponentModifierSupport(pressable, t);
+      const textInputResult = getComponentModifierSupport(textInput, t);
+
+      expect(pressableResult?.supportedModifiers).toContain("active");
+      expect(textInputResult?.supportedModifiers).not.toContain("active");
+    });
+
+    it("should show both support focus modifier", () => {
+      const pressable = createJSXElement("<Pressable />");
+      const textInput = createJSXElement("<TextInput />");
+
+      const pressableResult = getComponentModifierSupport(pressable, t);
+      const textInputResult = getComponentModifierSupport(textInput, t);
+
+      expect(pressableResult?.supportedModifiers).toContain("focus");
+      expect(textInputResult?.supportedModifiers).toContain("focus");
+    });
+
+    it("should show TextInput supports placeholder but Pressable does not", () => {
+      const pressable = createJSXElement("<Pressable />");
+      const textInput = createJSXElement("<TextInput />");
+
+      const pressableResult = getComponentModifierSupport(pressable, t);
+      const textInputResult = getComponentModifierSupport(textInput, t);
+
+      expect(pressableResult?.supportedModifiers).not.toContain("placeholder");
+      expect(textInputResult?.supportedModifiers).toContain("placeholder");
+    });
+
+    it("should show both support disabled modifier", () => {
+      const pressable = createJSXElement("<Pressable />");
+      const textInput = createJSXElement("<TextInput />");
+
+      const pressableResult = getComponentModifierSupport(pressable, t);
+      const textInputResult = getComponentModifierSupport(textInput, t);
+
+      expect(pressableResult?.supportedModifiers).toContain("disabled");
+      expect(textInputResult?.supportedModifiers).toContain("disabled");
+    });
+  });
+});
+
+describe("getStatePropertyForModifier", () => {
+  it("should map active to pressed", () => {
+    expect(getStatePropertyForModifier("active")).toBe("pressed");
+  });
+
+  it("should map hover to hovered", () => {
+    expect(getStatePropertyForModifier("hover")).toBe("hovered");
+  });
+
+  it("should map focus to focused", () => {
+    expect(getStatePropertyForModifier("focus")).toBe("focused");
+  });
+
+  it("should map disabled to disabled", () => {
+    expect(getStatePropertyForModifier("disabled")).toBe("disabled");
+  });
+
+  it("should return pressed as fallback for unknown modifiers", () => {
+    // @ts-expect-error - Testing fallback with invalid modifier
+    expect(getStatePropertyForModifier("unknown")).toBe("pressed");
+
+    // @ts-expect-error - Testing fallback with invalid modifier
+    expect(getStatePropertyForModifier("invalid")).toBe("pressed");
+
+    // @ts-expect-error - Testing fallback with invalid modifier
+    expect(getStatePropertyForModifier("")).toBe("pressed");
+  });
+
+  it("should handle all Pressable modifier states", () => {
+    // Pressable supports: active, hover, focus, disabled
+    const pressableModifiers: Array<"active" | "hover" | "focus" | "disabled"> = [
+      "active",
+      "hover",
+      "focus",
+      "disabled",
+    ];
+
+    const expectedMapping = {
+      active: "pressed",
+      hover: "hovered",
+      focus: "focused",
+      disabled: "disabled",
+    };
+
+    for (const modifier of pressableModifiers) {
+      expect(getStatePropertyForModifier(modifier)).toBe(expectedMapping[modifier]);
+    }
+  });
+
+  it("should handle all TextInput modifier states", () => {
+    // TextInput supports: focus, disabled, placeholder
+    // Note: placeholder doesn't have a state property (it's a prop, not state)
+    const textInputModifiers: Array<"focus" | "disabled"> = ["focus", "disabled"];
+
+    const expectedMapping = {
+      focus: "focused",
+      disabled: "disabled",
+    };
+
+    for (const modifier of textInputModifiers) {
+      expect(getStatePropertyForModifier(modifier)).toBe(expectedMapping[modifier]);
+    }
+  });
+});
+
+describe("Integration - Real-world scenarios", () => {
+  it("should correctly identify modifiers for a Pressable button", () => {
+    const element = createJSXElement(
+      '<Pressable className="active:bg-blue-700 hover:bg-blue-600 disabled:bg-gray-300" />',
+    );
+    const result = getComponentModifierSupport(element, t);
+
+    expect(result).not.toBeNull();
+    expect(result?.component).toBe("Pressable");
+
+    // Verify all used modifiers are supported
+    expect(result?.supportedModifiers).toContain("active");
+    expect(result?.supportedModifiers).toContain("hover");
+    expect(result?.supportedModifiers).toContain("disabled");
+  });
+
+  it("should correctly identify modifiers for a TextInput field", () => {
+    const element = createJSXElement(
+      '<TextInput className="focus:border-blue-500 disabled:bg-gray-100 placeholder:text-gray-400" />',
+    );
+    const result = getComponentModifierSupport(element, t);
+
+    expect(result).not.toBeNull();
+    expect(result?.component).toBe("TextInput");
+
+    // Verify all used modifiers are supported
+    expect(result?.supportedModifiers).toContain("focus");
+    expect(result?.supportedModifiers).toContain("disabled");
+    expect(result?.supportedModifiers).toContain("placeholder");
+  });
+
+  it("should handle namespaced components from imports", () => {
+    const element = createJSXElement('<RN.Pressable className="active:opacity-80" />');
+    const result = getComponentModifierSupport(element, t);
+
+    expect(result).not.toBeNull();
+    expect(result?.component).toBe("Pressable");
+    expect(result?.supportedModifiers).toContain("active");
+  });
+
+  it("should return null for unsupported components with modifiers", () => {
+    const element = createJSXElement('<View className="hover:bg-blue-500" />');
+    const result = getComponentModifierSupport(element, t);
+
+    // View doesn't support modifiers
+    expect(result).toBeNull();
+  });
+
+  it("should map all Pressable modifiers to correct state properties", () => {
+    const element = createJSXElement("<Pressable />");
+    const result = getComponentModifierSupport(element, t);
+
+    expect(result).not.toBeNull();
+
+    // Test each supported modifier maps correctly
+    const modifiers = result?.supportedModifiers as Array<"active" | "hover" | "focus" | "disabled">;
+    for (const modifier of modifiers) {
+      const stateProp = getStatePropertyForModifier(modifier);
+      expect(stateProp).toBeTruthy();
+      expect(typeof stateProp).toBe("string");
+    }
+
+    // Verify the mappings
+    expect(getStatePropertyForModifier("active")).toBe("pressed");
+    expect(getStatePropertyForModifier("hover")).toBe("hovered");
+    expect(getStatePropertyForModifier("focus")).toBe("focused");
+    expect(getStatePropertyForModifier("disabled")).toBe("disabled");
+  });
+
+  it("should map all TextInput modifiers to correct state properties", () => {
+    const element = createJSXElement("<TextInput />");
+    const result = getComponentModifierSupport(element, t);
+
+    expect(result).not.toBeNull();
+
+    // Filter out placeholder as it doesn't have a state property
+    const stateModifiers = result?.supportedModifiers.filter((m) => m !== "placeholder") as Array<
+      "focus" | "disabled"
+    >;
+
+    for (const modifier of stateModifiers) {
+      const stateProp = getStatePropertyForModifier(modifier);
+      expect(stateProp).toBeTruthy();
+      expect(typeof stateProp).toBe("string");
+    }
+
+    // Verify the mappings
+    expect(getStatePropertyForModifier("focus")).toBe("focused");
+    expect(getStatePropertyForModifier("disabled")).toBe("disabled");
+  });
+});

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

@@ -0,0 +1,30 @@
+/**
+ * Utility functions for processing platform modifiers (ios:, android:, web:)
+ */
+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 platform modifier processing)
+ */
+export interface PlatformModifierProcessingState {
+    styleRegistry: Map<string, StyleObject>;
+    customColors: Record<string, string>;
+    stylesIdentifier: string;
+    needsPlatformImport: boolean;
+}
+/**
+ * Process platform modifiers and generate Platform.select() expression
+ *
+ * @param platformModifiers - Array of parsed platform modifiers
+ * @param state - Plugin state
+ * @param parseClassName - Function to parse class names into style objects
+ * @param generateStyleKey - Function to generate unique style keys
+ * @param t - Babel types
+ * @returns AST node for Platform.select() call
+ *
+ * @example
+ * Input: [{ modifier: "ios", baseClass: "shadow-lg" }, { modifier: "android", baseClass: "elevation-4" }]
+ * Output: Platform.select({ ios: styles._ios_shadow_lg, android: styles._android_elevation_4 })
+ */
+export declare function processPlatformModifiers(platformModifiers: ParsedModifier[], state: PlatformModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression;

package/dist/babel/utils/platformModifierProcessing.ts

@@ -0,0 +1,80 @@
+/**
+ * Utility functions for processing platform modifiers (ios:, android:, web:)
+ */
+
+import type * as BabelTypes from "@babel/types";
+import type { ParsedModifier, PlatformModifierType } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Plugin state interface (subset needed for platform modifier processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface PlatformModifierProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customColors: Record<string, string>;
+  stylesIdentifier: string;
+  needsPlatformImport: boolean;
+}
+
+/**
+ * Process platform modifiers and generate Platform.select() expression
+ *
+ * @param platformModifiers - Array of parsed platform modifiers
+ * @param state - Plugin state
+ * @param parseClassName - Function to parse class names into style objects
+ * @param generateStyleKey - Function to generate unique style keys
+ * @param t - Babel types
+ * @returns AST node for Platform.select() call
+ *
+ * @example
+ * Input: [{ modifier: "ios", baseClass: "shadow-lg" }, { modifier: "android", baseClass: "elevation-4" }]
+ * Output: Platform.select({ ios: styles._ios_shadow_lg, android: styles._android_elevation_4 })
+ */
+export function processPlatformModifiers(
+  platformModifiers: ParsedModifier[],
+  state: PlatformModifierProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+): BabelTypes.Expression {
+  // Mark that we need Platform import
+  state.needsPlatformImport = true;
+
+  // Group modifiers by platform
+  const modifiersByPlatform = new Map<PlatformModifierType, ParsedModifier[]>();
+
+  for (const mod of platformModifiers) {
+    const platform = mod.modifier as PlatformModifierType;
+    if (!modifiersByPlatform.has(platform)) {
+      modifiersByPlatform.set(platform, []);
+    }
+    const platformGroup = modifiersByPlatform.get(platform);
+    if (platformGroup) {
+      platformGroup.push(mod);
+    }
+  }
+
+  // Build Platform.select() object properties
+  const selectProperties: BabelTypes.ObjectProperty[] = [];
+
+  for (const [platform, modifiers] of modifiersByPlatform) {
+    // Parse all classes for this platform together
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName(classNames, state.customColors);
+    const styleKey = generateStyleKey(`${platform}_${classNames}`);
+
+    // Register style in the registry
+    state.styleRegistry.set(styleKey, styleObject);
+
+    // Create property: ios: styles._ios_shadow_lg
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+
+    selectProperties.push(t.objectProperty(t.identifier(platform), styleReference));
+  }
+
+  // Create Platform.select({ ios: ..., android: ... })
+  return t.callExpression(t.memberExpression(t.identifier("Platform"), t.identifier("select")), [
+    t.objectExpression(selectProperties),
+  ]);
+}

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

@@ -8,6 +8,10 @@ import type { StyleObject } from "../../types/core.js";
  * Add StyleSheet import to the file
  */
 export declare function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void;
+/**
+ * Add Platform import to the file or merge with existing react-native import
+ */
+export declare function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void;
 /**
  * Inject StyleSheet.create with all collected styles at the top of the file
  * This ensures the styles object is defined before any code that references it

package/dist/babel/utils/styleInjection.ts

@@ -19,6 +19,34 @@ export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeo
   path.unshiftContainer("body", importDeclaration);
 }
 
+/**
+ * Add Platform import to the file or merge with existing react-native import
+ */
+export function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
+  // Check if there's already a react-native import
+  const body = path.node.body;
+  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
+
+  if (reactNativeImport) {
+    // Add Platform to existing react-native import
+    reactNativeImport.specifiers.push(t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")));
+  } else {
+    // Create new react-native import with Platform
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))],
+      t.stringLiteral("react-native"),
+    );
+    path.unshiftContainer("body", importDeclaration);
+  }
+}
+
 /**
  * Inject StyleSheet.create with all collected styles at the top of the file
  * This ensures the styles object is defined before any code that references it

package/dist/babel/utils/styleTransforms.ts

@@ -242,6 +242,7 @@ export function addOrMergePlaceholderTextColorProp(
   if (existingProp) {
     // If explicit prop exists, don't override it (explicit props take precedence)
     // This matches the behavior of style prop precedence
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. ` +