@mgcrea/react-native-tailwind 0.7.0 → 0.8.0

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

@@ -0,0 +1,32 @@
+/**
+ * Utility functions for processing dynamic className expressions
+ */
+import type * as BabelTypes from "@babel/types";
+import type { StyleObject } from "../../types/core.js";
+/**
+ * Plugin state interface (subset needed for dynamic processing)
+ */
+export interface DynamicProcessingState {
+    styleRegistry: Map<string, StyleObject>;
+    customColors: Record<string, string>;
+    stylesIdentifier: string;
+}
+/**
+ * Result of processing a dynamic expression
+ */
+export type DynamicExpressionResult = {
+    expression: BabelTypes.Expression;
+    staticParts?: string[];
+};
+/**
+ * Process a dynamic className expression
+ * Extracts static strings and transforms the expression to use pre-compiled styles
+ */
+export declare function processDynamicExpression(expression: BabelTypes.Expression, state: DynamicProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): {
+    expression: BabelTypes.ArrayExpression | BabelTypes.MemberExpression;
+    staticParts: string[] | undefined;
+} | {
+    expression: BabelTypes.ConditionalExpression;
+} | {
+    expression: BabelTypes.LogicalExpression;
+} | null;

package/dist/babel/utils/dynamicProcessing.ts

