@mgcrea/react-native-tailwind 0.9.0 → 0.10.0

package/src/babel/utils/dynamicProcessing.ts

@@ -2,7 +2,10 @@
  * Utility functions for processing dynamic className expressions
  */
 
+import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
+import type { ParsedModifier } from "../../parser/index.js";
+import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -12,9 +15,59 @@ import type { StyleObject } from "../../types/core.js";
 export interface DynamicProcessingState {
   styleRegistry: Map<string, StyleObject>;
   customColors: Record<string, string>;
+  schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
+  needsPlatformImport: boolean;
+  needsColorSchemeImport: boolean;
+  colorSchemeVariableName: string;
+  functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
 }
 
+/**
+ * Type for the splitModifierClasses function
+ */
+export type SplitModifierClassesFn = (className: string) => {
+  baseClasses: string[];
+  modifierClasses: ParsedModifier[];
+};
+
+/**
+ * Type for the processPlatformModifiers function
+ */
+export type ProcessPlatformModifiersFn = (
+  modifiers: ParsedModifier[],
+  state: DynamicProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+) => BabelTypes.Expression;
+
+/**
+ * Type for the processColorSchemeModifiers function
+ */
+export type ProcessColorSchemeModifiersFn = (
+  modifiers: ParsedModifier[],
+  state: DynamicProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+) => BabelTypes.Expression[];
+
+/**
+ * Type for modifier type guard functions
+ */
+export type ModifierTypeGuardFn = (modifier: unknown) => boolean;
+
+/**
+ * Type for the expandSchemeModifier function
+ */
+export type ExpandSchemeModifierFn = (
+  modifier: ParsedModifier,
+  customColors: Record<string, string>,
+  darkSuffix: string,
+  lightSuffix: string,
+) => ParsedModifier[];
+
 /**
  * Result of processing a dynamic expression
  */
