@mgcrea/react-native-tailwind 0.9.1 → 0.11.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 { CustomTheme, ParsedModifier } from "../../parser/index.js";
+import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -11,10 +14,60 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface DynamicProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
+  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, customTheme?: CustomTheme) => 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, customTheme?: CustomTheme) => 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
  */
@@ -32,23 +85,73 @@ export type DynamicExpressionResult = {
 export function processDynamicExpression(
   expression: BabelTypes.Expression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => 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
@@ -61,11 +164,19 @@ export function processDynamicExpression(
 function processTemplateLiteral(
   node: BabelTypes.TemplateLiteral,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => 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);
       }
     }
   }
@@ -129,12 +262,48 @@ function processTemplateLiteral(
 function processConditionalExpression(
   node: BabelTypes.ConditionalExpression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => 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 };
@@ -156,8 +325,16 @@ function processConditionalExpression(
 function processLogicalExpression(
   node: BabelTypes.LogicalExpression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => 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,
+  parseClassName: (className: string, customTheme?: CustomTheme) => 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.customTheme.colors ?? {},
+          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[] = [];
+
+    // Process base classes
+    if (baseClasses.length > 0) {
+      const baseClassName = baseClasses.join(" ");
+      const styleObject = parseClassName(baseClassName, state.customTheme);
+      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);
+    }
 
-    return t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    // 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/modifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 import { getStatePropertyForModifier } from "./componentSupport.js";
 
@@ -13,7 +13,7 @@ import { getStatePropertyForModifier } from "./componentSupport.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface ModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
 }
 
@@ -24,7 +24,7 @@ export interface ModifierProcessingState {
 export function processStaticClassNameWithModifiers(
   className: string,
   state: ModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
   t: typeof BabelTypes,
@@ -35,7 +35,7 @@ export function processStaticClassNameWithModifiers(
   let baseStyleExpression: BabelTypes.Node | null = null;
   if (baseClasses.length > 0) {
     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);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -66,7 +66,7 @@ export function processStaticClassNameWithModifiers(
   for (const [modifierType, modifiers] of modifiersByType) {
     // Parse all modifier classes together
     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);
 

package/src/babel/utils/platformModifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier, PlatformModifierType } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier, PlatformModifierType } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface PlatformModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
   needsPlatformImport: boolean;
 }
@@ -34,7 +34,7 @@ export interface PlatformModifierProcessingState {
 export function processPlatformModifiers(
   platformModifiers: ParsedModifier[],
   state: PlatformModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ): BabelTypes.Expression {
@@ -61,7 +61,7 @@ export function processPlatformModifiers(
   for (const [platform, modifiers] of modifiersByPlatform) {
     // Parse all classes for this platform together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName(classNames, state.customColors);
+    const styleObject = parseClassName(classNames, state.customTheme);
     const styleKey = generateStyleKey(`${platform}_${classNames}`);
 
     // Register style in the registry