@mgcrea/react-native-tailwind 0.9.1 → 0.11.0

package/src/babel/plugin.ts

@@ -7,7 +7,10 @@ import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
 import type { ParsedModifier, StateModifierType } from "../parser/index.js";
 import {
+  expandSchemeModifier,
+  isColorSchemeModifier,
   isPlatformModifier,
+  isSchemeModifier,
   isStateModifier,
   parseClassName,
   parsePlaceholderClasses,
@@ -15,20 +18,29 @@ import {
 } from "../parser/index.js";
 import type { StyleObject } from "../types/core.js";
 import { generateStyleKey } from "../utils/styleKey.js";
-import { extractCustomColors } from "./config-loader.js";
+import type { CustomTheme } from "./config-loader.js";
+import { extractCustomTheme } from "./config-loader.js";
 
 // Import utility functions
+import type { SchemeModifierConfig } from "../types/config.js";
 import {
   DEFAULT_CLASS_ATTRIBUTES,
   buildAttributeMatchers,
   getTargetStyleProp,
   isAttributeSupported,
 } from "./utils/attributeMatchers.js";
+import { processColorSchemeModifiers } from "./utils/colorSchemeModifierProcessing.js";
 import { getComponentModifierSupport, getStatePropertyForModifier } from "./utils/componentSupport.js";
 import { processDynamicExpression } from "./utils/dynamicProcessing.js";
 import { createStyleFunction, processStaticClassNameWithModifiers } from "./utils/modifierProcessing.js";
 import { processPlatformModifiers } from "./utils/platformModifierProcessing.js";
-import { addPlatformImport, addStyleSheetImport, injectStylesAtTop } from "./utils/styleInjection.js";
+import {
+  addColorSchemeImport,
+  addPlatformImport,
+  addStyleSheetImport,
+  injectColorSchemeHook,
+  injectStylesAtTop,
+} from "./utils/styleInjection.js";
 import {
   addOrMergePlaceholderTextColorProp,
   findStyleAttribute,
@@ -61,6 +73,22 @@ export type PluginOptions = {
    * @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;
+  };
 };
 
 type PluginState = PluginPass & {
@@ -69,7 +97,11 @@ type PluginState = PluginPass & {
   hasStyleSheetImport: boolean;
   hasPlatformImport: boolean;
   needsPlatformImport: boolean;
-  customColors: Record<string, string>;
+  hasColorSchemeImport: boolean;
+  needsColorSchemeImport: boolean;
+  colorSchemeVariableName: string;
+  customTheme: CustomTheme;
+  schemeModifierConfig: SchemeModifierConfig;
   supportedAttributes: Set<string>;
   attributePatterns: RegExp[];
   stylesIdentifier: string;
@@ -78,11 +110,91 @@ type PluginState = PluginPass & {
   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>>;
 };
 
 // Default identifier for the generated StyleSheet constant
 const DEFAULT_STYLES_IDENTIFIER = "_twStyles";
 
+/**
+ * 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
+ */
+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
+ */
+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;
+}
+
 export default function reactNativeTailwindBabelPlugin(
   { types: t }: { types: typeof BabelTypes },
   options?: PluginOptions,
@@ -92,6 +204,12 @@ export default function reactNativeTailwindBabelPlugin(
   const { exactMatches, patterns } = buildAttributeMatchers(attributes);
   const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
 
+  // Scheme modifier configuration from plugin options
+  const schemeModifierConfig = {
+    darkSuffix: options?.schemeModifier?.darkSuffix ?? "-dark",
+    lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light",
+  };
+
   return {
     name: "react-native-tailwind",
 
@@ -104,14 +222,21 @@ export default function reactNativeTailwindBabelPlugin(
           state.hasStyleSheetImport = false;
           state.hasPlatformImport = false;
           state.needsPlatformImport = false;
+          state.hasColorSchemeImport = false;
+          state.needsColorSchemeImport = false;
+          state.colorSchemeVariableName = "_twColorScheme";
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
           state.twImportNames = new Set();
           state.hasTwImport = false;
+          state.functionComponentsNeedingColorScheme = new Set();
+
+          // Load custom theme from tailwind.config.*
+          state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
 
-          // Load custom colors from tailwind.config.*
-          state.customColors = extractCustomColors(state.file.opts.filename ?? "");
+          // Use scheme modifier config from plugin options
+          state.schemeModifierConfig = schemeModifierConfig;
         },
 
         exit(path, state) {
@@ -135,6 +260,18 @@ export default function reactNativeTailwindBabelPlugin(
             addPlatformImport(path, t);
           }
 
+          // Add useColorScheme import if color scheme modifiers were used and not already present
+          if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
+            addColorSchemeImport(path, t);
+          }
+
+          // Inject useColorScheme hook in function components that need it
+          if (state.needsColorSchemeImport) {
+            for (const functionPath of state.functionComponentsNeedingColorScheme) {
+              injectColorSchemeHook(functionPath, state.colorSchemeVariableName, 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);
@@ -163,6 +300,13 @@ 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) {
@@ -173,6 +317,10 @@ 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;
         }
@@ -323,12 +471,31 @@ export default function reactNativeTailwindBabelPlugin(
 
           state.hasClassNames = true;
 
-          // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:)
-          const { baseClasses, modifierClasses } = splitModifierClasses(className);
+          // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:, dark:, light:, scheme:)
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+
+          // Expand scheme: modifiers into dark: and light: modifiers
+          const modifierClasses: ParsedModifier[] = [];
+          for (const modifier of rawModifierClasses) {
+            if (isSchemeModifier(modifier.modifier)) {
+              // Expand scheme: into dark: and light:
+              const expanded = expandSchemeModifier(
+                modifier,
+                state.customTheme.colors ?? {},
+                state.schemeModifierConfig.darkSuffix,
+                state.schemeModifierConfig.lightSuffix,
+              );
+              modifierClasses.push(...expanded);
+            } else {
+              // Keep other modifiers as-is
+              modifierClasses.push(modifier);
+            }
+          }
 
           // Separate modifiers by type
           const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
           const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+          const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
           const stateModifiers = modifierClasses.filter(
             (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder",
           );
@@ -341,7 +508,7 @@ export default function reactNativeTailwindBabelPlugin(
 
             if (componentSupport?.supportedModifiers.includes("placeholder")) {
               const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
-              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customColors);
+              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
 
               if (placeholderColor) {
                 // Add or merge placeholderTextColor prop
@@ -359,24 +526,43 @@ export default function reactNativeTailwindBabelPlugin(
 
           // Handle combination of modifiers
           const hasPlatformModifiers = platformModifiers.length > 0;
+          const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
           const hasStateModifiers = stateModifiers.length > 0;
           const hasBaseClasses = baseClasses.length > 0;
 
-          // If we have both state and platform modifiers, or platform modifiers with complex state,
-          // we need to combine them in an array expression wrapped in an arrow function
-          if (hasStateModifiers && hasPlatformModifiers) {
+          // If we have color scheme modifiers, we need to track the parent function component
+          let componentScope: NodePath<BabelTypes.Function> | null = null;
+          if (hasColorSchemeModifiers) {
+            componentScope = findComponentScope(path, t);
+            if (componentScope) {
+              state.functionComponentsNeedingColorScheme.add(componentScope);
+            } else {
+              // Warn if color scheme modifiers used in invalid context (class component, nested function)
+              if (process.env.NODE_ENV !== "production") {
+                console.warn(
+                  `[react-native-tailwind] dark:/light: modifiers require a function component scope. ` +
+                    `Found in non-component context at ${state.file.opts.filename ?? "unknown"}. ` +
+                    `These modifiers are not supported in class components or nested callbacks.`,
+                );
+              }
+            }
+          }
+
+          // If we have multiple modifier types, combine them in an array expression
+          // For state modifiers, wrap in arrow function; for color scheme, they're just conditionals
+          if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
             // Get the JSX opening element for component support checking
             const jsxOpeningElement = path.parent;
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
 
             if (componentSupport) {
-              // Build style array: [baseStyle, Platform.select(...), stateConditionals]
+              // Build style array: [baseStyle, Platform.select(...), colorSchemeConditionals, stateConditionals]
               const styleArrayElements: BabelTypes.Expression[] = [];
 
               // Add base classes
               if (hasBaseClasses) {
                 const baseClassName = baseClasses.join(" ");
-                const baseStyleObject = parseClassName(baseClassName, state.customColors);
+                const baseStyleObject = parseClassName(baseClassName, state.customTheme);
                 const baseStyleKey = generateStyleKey(baseClassName);
                 state.styleRegistry.set(baseStyleKey, baseStyleObject);
                 styleArrayElements.push(
@@ -385,14 +571,28 @@ export default function reactNativeTailwindBabelPlugin(
               }
 
               // Add platform modifiers as Platform.select()
-              const platformSelectExpression = processPlatformModifiers(
-                platformModifiers,
-                state,
-                parseClassName,
-                generateStyleKey,
-                t,
-              );
-              styleArrayElements.push(platformSelectExpression);
+              if (hasPlatformModifiers) {
+                const platformSelectExpression = processPlatformModifiers(
+                  platformModifiers,
+                  state,
+                  parseClassName,
+                  generateStyleKey,
+                  t,
+                );
+                styleArrayElements.push(platformSelectExpression);
+              }
+
+              // Add color scheme modifiers as conditionals (only if component scope exists)
+              if (hasColorSchemeModifiers && componentScope) {
+                const colorSchemeConditionals = processColorSchemeModifiers(
+                  colorSchemeModifiers,
+                  state,
+                  parseClassName,
+                  generateStyleKey,
+                  t,
+                );
+                styleArrayElements.push(...colorSchemeConditionals);
+              }
 
               // Add state modifiers as conditionals
               // Group by modifier type
@@ -412,7 +612,7 @@ export default function reactNativeTailwindBabelPlugin(
                 }
 
                 const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-                const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+                const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
                 const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
                 state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 
@@ -446,15 +646,15 @@ export default function reactNativeTailwindBabelPlugin(
             }
           }
 
-          // Handle platform-only modifiers (no state modifiers)
-          if (hasPlatformModifiers && !hasStateModifiers) {
-            // Build style array/expression: [baseStyle, Platform.select(...)]
+          // Handle platform and/or color scheme modifiers (no state modifiers)
+          if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
+            // Build style array/expression: [baseStyle, Platform.select(...), colorSchemeConditionals]
             const styleExpressions: BabelTypes.Expression[] = [];
 
             // Add base classes
             if (hasBaseClasses) {
               const baseClassName = baseClasses.join(" ");
-              const baseStyleObject = parseClassName(baseClassName, state.customColors);
+              const baseStyleObject = parseClassName(baseClassName, state.customTheme);
               const baseStyleKey = generateStyleKey(baseClassName);
               state.styleRegistry.set(baseStyleKey, baseStyleObject);
               styleExpressions.push(
@@ -463,14 +663,28 @@ export default function reactNativeTailwindBabelPlugin(
             }
 
             // Add platform modifiers as Platform.select()
-            const platformSelectExpression = processPlatformModifiers(
-              platformModifiers,
-              state,
-              parseClassName,
-              generateStyleKey,
-              t,
-            );
-            styleExpressions.push(platformSelectExpression);
+            if (hasPlatformModifiers) {
+              const platformSelectExpression = processPlatformModifiers(
+                platformModifiers,
+                state,
+                parseClassName,
+                generateStyleKey,
+                t,
+              );
+              styleExpressions.push(platformSelectExpression);
+            }
+
+            // Add color scheme modifiers as conditionals (only if we have a valid component scope)
+            if (hasColorSchemeModifiers && componentScope) {
+              const colorSchemeConditionals = processColorSchemeModifiers(
+                colorSchemeModifiers,
+                state,
+                parseClassName,
+                generateStyleKey,
+                t,
+              );
+              styleExpressions.push(...colorSchemeConditionals);
+            }
 
             // Generate style attribute
             const styleExpression =
@@ -602,7 +816,7 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
-          const styleObject = parseClassName(classNameForStyle, state.customColors);
+          const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
           state.styleRegistry.set(styleKey, styleObject);
 
@@ -629,8 +843,25 @@ export default function reactNativeTailwindBabelPlugin(
           }
 
           try {
-            // Process dynamic expression
-            const result = processDynamicExpression(expression, state, parseClassName, generateStyleKey, t);
+            // Find component scope for color scheme modifiers
+            const componentScope = findComponentScope(path, t);
+
+            // Process dynamic expression with modifier support
+            const result = processDynamicExpression(
+              expression,
+              state,
+              parseClassName,
+              generateStyleKey,
+              splitModifierClasses,
+              processPlatformModifiers,
+              processColorSchemeModifiers,
+              componentScope,
+              isPlatformModifier as (modifier: unknown) => boolean,
+              isColorSchemeModifier as (modifier: unknown) => boolean,
+              isSchemeModifier as (modifier: unknown) => boolean,
+              expandSchemeModifier,
+              t,
+            );
 
             if (result) {
               state.hasClassNames = true;

package/src/babel/utils/colorSchemeModifierProcessing.ts

@@ -0,0 +1,89 @@
+/**
+ * Utility functions for processing color scheme modifiers (dark:, light:)
+ */
+
+import type * as BabelTypes from "@babel/types";
+import type { ColorSchemeModifierType, CustomTheme, ParsedModifier } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Plugin state interface (subset needed for color scheme modifier processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface ColorSchemeModifierProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customTheme: CustomTheme;
+  stylesIdentifier: string;
+  needsColorSchemeImport: boolean;
+  colorSchemeVariableName: string;
+}
+
+/**
+ * Process color scheme modifiers and generate conditional style expressions
+ *
+ * @param colorSchemeModifiers - Array of parsed color scheme 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 Array of AST nodes for conditional expressions
+ *
+ * @example
+ * Input: [{ modifier: "dark", baseClass: "bg-gray-900" }, { modifier: "light", baseClass: "bg-white" }]
+ * Output: [
+ *   _twColorScheme === 'dark' && styles._dark_bg_gray_900,
+ *   _twColorScheme === 'light' && styles._light_bg_white
+ * ]
+ */
+export function processColorSchemeModifiers(
+  colorSchemeModifiers: ParsedModifier[],
+  state: ColorSchemeModifierProcessingState,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+): BabelTypes.Expression[] {
+  // Mark that we need useColorScheme import and hook injection
+  state.needsColorSchemeImport = true;
+
+  // Group modifiers by color scheme (dark, light)
+  const modifiersByScheme = new Map<ColorSchemeModifierType, ParsedModifier[]>();
+
+  for (const mod of colorSchemeModifiers) {
+    const scheme = mod.modifier as ColorSchemeModifierType;
+    if (!modifiersByScheme.has(scheme)) {
+      modifiersByScheme.set(scheme, []);
+    }
+    const schemeGroup = modifiersByScheme.get(scheme);
+    if (schemeGroup) {
+      schemeGroup.push(mod);
+    }
+  }
+
+  // Build conditional expressions for each color scheme
+  const conditionalExpressions: BabelTypes.Expression[] = [];
+
+  for (const [scheme, modifiers] of modifiersByScheme) {
+    // Parse all classes for this color scheme together
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName(classNames, state.customTheme);
+    const styleKey = generateStyleKey(`${scheme}_${classNames}`);
+
+    // Register style in the registry
+    state.styleRegistry.set(styleKey, styleObject);
+
+    // Create conditional: _twColorScheme === 'dark' && styles._dark_bg_gray_900
+    const colorSchemeCheck = t.binaryExpression(
+      "===",
+      t.identifier(state.colorSchemeVariableName),
+      t.stringLiteral(scheme),
+    );
+
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+
+    const conditionalExpression = t.logicalExpression("&&", colorSchemeCheck, styleReference);
+
+    conditionalExpressions.push(conditionalExpression);
+  }
+
+  return conditionalExpressions;
+}