@@ -0,0 +1,223 @@
+/**
+ * Utility functions for processing dynamic className expressions
+ */
+
+import type * as BabelTypes from "@babel/types";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Plugin state interface (subset needed for dynamic processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface DynamicProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customColors: Record<string, string>;
+  stylesIdentifier: string;
+}
+
+/**
+ * Result of processing a dynamic expression
+ */
+export type DynamicExpressionResult = {
+  // The transformed expression to use in the style prop
+  expression: BabelTypes.Expression;
+  // Static parts that can be parsed at compile time (if any)
+  staticParts?: string[];
+};
+
+/**
+ * Process a dynamic className expression
+ * Extracts static strings and transforms the expression to use pre-compiled styles
+ */
+export function processDynamicExpression(
+  expression: BabelTypes.Expression,
+  state: DynamicProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+) {
+  // Handle template literals: `m-4 ${condition ? "p-4" : "p-2"}`
+  if (t.isTemplateLiteral(expression)) {
+    return processTemplateLiteral(expression, state, parseClassName, generateStyleKey, t);
+  }
+
+  // Handle conditional expressions: condition ? "m-4" : "p-2"
+  if (t.isConditionalExpression(expression)) {
+    return processConditionalExpression(expression, state, parseClassName, generateStyleKey, t);
+  }
+
+  // Handle logical expressions: condition && "m-4"
+  if (t.isLogicalExpression(expression)) {
+    return processLogicalExpression(expression, state, parseClassName, generateStyleKey, t);
+  }
+
+  // Unsupported expression type
+  return null;
+}
+
+/**
+ * Process template literal: `static ${dynamic} more-static`
+ */
+function processTemplateLiteral(
+  node: BabelTypes.TemplateLiteral,
+  state: DynamicProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+) {
+  const parts: BabelTypes.MemberExpression[] = [];
+  const staticParts: string[] = [];
+
+  // Process quasis (static parts) and expressions (dynamic parts)
+  for (let i = 0; i < node.quasis.length; i++) {
+    const quasi = node.quasis[i];
+    const staticText = quasi.value.cooked?.trim();
+
+    // Add static part if not empty
+    if (staticText) {
+      // Parse static classes and add to registry
+      const classes = staticText.split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        const styleObject = parseClassName(cls, state.customColors);
+        const styleKey = generateStyleKey(cls);
+        state.styleRegistry.set(styleKey, styleObject);
+        staticParts.push(cls);
+
+        // Add to parts array
+        parts.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+      }
+    }
+
+    // Add dynamic expression if exists
+    if (i < node.expressions.length) {
+      const expr = node.expressions[i];
+
+      // Recursively process nested dynamic expressions
+      const result = processDynamicExpression(
+        expr as BabelTypes.Expression,
+        state,
+        parseClassName,
+        generateStyleKey,
+        t,
+      );
+      if (result) {
+        parts.push(result.expression as BabelTypes.MemberExpression);
+      } else {
+        // For unsupported expressions, keep them as-is
+        // This won't work at runtime but maintains the structure
+        parts.push(expr as BabelTypes.MemberExpression);
+      }
+    }
+  }
+
+  if (parts.length === 0) {
+    return null;
+  }
+
+  // If single part, return it directly; otherwise return array
+  const expression = parts.length === 1 ? parts[0] : t.arrayExpression(parts);
+
+  return {
+    expression,
+    staticParts: staticParts.length > 0 ? staticParts : undefined,
+  };
+}
+
+/**
+ * Process conditional expression: condition ? "class-a" : "class-b"
+ */
+function processConditionalExpression(
+  node: BabelTypes.ConditionalExpression,
+  state: DynamicProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+) {
+  const consequent = processStringOrExpression(node.consequent, state, parseClassName, generateStyleKey, t);
+  const alternate = processStringOrExpression(node.alternate, state, parseClassName, generateStyleKey, t);
+
+  if (!consequent && !alternate) {
+    return null;
+  }
+
+  // Build conditional: condition ? consequentStyle : alternateStyle
+  const expression = t.conditionalExpression(
+    node.test,
+    (consequent as BabelTypes.Expression) ?? t.nullLiteral(),
+    (alternate as BabelTypes.Expression) ?? t.nullLiteral(),
+  );
+
+  return { expression };
+}
+
+/**
+ * Process logical expression: condition && "class-a"
+ */
+function processLogicalExpression(
+  node: BabelTypes.LogicalExpression,
+  state: DynamicProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+) {
+  // Only handle AND (&&) expressions
+  if (node.operator !== "&&") {
+    return null;
+  }
+
+  const right = processStringOrExpression(node.right, state, parseClassName, generateStyleKey, t);
+
+  if (!right) {
+    return null;
+  }
+
+  // Build logical: condition && style
+  const expression = t.logicalExpression("&&", node.left, right as BabelTypes.Expression);
+
+  return { expression };
+}
+
+/**
+ * Process a node that might be a string literal or another expression
+ */
+function processStringOrExpression(
+  node: BabelTypes.StringLiteral | BabelTypes.Expression,
+  state: DynamicProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+) {
+  // Handle string literals
+  if (t.isStringLiteral(node)) {
+    const className = node.value.trim();
+    if (!className) {
+      return null;
+    }
+
+    // Parse and register styles
+    const styleObject = parseClassName(className, state.customColors);
+    const styleKey = generateStyleKey(className);
+    state.styleRegistry.set(styleKey, styleObject);
+
+    return t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+  }
+
+  // Handle nested expressions recursively
+  if (t.isConditionalExpression(node)) {
+    const result = processConditionalExpression(node, state, parseClassName, generateStyleKey, t);
+    return result?.expression ?? null;
+  }
+
+  if (t.isLogicalExpression(node)) {
+    const result = processLogicalExpression(node, state, parseClassName, generateStyleKey, t);
+    return result?.expression ?? null;
+  }
+
+  if (t.isTemplateLiteral(node)) {
+    const result = processTemplateLiteral(node, state, parseClassName, generateStyleKey, t);
+    return result?.expression ?? null;
+  }
+
+  // Unsupported - return null
+  return null;
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Utility functions for processing class modifiers (active:, hover:, focus:, etc.)
+ */
+import type * as BabelTypes from "@babel/types";
+import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+/**
+ * Plugin state interface (subset needed for modifier processing)
+ */
+export interface ModifierProcessingState {
+    styleRegistry: Map<string, StyleObject>;
+    customColors: Record<string, string>;
+    stylesIdentifier: string;
+}
+/**
+ * Process a static className string that contains modifiers
+ * Returns a style function expression for Pressable components
+ */
+export declare function processStaticClassNameWithModifiers(className: string, state: ModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: (className: string) => {
+    baseClasses: string[];
+    modifierClasses: ParsedModifier[];
+}, t: typeof BabelTypes): BabelTypes.Expression;
+/**
+ * Create a style function for Pressable: ({ pressed }) => styleExpression
+ */
+export declare function createStyleFunction(styleExpression: BabelTypes.Expression, modifierTypes: ModifierType[], t: typeof BabelTypes): BabelTypes.ArrowFunctionExpression;

package/dist/babel/utils/modifierProcessing.ts

@@ -0,0 +1,118 @@
+/**
+ * Utility functions for processing class modifiers (active:, hover:, focus:, etc.)
+ */
+
+import type * as BabelTypes from "@babel/types";
+import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+import { getStatePropertyForModifier } from "./componentSupport.js";
+
+/**
+ * Plugin state interface (subset needed for modifier processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface ModifierProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customColors: Record<string, string>;
+  stylesIdentifier: string;
+}
+
+/**
+ * Process a static className string that contains modifiers
+ * Returns a style function expression for Pressable components
+ */
+export function processStaticClassNameWithModifiers(
+  className: string,
+  state: ModifierProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
+  t: typeof BabelTypes,
+) {
+  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+
+  // Parse and register base classes
+  let baseStyleExpression: BabelTypes.Node | null = null;
+  if (baseClasses.length > 0) {
+    const baseClassName = baseClasses.join(" ");
+    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleKey = generateStyleKey(baseClassName);
+    state.styleRegistry.set(baseStyleKey, baseStyleObject);
+    baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
+  }
+
+  // Parse and register modifier classes
+  // Group by modifier type for better organization
+  const modifiersByType = new Map<ModifierType, ParsedModifier[]>();
+  for (const mod of modifierClasses) {
+    if (!modifiersByType.has(mod.modifier)) {
+      modifiersByType.set(mod.modifier, []);
+    }
+    const modGroup = modifiersByType.get(mod.modifier);
+    if (modGroup) {
+      modGroup.push(mod);
+    }
+  }
+
+  // Build style function: ({ pressed }) => [baseStyle, pressed && modifierStyle]
+  const styleArrayElements: BabelTypes.Expression[] = [];
+
+  // Add base style first
+  if (baseStyleExpression) {
+    styleArrayElements.push(baseStyleExpression);
+  }
+
+  // Add conditional styles for each modifier type
+  for (const [modifierType, modifiers] of modifiersByType) {
+    // Parse all modifier classes together
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+
+    // Create conditional: pressed && styles._active_bg_blue_700
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    const conditionalExpression = t.logicalExpression(
+      "&&",
+      t.identifier(stateProperty),
+      t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey)),
+    );
+
+    styleArrayElements.push(conditionalExpression);
+  }
+
+  // If only base style, return it directly; otherwise return array
+  if (styleArrayElements.length === 1) {
+    return styleArrayElements[0];
+  }
+
+  return t.arrayExpression(styleArrayElements);
+}
+
+/**
+ * Create a style function for Pressable: ({ pressed }) => styleExpression
+ */
+export function createStyleFunction(
+  styleExpression: BabelTypes.Expression,
+  modifierTypes: ModifierType[],
+  t: typeof BabelTypes,
+) {
+  // Build parameter object: { pressed, hovered, focused }
+  const paramProperties: BabelTypes.ObjectProperty[] = [];
+  const usedStateProps = new Set<string>();
+
+  for (const modifierType of modifierTypes) {
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    if (!usedStateProps.has(stateProperty)) {
+      usedStateProps.add(stateProperty);
+      paramProperties.push(
+        t.objectProperty(t.identifier(stateProperty), t.identifier(stateProperty), false, true),
+      );
+    }
+  }
+
+  const param = t.objectPattern(paramProperties);
+
+  // Create arrow function: ({ pressed }) => styleExpression
+  return t.arrowFunctionExpression([param], styleExpression);
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Utility functions for injecting StyleSheet imports and style definitions
+ */
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+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;
+/**
+ * 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
+ */
+export declare function injectStylesAtTop(path: NodePath<BabelTypes.Program>, styleRegistry: Map<string, StyleObject>, stylesIdentifier: string, t: typeof BabelTypes): void;

package/dist/babel/utils/styleInjection.ts

@@ -0,0 +1,80 @@
+/**
+ * Utility functions for injecting StyleSheet imports and style definitions
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Add StyleSheet import to the file
+ */
+export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
+  const importDeclaration = t.importDeclaration(
+    [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
+    t.stringLiteral("react-native"),
+  );
+
+  // Add import at the top of the file
+  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
+ */
+export function injectStylesAtTop(
+  path: NodePath<BabelTypes.Program>,
+  styleRegistry: Map<string, StyleObject>,
+  stylesIdentifier: string,
+  t: typeof BabelTypes,
+): void {
+  // Build style object properties
+  const styleProperties: BabelTypes.ObjectProperty[] = [];
+
+  for (const [key, styleObject] of styleRegistry) {
+    const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
+      let valueNode;
+
+      if (typeof styleValue === "number") {
+        valueNode = t.numericLiteral(styleValue);
+      } else if (typeof styleValue === "string") {
+        valueNode = t.stringLiteral(styleValue);
+      } else {
+        // Fallback for other types
+        valueNode = t.valueToNode(styleValue);
+      }
+
+      return t.objectProperty(t.identifier(styleProp), valueNode);
+    });
+
+    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
+  }
+
+  // Create: const _twStyles = StyleSheet.create({ ... })
+  const styleSheet = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(stylesIdentifier),
+      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
+        t.objectExpression(styleProperties),
+      ]),
+    ),
+  ]);
+
+  // Find the index to insert after all imports
+  const body = path.node.body;
+  let insertIndex = 0;
+
+  // Find the last import statement
+  for (let i = 0; i < body.length; i++) {
+    if (t.isImportDeclaration(body[i])) {
+      insertIndex = i + 1;
+    } else {
+      // Stop at the first non-import statement
+      break;
+    }
+  }
+
+  // Insert StyleSheet.create after imports
+  body.splice(insertIndex, 0, styleSheet);
+}

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