@@ -34,21 +87,71 @@ export function processDynamicExpression(
   state: DynamicProcessingState,
   parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
   generateStyleKey: (className: string) => string,
+  splitModifierClasses: SplitModifierClassesFn,
+  processPlatformModifiers: ProcessPlatformModifiersFn,
+  processColorSchemeModifiers: ProcessColorSchemeModifiersFn,
+  componentScope: NodePath<BabelTypes.Function> | null,
+  isPlatformModifier: ModifierTypeGuardFn,
+  isColorSchemeModifier: ModifierTypeGuardFn,
+  isSchemeModifier: ModifierTypeGuardFn,
+  expandSchemeModifier: ExpandSchemeModifierFn,
   t: typeof BabelTypes,
 ) {
   // Handle template literals: `m-4 ${condition ? "p-4" : "p-2"}`
   if (t.isTemplateLiteral(expression)) {
-    return processTemplateLiteral(expression, state, parseClassName, generateStyleKey, t);
+    return processTemplateLiteral(
+      expression,
+      state,
+      parseClassName,
+      generateStyleKey,
+      splitModifierClasses,
+      processPlatformModifiers,
+      processColorSchemeModifiers,
+      componentScope,
+      isPlatformModifier,
+      isColorSchemeModifier,
+      isSchemeModifier,
+      expandSchemeModifier,
+      t,
+    );
   }
 
   // Handle conditional expressions: condition ? "m-4" : "p-2"
   if (t.isConditionalExpression(expression)) {
-    return processConditionalExpression(expression, state, parseClassName, generateStyleKey, t);
+    return processConditionalExpression(
+      expression,
+      state,
+      parseClassName,
+      generateStyleKey,
+      splitModifierClasses,
+      processPlatformModifiers,
+      processColorSchemeModifiers,
+      componentScope,
+      isPlatformModifier,
+      isColorSchemeModifier,
+      isSchemeModifier,
+      expandSchemeModifier,
+      t,
+    );
   }
 
   // Handle logical expressions: condition && "m-4"
   if (t.isLogicalExpression(expression)) {
-    return processLogicalExpression(expression, state, parseClassName, generateStyleKey, t);
+    return processLogicalExpression(
+      expression,
+      state,
+      parseClassName,
+      generateStyleKey,
+      splitModifierClasses,
+      processPlatformModifiers,
+      processColorSchemeModifiers,
+      componentScope,
+      isPlatformModifier,
+      isColorSchemeModifier,
+      isSchemeModifier,
+      expandSchemeModifier,
+      t,
+    );
   }
 
   // Unsupported expression type
@@ -63,9 +166,17 @@ function processTemplateLiteral(
   state: DynamicProcessingState,
   parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
   generateStyleKey: (className: string) => string,
+  splitModifierClasses: SplitModifierClassesFn,
+  processPlatformModifiers: ProcessPlatformModifiersFn,
+  processColorSchemeModifiers: ProcessColorSchemeModifiersFn,
+  componentScope: NodePath<BabelTypes.Function> | null,
+  isPlatformModifier: ModifierTypeGuardFn,
+  isColorSchemeModifier: ModifierTypeGuardFn,
+  isSchemeModifier: ModifierTypeGuardFn,
+  expandSchemeModifier: ExpandSchemeModifierFn,
   t: typeof BabelTypes,
 ) {
-  const parts: BabelTypes.MemberExpression[] = [];
+  const parts: BabelTypes.Expression[] = [];
   const staticParts: string[] = [];
 
   // Process quasis (static parts) and expressions (dynamic parts)
@@ -75,16 +186,31 @@ function processTemplateLiteral(
 
     // 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)));
+      // Parse static classes with modifier support
+      const processedExpression = processStringOrExpressionHelper(
+        t.stringLiteral(staticText),
+        state,
+        parseClassName,
+        generateStyleKey,
+        splitModifierClasses,
+        processPlatformModifiers,
+        processColorSchemeModifiers,
+        componentScope,
+        isPlatformModifier,
+        isColorSchemeModifier,
+        isSchemeModifier,
+        expandSchemeModifier,
+        t,
+      );
+
+      if (processedExpression) {
+        staticParts.push(staticText);
+        // Handle array or single expression
+        if (t.isArrayExpression(processedExpression)) {
+          parts.push(...(processedExpression.elements as BabelTypes.Expression[]));
+        } else {
+          parts.push(processedExpression);
+        }
       }
     }
 
@@ -98,14 +224,21 @@ function processTemplateLiteral(
         state,
         parseClassName,
         generateStyleKey,
+        splitModifierClasses,
+        processPlatformModifiers,
+        processColorSchemeModifiers,
+        componentScope,
+        isPlatformModifier,
+        isColorSchemeModifier,
+        isSchemeModifier,
+        expandSchemeModifier,
         t,
       );
       if (result) {
-        parts.push(result.expression as BabelTypes.MemberExpression);
+        parts.push(result.expression);
       } else {
         // For unsupported expressions, keep them as-is
-        // This won't work at runtime but maintains the structure
-        parts.push(expr as BabelTypes.MemberExpression);
+        parts.push(expr as BabelTypes.Expression);
       }
     }
   }
