@mgcrea/react-native-tailwind 0.11.0 → 0.12.0

package/dist/babel/plugin.ts

@@ -89,6 +89,42 @@ export type PluginOptions = {
     darkSuffix?: string;
     lightSuffix?: string;
   };
+
+  /**
+   * Configuration for color scheme hook import (dark:/light: modifiers)
+   *
+   * Allows using custom color scheme hooks from theme providers instead of
+   * React Native's built-in useColorScheme.
+   *
+   * @example
+   * // Use custom hook from theme provider
+   * {
+   *   importFrom: '@/hooks/useColorScheme',
+   *   importName: 'useColorScheme'
+   * }
+   *
+   * @example
+   * // Use React Navigation theme
+   * {
+   *   importFrom: '@react-navigation/native',
+   *   importName: 'useTheme'  // You'd wrap this to return ColorSchemeName
+   * }
+   *
+   * @default { importFrom: 'react-native', importName: 'useColorScheme' }
+   */
+  colorScheme?: {
+    /**
+     * Module to import the color scheme hook from
+     * @default 'react-native'
+     */
+    importFrom?: string;
+
+    /**
+     * Name of the hook to import
+     * @default 'useColorScheme'
+     */
+    importName?: string;
+  };
 };
 
 type PluginState = PluginPass & {
@@ -100,6 +136,9 @@ type PluginState = PluginPass & {
   hasColorSchemeImport: boolean;
   needsColorSchemeImport: boolean;
   colorSchemeVariableName: string;
+  colorSchemeImportSource: string; // Where to import the hook from (e.g., 'react-native')
+  colorSchemeHookName: string; // Name of the hook to import (e.g., 'useColorScheme')
+  colorSchemeLocalIdentifier?: string; // Local identifier if hook is already imported with an alias
   customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   supportedAttributes: Set<string>;
@@ -210,6 +249,10 @@ export default function reactNativeTailwindBabelPlugin(
     lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light",
   };
 
+  // Color scheme hook configuration from plugin options
+  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
+  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
+
   return {
     name: "react-native-tailwind",
 
@@ -225,12 +268,18 @@ export default function reactNativeTailwindBabelPlugin(
           state.hasColorSchemeImport = false;
           state.needsColorSchemeImport = false;
           state.colorSchemeVariableName = "_twColorScheme";
+          state.colorSchemeImportSource = colorSchemeImportSource;
+          state.colorSchemeHookName = colorSchemeHookName;
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
           state.twImportNames = new Set();
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = new Set();
+          state.hasColorSchemeImport = false;
+          state.colorSchemeLocalIdentifier = undefined;
+          state.needsPlatformImport = false;
+          state.hasPlatformImport = false;
 
           // Load custom theme from tailwind.config.*
           state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
@@ -260,15 +309,21 @@ export default function reactNativeTailwindBabelPlugin(
             addPlatformImport(path, t);
           }
 
-          // Add useColorScheme import if color scheme modifiers were used and not already present
+          // Add color scheme hook import if color scheme modifiers were used and not already present
           if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
-            addColorSchemeImport(path, t);
+            addColorSchemeImport(path, state.colorSchemeImportSource, state.colorSchemeHookName, t);
           }
 
-          // Inject useColorScheme hook in function components that need it
+          // Inject color scheme hook in function components that need it
           if (state.needsColorSchemeImport) {
             for (const functionPath of state.functionComponentsNeedingColorScheme) {
-              injectColorSchemeHook(functionPath, state.colorSchemeVariableName, t);
+              injectColorSchemeHook(
+                functionPath,
+                state.colorSchemeVariableName,
+                state.colorSchemeHookName,
+                state.colorSchemeLocalIdentifier,
+                t,
+              );
             }
           }
 
@@ -300,13 +355,6 @@ export default function reactNativeTailwindBabelPlugin(
             return false;
           });
 
-          const hasUseColorScheme = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "useColorScheme";
-            }
-            return false;
-          });
-
           // Only track if imports exist - don't mutate yet
           // Actual import injection happens in Program.exit only if needed
           if (hasStyleSheet) {
@@ -317,14 +365,29 @@ export default function reactNativeTailwindBabelPlugin(
             state.hasPlatformImport = true;
           }
 
-          if (hasUseColorScheme) {
-            state.hasColorSchemeImport = true;
-          }
-
           // Store reference to the react-native import for later modification if needed
           state.reactNativeImportPath = path;
         }
 
