@mgcrea/react-native-tailwind 0.6.0 → 0.7.0

package/dist/babel/index.ts

@@ -17,22 +17,49 @@ import { parseClassName as parseClassNameFn, splitModifierClasses } from "../par
 import { generateStyleKey as generateStyleKeyFn } from "../utils/styleKey.js";
 import { extractCustomColors } from "./config-loader.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;
+  // Track tw/twStyle imports from main package
+  twImportNames: Set<string>; // e.g., ['tw', 'twStyle'] or ['tw as customTw']
+  hasTwImport: boolean;
 };
 
-// Use a unique identifier to avoid conflicts with user's own styles
-const STYLES_IDENTIFIER = "_twStyles";
+// Default identifier for the generated StyleSheet constant
+const DEFAULT_STYLES_IDENTIFIER = "_twStyles";
 
 /**
- * Supported className-like attributes
+ * Default className-like attributes (used when no custom attributes are provided)
  */
-const SUPPORTED_CLASS_ATTRIBUTES = [
+const DEFAULT_CLASS_ATTRIBUTES = [
   "className",
-  "containerClassName",
   "contentContainerClassName",
   "columnWrapperClassName",
   "ListHeaderComponentClassName",
@@ -40,25 +67,56 @@ const SUPPORTED_CLASS_ATTRIBUTES = [
 ] as const;
 
 /**
- * Get the target style prop name based on the className attribute
+ * Build attribute matching structures from plugin options
+ * Separates exact matches from pattern-based matches
  */
-function getTargetStyleProp(attributeName: string): string {
-  if (attributeName === "containerClassName") {
-    return "containerStyle";
-  }
-  if (attributeName === "contentContainerClassName") {
-    return "contentContainerStyle";
-  }
-  if (attributeName === "columnWrapperClassName") {
-    return "columnWrapperStyle";
+function buildAttributeMatchers(attributes: string[]): {
+  exactMatches: Set<string>;
+  patterns: RegExp[];
+} {
+  const exactMatches = new Set<string>();
+  const patterns: RegExp[] = [];
+
+  for (const attr of attributes) {
+    if (attr.includes("*")) {
+      // Convert glob pattern to regex
+      // *ClassName -> /^.*ClassName$/
+      // container* -> /^container.*$/
+      const regexPattern = "^" + attr.replace(/\*/g, ".*") + "$";
+      patterns.push(new RegExp(regexPattern));
+    } else {
+      // Exact match
+      exactMatches.add(attr);
+    }
   }
-  if (attributeName === "ListHeaderComponentClassName") {
-    return "ListHeaderComponentStyle";
+
+  return { exactMatches, patterns };
+}
+
+/**
+ * Check if an attribute name matches the configured attributes
+ */
+function isAttributeSupported(attributeName: string, exactMatches: Set<string>, patterns: RegExp[]): boolean {
+  // Check exact matches first (faster)
+  if (exactMatches.has(attributeName)) {
+    return true;
   }
-  if (attributeName === "ListFooterComponentClassName") {
-    return "ListFooterComponentStyle";
+
+  // Check pattern matches
+  for (const pattern of patterns) {
+    if (pattern.test(attributeName)) {
+      return true;
+    }
   }
-  return "style";
+
+  return false;
+}
+
+/**
+ * Get the target style prop name based on the className attribute
+ */
+function getTargetStyleProp(attributeName: string): string {
+  return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
 }
 
 /**
@@ -169,7 +227,7 @@ function processTemplateLiteral(
         staticParts.push(cls);
 
         // Add to parts array
-        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
+        parts.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
       }
     }
 
@@ -268,7 +326,7 @@ function processStringOrExpression(node: any, state: PluginState, t: typeof Babe
     const styleKey = generateStyleKey(className);
     state.styleRegistry.set(styleKey, styleObject);
 
-    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
+    return t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
   }
 
   // Handle nested expressions recursively
@@ -309,7 +367,7 @@ function processStaticClassNameWithModifiers(
     const baseStyleObject = parseClassName(baseClassName, state.customColors);
     const baseStyleKey = generateStyleKey(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
-    baseStyleExpression = t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(baseStyleKey));
+    baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
   }
 
   // Parse and register modifier classes
@@ -346,7 +404,7 @@ function processStaticClassNameWithModifiers(
     const conditionalExpression = t.logicalExpression(
       "&&",
       t.identifier(stateProperty),
-      t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(modifierStyleKey)),
+      t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey)),
     );
 
     styleArrayElements.push(conditionalExpression);
@@ -403,11 +461,78 @@ function createStyleFunction(styleExpression: any, modifierTypes: ModifierType[]
   return t.arrowFunctionExpression([param], styleExpression);
 }
 
-export default function reactNativeTailwindBabelPlugin({
-  types: t,
-}: {
-  types: typeof BabelTypes;
-}): PluginObj<PluginState> {
+/**
+ * Process tw`...` or twStyle('...') call and replace with TwStyle object
+ * Generates: { style: styles._base, activeStyle: styles._active, ... }
+ */
+function processTwCall(className: string, path: NodePath, state: PluginState, t: typeof BabelTypes): void {
+  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+
+  // Build TwStyle object properties
+  const objectProperties: any[] = [];
+
+  // Parse and add base styles
+  if (baseClasses.length > 0) {
+    const baseClassName = baseClasses.join(" ");
+    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleKey = generateStyleKey(baseClassName);
+    state.styleRegistry.set(baseStyleKey, baseStyleObject);
+
+    objectProperties.push(
+      t.objectProperty(
+        t.identifier("style"),
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+      ),
+    );
+  } else {
+    // No base classes - add empty style object
+    objectProperties.push(t.objectProperty(t.identifier("style"), t.objectExpression([])));
+  }
+
+  // Group modifiers by type
+  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);
+    }
+  }
+
+  // Add modifier styles
+  for (const [modifierType, modifiers] of modifiersByType) {
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+
+    // Map modifier type to property name: active -> activeStyle
+    const propertyName = `${modifierType}Style`;
+
+    objectProperties.push(
+      t.objectProperty(
+        t.identifier(propertyName),
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey)),
+      ),
+    );
+  }
+
+  // Replace the tw`...` or twStyle('...') with the object
+  const twStyleObject = t.objectExpression(objectProperties);
+  path.replaceWith(twStyleObject);
+}
+
+export default function reactNativeTailwindBabelPlugin(
+  { types: t }: { types: typeof BabelTypes },
+  options?: PluginOptions,
+): PluginObj<PluginState> {
+  // Build attribute matchers from options
+  const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
+  const { exactMatches, patterns } = buildAttributeMatchers(attributes);
+  const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
+
   return {
     name: "react-native-tailwind",
 
@@ -418,12 +543,22 @@ export default function reactNativeTailwindBabelPlugin({
           state.styleRegistry = new Map();
           state.hasClassNames = false;
           state.hasStyleSheetImport = false;
+          state.supportedAttributes = exactMatches;
+          state.attributePatterns = patterns;
+          state.stylesIdentifier = stylesIdentifier;
+          state.twImportNames = new Set();
+          state.hasTwImport = false;
 
           // Load custom colors from tailwind.config.*
           state.customColors = extractCustomColors(state.file.opts.filename ?? "");
         },
 
         exit(path: NodePath, state: PluginState) {
+          // Remove tw/twStyle imports if they were used (and transformed)
+          if (state.hasTwImport) {
+            removeTwImports(path, t);
+          }
+
           // If no classNames were found, skip StyleSheet generation
           if (!state.hasClassNames || state.styleRegistry.size === 0) {
             return;
@@ -434,14 +569,17 @@ export default function reactNativeTailwindBabelPlugin({
             addStyleSheetImport(path, t);
           }
 
-          // Generate and inject StyleSheet.create at the end of the file
-          injectStyles(path, state.styleRegistry, t);
+          // Generate and inject StyleSheet.create at the beginning of the file (after imports)
+          // This ensures _twStyles is defined before any code that references it
+          injectStylesAtTop(path, state.styleRegistry, state.stylesIdentifier, t);
         },
       },
 
-      // Check if StyleSheet is already imported
+      // Check if StyleSheet is already imported and track tw/twStyle imports
       ImportDeclaration(path: NodePath, state: PluginState) {
         const node = path.node as any;
+
+        // Track react-native StyleSheet import
         if (node.source.value === "react-native") {
           const specifiers = node.specifiers;
           const hasStyleSheet = specifiers.some((spec: any) => {
@@ -459,14 +597,127 @@ export default function reactNativeTailwindBabelPlugin({
             state.hasStyleSheetImport = true;
           }
         }
+
+        // Track tw/twStyle imports from main package (for compile-time transformation)
+        if (node.source.value === "@mgcrea/react-native-tailwind") {
+          const specifiers = node.specifiers;
+          specifiers.forEach((spec: any) => {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              const importedName = spec.imported.name;
+              if (importedName === "tw" || importedName === "twStyle") {
+                // Track the local name (could be renamed: import { tw as customTw })
+                const localName = spec.local.name;
+                state.twImportNames.add(localName);
+                state.hasTwImport = true;
+              }
+            }
+          });
+        }
+      },
+
+      // Handle tw`...` tagged template expressions
+      TaggedTemplateExpression(path: NodePath, state: PluginState) {
+        const node = path.node as any;
+
+        // Check if the tag is a tracked tw import
+        if (!t.isIdentifier(node.tag)) {
+          return;
+        }
+
+        const tagName = node.tag.name;
+        if (!state.twImportNames.has(tagName)) {
+          return;
+        }
+
+        // Extract static className from template literal
+        const quasi = node.quasi;
+        if (!t.isTemplateLiteral(quasi)) {
+          return;
+        }
+
+        // Only support static strings (no interpolations)
+        if (quasi.expressions.length > 0) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] Dynamic tw\`...\` with interpolations is not supported at ${state.file.opts.filename ?? "unknown"}. ` +
+                `Use style prop for dynamic values.`,
+            );
+          }
+          return;
+        }
+
+        // Get the static className string
+        const className = quasi.quasis[0]?.value.cooked?.trim() ?? "";
+        if (!className) {
+          // Replace with empty object
+          path.replaceWith(
+            t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))]),
+          );
+          return;
+        }
+
+        state.hasClassNames = true;
+
+        // Process the className with modifiers
+        processTwCall(className, path, state, t);
+      },
+
+      // Handle twStyle('...') call expressions
+      CallExpression(path: NodePath, state: PluginState) {
+        const node = path.node as any;
+
+        // Check if the callee is a tracked twStyle import
+        if (!t.isIdentifier(node.callee)) {
+          return;
+        }
+
+        const calleeName = node.callee.name;
+        if (!state.twImportNames.has(calleeName)) {
+          return;
+        }
+
+        // Must have exactly one argument
+        if (node.arguments.length !== 1) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] twStyle() expects exactly one argument at ${state.file.opts.filename ?? "unknown"}`,
+            );
+          }
+          return;
+        }
+
+        const arg = node.arguments[0];
+
+        // Only support static string literals
+        if (!t.isStringLiteral(arg)) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] twStyle() only supports static string literals at ${state.file.opts.filename ?? "unknown"}. ` +
+                `Use style prop for dynamic values.`,
+            );
+          }
+          return;
+        }
+
+        const className = arg.value.trim();
+        if (!className) {
+          // Replace with undefined
+          path.replaceWith(t.identifier("undefined"));
+          return;
+        }
+
+        state.hasClassNames = true;
+
+        // Process the className with modifiers
+        processTwCall(className, path, state, t);
       },
 
       JSXAttribute(path: NodePath, state: PluginState) {
         const node = path.node as any;
         const attributeName = node.name.name;
 
-        // Only process className-like attributes
-        if (!SUPPORTED_CLASS_ATTRIBUTES.includes(attributeName)) {
+        // Only process configured className-like attributes
+        if (!isAttributeSupported(attributeName, state.supportedAttributes, state.attributePatterns)) {
           return;
         }
 
@@ -590,10 +841,10 @@ export default function reactNativeTailwindBabelPlugin({
 
           if (styleAttribute) {
             // Merge with existing style prop
-            mergeStyleAttribute(path, styleAttribute, styleKey, t);
+            mergeStyleAttribute(path, styleAttribute, styleKey, state.stylesIdentifier, t);
           } else {
             // Replace className with style prop
-            replaceWithStyleAttribute(path, styleKey, targetStyleProp, t);
+            replaceWithStyleAttribute(path, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
           return;
         }
@@ -665,6 +916,41 @@ function addStyleSheetImport(path: NodePath, t: typeof BabelTypes) {
   (path as any).unshiftContainer("body", importDeclaration);
 }
 
+/**
+ * Remove tw/twStyle imports from @mgcrea/react-native-tailwind
+ * This is called after all tw calls have been transformed
+ */
+function removeTwImports(path: NodePath, t: typeof BabelTypes) {
+  // Traverse the program to find and remove tw/twStyle imports
+  path.traverse({
+    ImportDeclaration(importPath: NodePath) {
+      const node = importPath.node as any;
+
+      // Only process imports from main package
+      if (node.source.value !== "@mgcrea/react-native-tailwind") {
+        return;
+      }
+
+      // Filter out tw/twStyle specifiers
+      const remainingSpecifiers = node.specifiers.filter((spec: any) => {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          const importedName = spec.imported.name;
+          return importedName !== "tw" && importedName !== "twStyle";
+        }
+        return true;
+      });
+
+      if (remainingSpecifiers.length === 0) {
+        // Remove entire import if no specifiers remain
+        importPath.remove();
+      } else if (remainingSpecifiers.length < node.specifiers.length) {
+        // Update import with remaining specifiers
+        node.specifiers = remainingSpecifiers;
+      }
+    },
+  });
+}
+
 /**
  * Replace className with style attribute
  */
@@ -672,11 +958,12 @@ function replaceWithStyleAttribute(
   classNamePath: NodePath,
   styleKey: string,
   targetStyleProp: string,
+  stylesIdentifier: string,
   t: typeof BabelTypes,
 ) {
   const styleAttribute = t.jsxAttribute(
     t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey))),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey))),
   );
 
   classNamePath.replaceWith(styleAttribute);