@@ -131,10 +264,46 @@ function processConditionalExpression(
   state: DynamicProcessingState,
   parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
   generateStyleKey: (className: string) => string,
+  splitModifierClasses: SplitModifierClassesFn,
+  processPlatformModifiers: ProcessPlatformModifiersFn,
+  processColorSchemeModifiers: ProcessColorSchemeModifiersFn,
+  componentScope: NodePath<BabelTypes.Function> | null,
+  isPlatformModifier: ModifierTypeGuardFn,
+  isColorSchemeModifier: ModifierTypeGuardFn,
+  isSchemeModifier: ModifierTypeGuardFn,
+  expandSchemeModifier: ExpandSchemeModifierFn,
   t: typeof BabelTypes,
 ) {
-  const consequent = processStringOrExpression(node.consequent, state, parseClassName, generateStyleKey, t);
-  const alternate = processStringOrExpression(node.alternate, state, parseClassName, generateStyleKey, t);
+  const consequent = processStringOrExpressionHelper(
+    node.consequent,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    processPlatformModifiers,
+    processColorSchemeModifiers,
+    componentScope,
+    isPlatformModifier,
+    isColorSchemeModifier,
+    isSchemeModifier,
+    expandSchemeModifier,
+    t,
+  );
+  const alternate = processStringOrExpressionHelper(
+    node.alternate,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    processPlatformModifiers,
+    processColorSchemeModifiers,
+    componentScope,
+    isPlatformModifier,
+    isColorSchemeModifier,
+    isSchemeModifier,
+    expandSchemeModifier,
+    t,
+  );
 
   if (!consequent && !alternate) {
     return null;
@@ -143,8 +312,8 @@ function processConditionalExpression(
   // Build conditional: condition ? consequentStyle : alternateStyle
   const expression = t.conditionalExpression(
     node.test,
-    (consequent as BabelTypes.Expression) ?? t.nullLiteral(),
-    (alternate as BabelTypes.Expression) ?? t.nullLiteral(),
+    consequent ?? t.nullLiteral(),
+    alternate ?? t.nullLiteral(),
   );
 
   return { expression };
@@ -158,6 +327,14 @@ function processLogicalExpression(
   state: DynamicProcessingState,
   parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
   generateStyleKey: (className: string) => string,
+  splitModifierClasses: SplitModifierClassesFn,
+  processPlatformModifiers: ProcessPlatformModifiersFn,
+  processColorSchemeModifiers: ProcessColorSchemeModifiersFn,
+  componentScope: NodePath<BabelTypes.Function> | null,
+  isPlatformModifier: ModifierTypeGuardFn,
+  isColorSchemeModifier: ModifierTypeGuardFn,
+  isSchemeModifier: ModifierTypeGuardFn,
+  expandSchemeModifier: ExpandSchemeModifierFn,
   t: typeof BabelTypes,
 ) {
   // Only handle AND (&&) expressions
@@ -165,28 +342,52 @@ function processLogicalExpression(
     return null;
   }
 
-  const right = processStringOrExpression(node.right, state, parseClassName, generateStyleKey, t);
+  const right = processStringOrExpressionHelper(
+    node.right,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    processPlatformModifiers,
+    processColorSchemeModifiers,
+    componentScope,
+    isPlatformModifier,
+    isColorSchemeModifier,
+    isSchemeModifier,
+    expandSchemeModifier,
+    t,
+  );
 
   if (!right) {
     return null;
   }
 
   // Build logical: condition && style
-  const expression = t.logicalExpression("&&", node.left, right as BabelTypes.Expression);
+  const expression = t.logicalExpression("&&", node.left, right);
 
   return { expression };
 }
 
 /**
  * Process a node that might be a string literal or another expression
+ *
+ * This helper is called by processStringOrExpression below
  */
-function processStringOrExpression(
+function processStringOrExpressionHelper(
   node: BabelTypes.StringLiteral | BabelTypes.Expression,
   state: DynamicProcessingState,
   parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
   generateStyleKey: (className: string) => string,
+  splitModifierClasses: SplitModifierClassesFn,
+  processPlatformModifiers: ProcessPlatformModifiersFn,
+  processColorSchemeModifiers: ProcessColorSchemeModifiersFn,
+  componentScope: NodePath<BabelTypes.Function> | null,
+  isPlatformModifier: ModifierTypeGuardFn,
+  isColorSchemeModifier: ModifierTypeGuardFn,
+  isSchemeModifier: ModifierTypeGuardFn,
+  expandSchemeModifier: ExpandSchemeModifierFn,
   t: typeof BabelTypes,
-) {
+): BabelTypes.Expression | BabelTypes.ArrayExpression | null {
   // Handle string literals
   if (t.isStringLiteral(node)) {
     const className = node.value.trim();
@@ -194,27 +395,145 @@ function processStringOrExpression(
       return null;
     }
 
-    // Parse and register styles
-    const styleObject = parseClassName(className, state.customColors);
-    const styleKey = generateStyleKey(className);
-    state.styleRegistry.set(styleKey, styleObject);
+    // Split into base and modifier classes
+    const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+
+    // Expand scheme: modifiers into dark: and light: modifiers
+    const modifierClasses: Array<import("../../parser/index.js").ParsedModifier> = [];
+    for (const modifier of rawModifierClasses) {
+      if (isSchemeModifier(modifier.modifier)) {
+        // Expand scheme: into dark: and light:
+        const expanded = expandSchemeModifier(
+          modifier,
+          state.customColors,
+          state.schemeModifierConfig.darkSuffix ?? "-dark",
+          state.schemeModifierConfig.lightSuffix ?? "-light",
+        );
+        modifierClasses.push(...expanded);
+      } else {
+        // Keep other modifiers as-is
+        modifierClasses.push(modifier);
+      }
+    }
+
+    // Separate modifiers by type
+    const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+    const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+
+    const styleElements: BabelTypes.Expression[] = [];
 
-    return t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    // Process base classes
+    if (baseClasses.length > 0) {
+      const baseClassName = baseClasses.join(" ");
+      const styleObject = parseClassName(baseClassName, state.customColors);
+      const styleKey = generateStyleKey(baseClassName);
+      state.styleRegistry.set(styleKey, styleObject);
+      styleElements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+    }
+
+    // Process platform modifiers
+    if (platformModifiers.length > 0) {
+      state.needsPlatformImport = true;
+      const platformExpression = processPlatformModifiers(
+        platformModifiers,
+        state,
+        parseClassName,
+        generateStyleKey,
+        t,
+      );
+      styleElements.push(platformExpression);
+    }
+
+    // Process color scheme modifiers (only if component scope exists)
+    if (colorSchemeModifiers.length > 0) {
+      if (componentScope) {
+        state.needsColorSchemeImport = true;
+        state.functionComponentsNeedingColorScheme.add(componentScope);
+        const colorSchemeExpressions = processColorSchemeModifiers(
+          colorSchemeModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t,
+        );
+        styleElements.push(...colorSchemeExpressions);
+      } else {
+        // Warn in development: color scheme modifiers without valid component scope
+        // Skip transformation - these modifiers will be ignored
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            "[react-native-tailwind] dark:/light: modifiers in dynamic expressions require a function component scope. " +
+              "These modifiers will be ignored.",
+          );
+        }
+      }
+    }
+
+    // Return single element or array
+    if (styleElements.length === 0) {
+      return null;
+    }
+    if (styleElements.length === 1) {
+      return styleElements[0];
+    }
+    return t.arrayExpression(styleElements);
   }
 
   // Handle nested expressions recursively
   if (t.isConditionalExpression(node)) {
-    const result = processConditionalExpression(node, state, parseClassName, generateStyleKey, t);
+    const result = processConditionalExpression(
+      node,
+      state,
+      parseClassName,
+      generateStyleKey,
+      splitModifierClasses,
+      processPlatformModifiers,
+      processColorSchemeModifiers,
+      componentScope,
+      isPlatformModifier,
+      isColorSchemeModifier,
+      isSchemeModifier,
+      expandSchemeModifier,
+      t,
+    );
     return result?.expression ?? null;
   }
 
   if (t.isLogicalExpression(node)) {
-    const result = processLogicalExpression(node, state, parseClassName, generateStyleKey, t);
+    const result = processLogicalExpression(
+      node,
+      state,
+      parseClassName,
+      generateStyleKey,
+      splitModifierClasses,
+      processPlatformModifiers,
+      processColorSchemeModifiers,
+      componentScope,
+      isPlatformModifier,
+      isColorSchemeModifier,
+      isSchemeModifier,
+      expandSchemeModifier,
+      t,
+    );
     return result?.expression ?? null;
   }
 
   if (t.isTemplateLiteral(node)) {
-    const result = processTemplateLiteral(node, state, parseClassName, generateStyleKey, t);
+    const result = processTemplateLiteral(
+      node,
+      state,
+      parseClassName,
+      generateStyleKey,
+      splitModifierClasses,
+      processPlatformModifiers,
+      processColorSchemeModifiers,
+      componentScope,
+      isPlatformModifier,
+      isColorSchemeModifier,
+      isSchemeModifier,
+      expandSchemeModifier,
+      t,
+    );
     return result?.expression ?? null;
   }
 

package/src/babel/utils/styleInjection.ts

@@ -7,16 +7,33 @@ import type * as BabelTypes from "@babel/types";
 import type { StyleObject } from "../../types/core.js";
 
 /**
- * Add StyleSheet import to the file
+ * Add StyleSheet import to the file or merge with existing react-native import
  */
 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"),
-  );
+  // Check if there's already a react-native import
+  const body = path.node.body;
+  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
 
-  // Add import at the top of the file
-  path.unshiftContainer("body", importDeclaration);
+  if (reactNativeImport) {
+    // Add StyleSheet to existing react-native import
+    reactNativeImport.specifiers.push(
+      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+    );
+  } else {
+    // Create new react-native import with StyleSheet
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
+      t.stringLiteral("react-native"),
+    );
+    path.unshiftContainer("body", importDeclaration);
+  }
 }
 
 /**
@@ -47,6 +64,107 @@ 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
+  const body = path.node.body;
+  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
+
+  if (reactNativeImport) {
+    // Check if useColorScheme is already imported
+    const hasUseColorScheme = reactNativeImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) &&
+        spec.imported.type === "Identifier" &&
+        spec.imported.name === "useColorScheme",
+    );
+
+    if (!hasUseColorScheme) {
+      // Add useColorScheme to existing react-native import
+      reactNativeImport.specifiers.push(
+        t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme")),
+      );
+    }
+  } else {
+    // Create new react-native import with useColorScheme
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))],
+      t.stringLiteral("react-native"),
+    );
+    path.unshiftContainer("body", importDeclaration);
+  }
+}
+
+/**
+ * Inject useColorScheme 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 t - Babel types
+ * @returns true if hook was injected, false if already exists
+ */
+export function injectColorSchemeHook(
+  functionPath: NodePath<BabelTypes.Function>,
+  colorSchemeVariableName: string,
+  t: typeof BabelTypes,
+): boolean {
+  let body = functionPath.node.body;
+
+  // Handle concise arrow functions: () => <JSX />
+  // Convert to block statement: () => { const _twColorScheme = useColorScheme(); return <JSX />; }
+  if (!t.isBlockStatement(body)) {
+    if (t.isArrowFunctionExpression(functionPath.node) && t.isExpression(body)) {
+      // Convert concise body to block statement with return
+      const returnStatement = t.returnStatement(body);
+      const blockStatement = t.blockStatement([returnStatement]);
+      functionPath.node.body = blockStatement;
+      body = blockStatement;
+    } else {
+      // Other non-block functions (shouldn't happen for components, but be safe)
+      return false;
+    }
+  }
+
+  // Check if hook is already injected
+  const hasHook = body.body.some((statement) => {
+    if (
+      t.isVariableDeclaration(statement) &&
+      statement.declarations.length > 0 &&
+      t.isVariableDeclarator(statement.declarations[0])
+    ) {
+      const declarator = statement.declarations[0];
+      return t.isIdentifier(declarator.id) && declarator.id.name === colorSchemeVariableName;
+    }
+    return false;
+  });
+
+  if (hasHook) {
+    return false; // Already injected
+  }
+
+  // Create: const _twColorScheme = useColorScheme();
+  const hookCall = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(colorSchemeVariableName),
+      t.callExpression(t.identifier("useColorScheme"), []),
+    ),
+  ]);
+
+  // Insert at the beginning of function body
+  body.body.unshift(hookCall);
+
+  return true;
+}
+
 /**
  * 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