+        // Track color scheme hook import from the configured source
+        // (default: react-native, but can be custom like @/hooks/useColorScheme)
+        // Only track value imports (not type-only imports which get erased)
+        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
+          const specifiers = node.specifiers;
+
+          for (const spec of specifiers) {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              if (spec.imported.name === state.colorSchemeHookName) {
+                state.hasColorSchemeImport = true;
+                // Track the local identifier (handles aliased imports)
+                // e.g., import { useTheme as navTheme } → local name is 'navTheme'
+                state.colorSchemeLocalIdentifier = spec.local.name;
+                break;
+              }
+            }
+          }
+        }
+
         // Track tw/twStyle imports from main package (for compile-time transformation)
         if (node.source.value === "@mgcrea/react-native-tailwind") {
           const specifiers = node.specifiers;
@@ -386,7 +449,16 @@ export default function reactNativeTailwindBabelPlugin(
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
       },
 
       // Handle twStyle('...') call expressions
@@ -436,7 +508,16 @@ export default function reactNativeTailwindBabelPlugin(
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
       },
 
       JSXAttribute(path, state) {
@@ -459,20 +540,22 @@ export default function reactNativeTailwindBabelPlugin(
         // Determine target style prop based on attribute name
         const targetStyleProp = getTargetStyleProp(attributeName);
 
-        // Handle static string literals
-        if (t.isStringLiteral(value)) {
-          const className = value.value.trim();
+        /**
+         * Process static className string (handles both direct StringLiteral and StringLiteral in JSXExpressionContainer)
+         */
+        const processStaticClassName = (className: string): boolean => {
+          const trimmedClassName = className.trim();
 
           // Skip empty classNames
-          if (!className) {
+          if (!trimmedClassName) {
             path.remove();
-            return;
+            return true;
           }
 
           state.hasClassNames = true;
 
           // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:, dark:, light:, scheme:)
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
 
           // Expand scheme: modifiers into dark: and light: modifiers
           const modifierClasses: ParsedModifier[] = [];
@@ -639,7 +722,7 @@ export default function reactNativeTailwindBabelPlugin(
               } else {
                 replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
               }
-              return;
+              return true;
             } else {
               // Component doesn't support state modifiers, but we can still use platform modifiers
               // Fall through to platform-only handling
@@ -713,7 +796,7 @@ export default function reactNativeTailwindBabelPlugin(
               path.node.name = t.jsxIdentifier(targetStyleProp);
               path.node.value = t.jsxExpressionContainer(styleExpression);
             }
-            return;
+            return true;
           }
 
           // If there are state modifiers (and no platform modifiers), check if this component supports them
@@ -771,12 +854,12 @@ export default function reactNativeTailwindBabelPlugin(
                   } else {
                     replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                   }
-                  return;
+                  return true;
                 }
               } else {
                 // All modifiers are supported - process normally
                 const styleExpression = processStaticClassNameWithModifiers(
-                  className,
+                  trimmedClassName,
                   state,
                   parseClassName,
                   generateStyleKey,
@@ -793,7 +876,7 @@ export default function reactNativeTailwindBabelPlugin(
                 } else {
                   replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                 }
-                return;
+                return true;
               }
             } else {
               // Component doesn't support any modifiers
@@ -813,7 +896,7 @@ export default function reactNativeTailwindBabelPlugin(
           if (!classNameForStyle) {
             // No base classes, only had placeholder modifiers - just remove className
             path.remove();
-            return;
+            return true;
           }
 
           const styleObject = parseClassName(classNameForStyle, state.customTheme);
@@ -830,7 +913,14 @@ export default function reactNativeTailwindBabelPlugin(
             // Replace className with style prop
             replaceWithStyleAttribute(path, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
-          return;
+          return true;
+        };
+
+        // Handle static string literals
+        if (t.isStringLiteral(value)) {
+          if (processStaticClassName(value.value)) {
+            return;
+          }
         }
 
         // Handle dynamic expressions (JSXExpressionContainer)
@@ -842,6 +932,13 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
+          // Fast path: Support string literals wrapped in JSXExpressionContainer: className={"flex-row"}
+          if (t.isStringLiteral(expression)) {
+            if (processStaticClassName(expression.value)) {
+              return;
+            }
+          }
+
           try {
             // Find component scope for color scheme modifiers
             const componentScope = findComponentScope(path, t);

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

@@ -15,16 +15,18 @@ export declare function addPlatformImport(path: NodePath<BabelTypes.Program>, t:
 /**
  * Add useColorScheme import to the file or merge with existing react-native import
  */
-export declare function addColorSchemeImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void;
+export declare function addColorSchemeImport(path: NodePath<BabelTypes.Program>, importSource: string, hookName: string, t: typeof BabelTypes): void;
 /**
- * Inject useColorScheme hook call at the top of a function component
+ * Inject color scheme hook call at the top of a function component
  *
  * @param functionPath - Path to the function component
  * @param colorSchemeVariableName - Name for the color scheme variable
+ * @param hookName - Name of the hook to call (e.g., 'useColorScheme')
+ * @param localIdentifier - Local identifier if hook is already imported with an alias
  * @param t - Babel types
  * @returns true if hook was injected, false if already exists
  */
-export declare function injectColorSchemeHook(functionPath: NodePath<BabelTypes.Function>, colorSchemeVariableName: string, t: typeof BabelTypes): boolean;
+export declare function injectColorSchemeHook(functionPath: NodePath<BabelTypes.Function>, colorSchemeVariableName: string, hookName: string, localIdentifier: string | undefined, t: typeof BabelTypes): boolean;
 /**
  * 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

@@ -67,54 +67,64 @@ export function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof
 /**
  * Add useColorScheme import to the file or merge with existing react-native import
  */
-export function addColorSchemeImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+export function addColorSchemeImport(
+  path: NodePath<BabelTypes.Program>,
+  importSource: string,
+  hookName: string,
+  t: typeof BabelTypes,
+): void {
+  // Check if there's already an import from the specified source
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
-    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+    if (t.isImportDeclaration(statement) && statement.source.value === importSource) {
+      // Only consider value imports (not type-only imports which get erased)
+      if (statement.importKind !== "type") {
+        existingValueImport = statement;
+        break; // Found a value import, we can stop
+      }
     }
   }
 
-  if (reactNativeImport) {
-    // Check if useColorScheme is already imported
-    const hasUseColorScheme = reactNativeImport.specifiers.some(
+  // If we found a value import (not type-only), merge with it
+  if (existingValueImport) {
+    // Check if the hook is already imported
+    const hasHook = existingValueImport.specifiers.some(
       (spec) =>
-        t.isImportSpecifier(spec) &&
-        spec.imported.type === "Identifier" &&
-        spec.imported.name === "useColorScheme",
+        t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === hookName,
     );
 
-    if (!hasUseColorScheme) {
-      // Add useColorScheme to existing react-native import
-      reactNativeImport.specifiers.push(
-        t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme")),
-      );
+    if (!hasHook) {
+      // Add hook to existing value import
+      existingValueImport.specifiers.push(t.importSpecifier(t.identifier(hookName), t.identifier(hookName)));
     }
   } else {
-    // Create new react-native import with useColorScheme
+    // No value import exists - create a new one
+    // (Don't merge with type-only imports as they get erased by Babel/TypeScript)
     const importDeclaration = t.importDeclaration(
-      [t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))],
-      t.stringLiteral("react-native"),
+      [t.importSpecifier(t.identifier(hookName), t.identifier(hookName))],
+      t.stringLiteral(importSource),
     );
     path.unshiftContainer("body", importDeclaration);
   }
 }
 
 /**
- * Inject useColorScheme hook call at the top of a function component
+ * Inject color scheme hook call at the top of a function component
  *
  * @param functionPath - Path to the function component
  * @param colorSchemeVariableName - Name for the color scheme variable
+ * @param hookName - Name of the hook to call (e.g., 'useColorScheme')
+ * @param localIdentifier - Local identifier if hook is already imported with an alias
  * @param t - Babel types
  * @returns true if hook was injected, false if already exists
  */
 export function injectColorSchemeHook(
   functionPath: NodePath<BabelTypes.Function>,
   colorSchemeVariableName: string,
+  hookName: string,
+  localIdentifier: string | undefined,
   t: typeof BabelTypes,
 ): boolean {
   let body = functionPath.node.body;
@@ -151,11 +161,16 @@ export function injectColorSchemeHook(
     return false; // Already injected
   }
 
-  // Create: const _twColorScheme = useColorScheme();
+  // Use the local identifier if hook was already imported with an alias,
+  // otherwise use the configured hook name
+  // e.g., import { useTheme as navTheme } → call navTheme()
+  const identifierToCall = localIdentifier ?? hookName;
+
+  // Create: const _twColorScheme = useColorScheme(); (or aliased name if already imported)
   const hookCall = t.variableDeclaration("const", [
     t.variableDeclarator(
       t.identifier(colorSchemeVariableName),
-      t.callExpression(t.identifier("useColorScheme"), []),
+      t.callExpression(t.identifier(identifierToCall), []),
     ),
   ]);
 

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

@@ -14,15 +14,22 @@ export interface TwProcessingState {
     customTheme: CustomTheme;
     schemeModifierConfig: SchemeModifierConfig;
     stylesIdentifier: string;
+    needsColorSchemeImport: boolean;
+    colorSchemeVariableName: string;
+    functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
+    colorSchemeLocalIdentifier?: string;
+    needsPlatformImport: boolean;
 }
 /**
  * Process tw`...` or twStyle('...') call and replace with TwStyle object
  * Generates: { style: styles._base, activeStyle: styles._active, ... }
+ * When color-scheme modifiers are present, generates: { style: [base, _twColorScheme === 'dark' && dark, ...] }
+ * When platform modifiers are present, generates: { style: [base, Platform.select({ ios: ..., android: ... })] }
  */
 export declare function processTwCall(className: string, path: NodePath, state: TwProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: (className: string) => {
     baseClasses: string[];
     modifierClasses: ParsedModifier[];
-}, t: typeof BabelTypes): void;
+}, findComponentScope: (path: NodePath, t: typeof BabelTypes) => NodePath<BabelTypes.Function> | null, t: typeof BabelTypes): void;
 /**
  * Remove tw/twStyle imports from @mgcrea/react-native-tailwind
  * This is called after all tw calls have been transformed