@@ -689,6 +976,7 @@ function mergeStyleAttribute(
   classNamePath: NodePath,
   styleAttribute: any,
   styleKey: string,
+  stylesIdentifier: string,
   t: typeof BabelTypes,
 ) {
   const existingStyle = styleAttribute.value.expression;
@@ -696,7 +984,7 @@ function mergeStyleAttribute(
   // Create array with className styles first, then existing styles
   // This allows existing styles to override className styles
   const styleArray = t.arrayExpression([
-    t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)),
+    t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
     existingStyle,
   ]);
 
@@ -815,9 +1103,15 @@ function mergeStyleFunctionAttribute(
 }
 
 /**
- * Inject StyleSheet.create with all collected styles
+ * 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
  */
-function injectStyles(path: NodePath, styleRegistry: Map<string, StyleObject>, t: typeof BabelTypes) {
+function injectStylesAtTop(
+  path: NodePath,
+  styleRegistry: Map<string, StyleObject>,
+  stylesIdentifier: string,
+  t: typeof BabelTypes,
+) {
   // Build style object properties
   const styleProperties: any[] = [];
 
@@ -840,18 +1134,32 @@ function injectStyles(path: NodePath, styleRegistry: Map<string, StyleObject>, t
     styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
   }
 
-  // Create: const _tailwindStyles = StyleSheet.create({ ... })
+  // Create: const _twStyles = StyleSheet.create({ ... })
   const styleSheet = t.variableDeclaration("const", [
     t.variableDeclarator(
-      t.identifier(STYLES_IDENTIFIER),
+      t.identifier(stylesIdentifier),
       t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
         t.objectExpression(styleProperties),
       ]),
     ),
   ]);
 
