@mgcrea/react-native-tailwind 0.12.1 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",
@@ -68,23 +68,23 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.28.0",
-    "@types/react": "^19.2.6",
-    "@vitest/coverage-v8": "^4.0.13",
+    "@types/react": "^19.2.7",
+    "@vitest/coverage-v8": "^4.0.14",
     "babel-plugin-module-resolver": "^5.0.2",
     "esbuild": "^0.27.0",
     "eslint": "^9.39.1",
     "jest": "^30.2.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.1",
     "prettier-plugin-organize-imports": "^4.3.0",
     "react": "^19.2.0",
     "react-native": "0.82.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.13"
+    "vitest": "^4.0.14"
   },
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "pnpm@10.23.0",
+  "packageManager": "pnpm@10.24.0",
   "publishConfig": {
     "access": "public"
   },

package/src/babel/plugin/componentScope.ts

@@ -0,0 +1,87 @@
+/**
+ * Component scope detection helpers for hook injection
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+
+/**
+ * Check if a function path represents a valid component scope for hook injection
+ * Valid scopes:
+ * - Top-level FunctionDeclaration
+ * - FunctionExpression/ArrowFunctionExpression in top-level VariableDeclarator (with PascalCase name)
+ * - NOT class methods, NOT nested functions, NOT inline callbacks
+ *
+ * @param functionPath - Path to the function to check
+ * @param t - Babel types
+ * @returns true if function is a valid component scope
+ */
+export function isComponentScope(functionPath: NodePath<BabelTypes.Function>, t: typeof BabelTypes): boolean {
+  const node = functionPath.node;
+  const parent = functionPath.parent;
+  const parentPath = functionPath.parentPath;
+
+  // Reject class methods (class components not supported for hooks)
+  if (t.isClassMethod(parent)) {
+    return false;
+  }
+
+  // Reject if inside a class body
+  if (functionPath.findParent((p) => t.isClassBody(p.node))) {
+    return false;
+  }
+
+  // Accept top-level FunctionDeclaration
+  if (t.isFunctionDeclaration(node)) {
+    // Check if it's at program level or in export
+    if (t.isProgram(parent) || t.isExportNamedDeclaration(parent) || t.isExportDefaultDeclaration(parent)) {
+      return true;
+    }
+  }
+
+  // Accept FunctionExpression/ArrowFunctionExpression in VariableDeclarator
+  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
+    if (t.isVariableDeclarator(parent)) {
+      // Check if it's at program level (via VariableDeclaration)
+      const varDeclarationPath = parentPath?.parentPath;
+      if (
+        varDeclarationPath &&
+        t.isVariableDeclaration(varDeclarationPath.node) &&
+        (t.isProgram(varDeclarationPath.parent) || t.isExportNamedDeclaration(varDeclarationPath.parent))
+      ) {
+        // Check for PascalCase naming (component convention)
+        if (t.isIdentifier(parent.id)) {
+          const name = parent.id.name;
+          return /^[A-Z]/.test(name); // Starts with uppercase
+        }
+      }
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Find the nearest valid component scope for hook injection
+ * Climbs the AST from the current path to find a component-level function
+ *
+ * @param path - Starting path (e.g., JSXAttribute)
+ * @param t - Babel types
+ * @returns NodePath to component function, or null if not found
+ */
+export function findComponentScope(
+  path: NodePath,
+  t: typeof BabelTypes,
+): NodePath<BabelTypes.Function> | null {
+  let current = path.getFunctionParent();
+
+  while (current) {
+    if (t.isFunction(current.node) && isComponentScope(current, t)) {
+      return current;
+    }
+    // Climb to next parent function
+    current = current.getFunctionParent();
+  }
+
+  return null;
+}

package/src/babel/plugin/state.ts

@@ -0,0 +1,185 @@
+/**
+ * Plugin state and options types
+ */
+
+import type { NodePath, PluginPass } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import type { SchemeModifierConfig } from "../../types/config.js";
+import type { StyleObject } from "../../types/core.js";
+import type { CustomTheme } from "../config-loader.js";
+import { extractCustomTheme } from "../config-loader.js";
+import { DEFAULT_CLASS_ATTRIBUTES, buildAttributeMatchers } from "../utils/attributeMatchers.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;
+
+  /**
+   * Configuration for the scheme: modifier that expands to both dark: and light: modifiers
+   *
+   * @example
+   * {
+   *   darkSuffix: '-dark',  // scheme:bg-primary -> dark:bg-primary-dark
+   *   lightSuffix: '-light' // scheme:bg-primary -> light:bg-primary-light
+   * }
+   *
+   * @default { darkSuffix: '-dark', lightSuffix: '-light' }
+   */
+  schemeModifier?: {
+    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;
+  };
+};
+
+/**
+ * Plugin state - passed through all visitors
+ */
+export type PluginState = PluginPass & {
+  styleRegistry: Map<string, StyleObject>;
+  hasClassNames: boolean;
+  hasStyleSheetImport: boolean;
+  hasPlatformImport: boolean;
+  needsPlatformImport: boolean;
+  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
+  hasWindowDimensionsImport: boolean;
+  needsWindowDimensionsImport: boolean;
+  windowDimensionsVariableName: string;
+  windowDimensionsLocalIdentifier?: string; // Local identifier if hook is already imported with an alias
+  hasI18nManagerImport: boolean;
+  needsI18nManagerImport: boolean;
+  i18nManagerVariableName: string; // Variable name for the RTL state (e.g., '_twIsRTL')
+  i18nManagerLocalIdentifier?: string; // Local identifier if I18nManager is already imported with an alias
+  customTheme: CustomTheme;
+  schemeModifierConfig: SchemeModifierConfig;
+  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;
+  // Track react-native import path for conditional StyleSheet/Platform injection
+  reactNativeImportPath?: NodePath<BabelTypes.ImportDeclaration>;
+  // Track function components that need colorScheme hook injection
+  functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
+  // Track function components that need windowDimensions hook injection
+  functionComponentsNeedingWindowDimensions: Set<NodePath<BabelTypes.Function>>;
+};
+
+// Default identifier for the generated StyleSheet constant
+export const DEFAULT_STYLES_IDENTIFIER = "_twStyles";
+
+/**
+ * Create initial plugin state for a file
+ *
+ * @param options - Plugin options from babel config
+ * @param filename - Current file being processed
+ * @param colorSchemeImportSource - Where to import the color scheme hook from
+ * @param colorSchemeHookName - Name of the color scheme hook to import
+ * @param schemeModifierConfig - Configuration for scheme: modifier expansion
+ * @returns Initial plugin state
+ */
+export function createInitialState(
+  options: PluginOptions | undefined,
+  filename: string,
+  colorSchemeImportSource: string,
+  colorSchemeHookName: string,
+  schemeModifierConfig: SchemeModifierConfig,
+): Partial<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;
+
+  // Load custom theme from tailwind.config.*
+  const customTheme = extractCustomTheme(filename);
+
+  return {
+    styleRegistry: new Map(),
+    hasClassNames: false,
+    hasStyleSheetImport: false,
+    hasPlatformImport: false,
+    needsPlatformImport: false,
+    hasColorSchemeImport: false,
+    needsColorSchemeImport: false,
+    colorSchemeVariableName: "_twColorScheme",
+    colorSchemeImportSource,
+    colorSchemeHookName,
+    colorSchemeLocalIdentifier: undefined,
+    hasWindowDimensionsImport: false,
+    needsWindowDimensionsImport: false,
+    windowDimensionsVariableName: "_twDimensions",
+    windowDimensionsLocalIdentifier: undefined,
+    hasI18nManagerImport: false,
+    needsI18nManagerImport: false,
+    i18nManagerVariableName: "_twIsRTL",
+    i18nManagerLocalIdentifier: undefined,
+    customTheme,
+    schemeModifierConfig,
+    supportedAttributes: exactMatches,
+    attributePatterns: patterns,
+    stylesIdentifier,
+    twImportNames: new Set(),
+    hasTwImport: false,
+    reactNativeImportPath: undefined,
+    functionComponentsNeedingColorScheme: new Set(),
+    functionComponentsNeedingWindowDimensions: new Set(),
+  };
+}