@@ -0,0 +1,39 @@
+/**
+ * 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 find existing style attribute on parent JSX element
+ */
+export declare function findStyleAttribute(path: NodePath, targetStyleProp: string, t: typeof BabelTypes): BabelTypes.JSXAttribute | undefined;
+/**
+ * Replace className with style attribute
+ */
+export declare function replaceWithStyleAttribute(classNamePath: NodePath, styleKey: string, targetStyleProp: string, stylesIdentifier: string, t: typeof BabelTypes): void;
+/**
+ * Merge className styles with existing style prop
+ */
+export declare function mergeStyleAttribute(classNamePath: NodePath, styleAttribute: BabelTypes.JSXAttribute, styleKey: string, stylesIdentifier: string, t: typeof BabelTypes): void;
+/**
+ * Replace className with dynamic style attribute
+ */
+export declare function replaceDynamicWithStyleAttribute(classNamePath: NodePath, result: DynamicExpressionResult, targetStyleProp: string, t: typeof BabelTypes): void;
+/**
+ * Merge dynamic className styles with existing style prop
+ */
+export declare function mergeDynamicStyleAttribute(classNamePath: NodePath, styleAttribute: BabelTypes.JSXAttribute, result: DynamicExpressionResult, t: typeof BabelTypes): void;
+/**
+ * Replace className with style function attribute (for Pressable with modifiers)
+ */
+export declare function replaceWithStyleFunctionAttribute(classNamePath: NodePath, styleFunctionExpression: BabelTypes.Expression, targetStyleProp: string, t: typeof BabelTypes): void;
+/**
+ * Merge className style function with existing style prop (for Pressable with modifiers)
+ */
+export declare function mergeStyleFunctionAttribute(classNamePath: NodePath, styleAttribute: BabelTypes.JSXAttribute, styleFunctionExpression: BabelTypes.Expression, t: typeof BabelTypes): void;
+/**
+ * Add or merge placeholderTextColor prop on a JSX element
+ * Handles merging with existing placeholderTextColor if present
+ */
+export declare function addOrMergePlaceholderTextColorProp(jsxOpeningElement: BabelTypes.JSXOpeningElement, color: string, t: typeof BabelTypes): void;