-  // Add StyleSheet.create at the end of the file
-  (path as any).pushContainer("body", styleSheet);
+  // Find the index to insert after all imports
+  const body = (path as any).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);
 }
 
 // Helper functions that use the imported parser

package/dist/components/Pressable.d.ts

@@ -11,6 +11,7 @@ export type PressableProps = Omit<RNPressableProps, "style"> & {
      * Style can be a static style object/array or a function that receives Pressable state + disabled
      */
     style?: StyleProp<ViewStyle> | ((state: EnhancedPressableState) => StyleProp<ViewStyle>);
+    className?: string;
 };
 /**
  * Enhanced Pressable that supports the disabled: modifier
@@ -28,5 +29,6 @@ export declare const Pressable: import("react").ForwardRefExoticComponent<Omit<R
      * Style can be a static style object/array or a function that receives Pressable state + disabled
      */
     style?: StyleProp<ViewStyle> | ((state: EnhancedPressableState) => StyleProp<ViewStyle>);
+    className?: string;
 } & import("react").RefAttributes<import("react-native").View>>;
 export {};

package/dist/components/TextInput.d.ts

@@ -23,6 +23,7 @@ export type TextInputProps = Omit<RNTextInputProps, "style"> & {
         focused: boolean;
         disabled: boolean;
     }) => RNTextInputProps["style"]);
+    className?: string;
     /**
      * Convenience prop for disabled state (overrides editable if provided)
      * When true, sets editable to false
@@ -48,6 +49,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<R
         focused: boolean;
         disabled: boolean;
     }) => RNTextInputProps["style"]);
+    className?: string;
     /**
      * Convenience prop for disabled state (overrides editable if provided)
      * When true, sets editable to false