@mgcrea/react-native-tailwind 0.9.0 → 0.10.0

package/dist/babel/index.cjs

@@ -65,7 +65,7 @@ function parseAspectRatio(cls) {
   if (cls in ASPECT_RATIO_PRESETS) {
     const aspectRatio2 = ASPECT_RATIO_PRESETS[cls];
     if (aspectRatio2 === void 0) {
-      return {};
+      return { aspectRatio: void 0 };
     }
     return { aspectRatio: aspectRatio2 };
   }
@@ -1209,16 +1209,19 @@ function parseArbitrarySpacing(value) {
   return null;
 }
 function parseSpacing(cls) {
-  const marginMatch = cls.match(/^m([xytrbls]?)-(.+)$/);
+  const marginMatch = cls.match(/^(-?)m([xytrbls]?)-(.+)$/);
   if (marginMatch) {
-    const [, dir, valueStr] = marginMatch;
+    const [, negativePrefix, dir, valueStr] = marginMatch;
+    const isNegative = negativePrefix === "-";
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
-      return getMarginStyle(dir, arbitraryValue);
+      const finalValue = isNegative ? -arbitraryValue : arbitraryValue;
+      return getMarginStyle(dir, finalValue);
     }
     const scaleValue = SPACING_SCALE[valueStr];
     if (scaleValue !== void 0) {
-      return getMarginStyle(dir, scaleValue);
+      const finalValue = isNegative ? -scaleValue : scaleValue;
+      return getMarginStyle(dir, finalValue);
     }
   }
   const paddingMatch = cls.match(/^p([xytrbls]?)-(.+)$/);
@@ -1738,7 +1741,14 @@ var STATE_MODIFIERS = [
   "placeholder"
 ];
 var PLATFORM_MODIFIERS = ["ios", "android", "web"];
-var SUPPORTED_MODIFIERS = [...STATE_MODIFIERS, ...PLATFORM_MODIFIERS];
+var COLOR_SCHEME_MODIFIERS = ["dark", "light"];
+var SCHEME_MODIFIERS = ["scheme"];
+var SUPPORTED_MODIFIERS = [
+  ...STATE_MODIFIERS,
+  ...PLATFORM_MODIFIERS,
+  ...COLOR_SCHEME_MODIFIERS,
+  ...SCHEME_MODIFIERS
+];
 function parseModifier(cls) {
   const colonIndex = cls.indexOf(":");
   if (colonIndex === -1) {
@@ -1766,6 +1776,56 @@ function isStateModifier(modifier) {
 function isPlatformModifier(modifier) {
   return PLATFORM_MODIFIERS.includes(modifier);
 }
+function isColorSchemeModifier(modifier) {
+  return COLOR_SCHEME_MODIFIERS.includes(modifier);
+}
+function isSchemeModifier(modifier) {
+  return SCHEME_MODIFIERS.includes(modifier);
+}
+function isColorClass(className) {
+  return className.startsWith("text-") || className.startsWith("bg-") || className.startsWith("border-");
+}
+function expandSchemeModifier(schemeModifier, customColors, darkSuffix = "-dark", lightSuffix = "-light") {
+  const { baseClass } = schemeModifier;
+  if (!isColorClass(baseClass)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] scheme: modifier only supports color classes (text-*, bg-*, border-*). Found: "${baseClass}". This modifier will be ignored.`
+      );
+    }
+    return [];
+  }
+  const match = baseClass.match(/^(text|bg|border)-(.+)$/);
+  if (!match) {
+    return [];
+  }
+  const [, prefix, colorName] = match;
+  const darkColorName = `${colorName}${darkSuffix}`;
+  const lightColorName = `${colorName}${lightSuffix}`;
+  const darkColorExists = customColors[darkColorName] !== void 0;
+  const lightColorExists = customColors[lightColorName] !== void 0;
+  if (!darkColorExists || !lightColorExists) {
+    if (process.env.NODE_ENV !== "production") {
+      const missing = [];
+      if (!darkColorExists) missing.push(`${colorName}${darkSuffix}`);
+      if (!lightColorExists) missing.push(`${colorName}${lightSuffix}`);
+      console.warn(
+        `[react-native-tailwind] scheme:${baseClass} requires both color variants to exist. Missing: ${missing.join(", ")}. This modifier will be ignored.`
+      );
+    }
+    return [];
+  }
+  return [
+    {
+      modifier: "dark",
+      baseClass: `${prefix}-${darkColorName}`
+    },
+    {
+      modifier: "light",
+      baseClass: `${prefix}-${lightColorName}`
+    }
+  ];
+}
 function splitModifierClasses(className) {
   const classes = className.trim().split(/\s+/).filter(Boolean);
   const baseClasses = [];
@@ -1920,6 +1980,38 @@ function getTargetStyleProp(attributeName) {
   return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
 }
 
+// src/babel/utils/colorSchemeModifierProcessing.ts
+function processColorSchemeModifiers(colorSchemeModifiers, state, parseClassName2, generateStyleKey2, t) {
+  state.needsColorSchemeImport = true;
+  const modifiersByScheme = /* @__PURE__ */ new Map();
+  for (const mod of colorSchemeModifiers) {
+    const scheme = mod.modifier;
+    if (!modifiersByScheme.has(scheme)) {
+      modifiersByScheme.set(scheme, []);
+    }
+    const schemeGroup = modifiersByScheme.get(scheme);
+    if (schemeGroup) {
+      schemeGroup.push(mod);
+    }
+  }
+  const conditionalExpressions = [];
+  for (const [scheme, modifiers] of modifiersByScheme) {
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName2(classNames, state.customColors);
+    const styleKey = generateStyleKey2(`${scheme}_${classNames}`);
+    state.styleRegistry.set(styleKey, styleObject);
+    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;
+}
+
 // src/babel/utils/componentSupport.ts
 function getComponentModifierSupport(jsxElement, t) {
   if (!t.isJSXOpeningElement(jsxElement)) {
@@ -1964,32 +2056,89 @@ function getStatePropertyForModifier(modifier) {
 }
 
 // src/babel/utils/dynamicProcessing.ts
-function processDynamicExpression(expression, state, parseClassName2, generateStyleKey2, t) {
+function processDynamicExpression(expression, state, parseClassName2, generateStyleKey2, splitModifierClasses2, processPlatformModifiers2, processColorSchemeModifiers2, componentScope, isPlatformModifier2, isColorSchemeModifier2, isSchemeModifier2, expandSchemeModifier2, t) {
   if (t.isTemplateLiteral(expression)) {
-    return processTemplateLiteral(expression, state, parseClassName2, generateStyleKey2, t);
+    return processTemplateLiteral(
+      expression,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      splitModifierClasses2,
+      processPlatformModifiers2,
+      processColorSchemeModifiers2,
+      componentScope,
+      isPlatformModifier2,
+      isColorSchemeModifier2,
+      isSchemeModifier2,
+      expandSchemeModifier2,
+      t
+    );
   }
   if (t.isConditionalExpression(expression)) {
-    return processConditionalExpression(expression, state, parseClassName2, generateStyleKey2, t);
+    return processConditionalExpression(
+      expression,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      splitModifierClasses2,
+      processPlatformModifiers2,
+      processColorSchemeModifiers2,
+      componentScope,
+      isPlatformModifier2,
+      isColorSchemeModifier2,
+      isSchemeModifier2,
+      expandSchemeModifier2,
+      t
+    );
   }
   if (t.isLogicalExpression(expression)) {
-    return processLogicalExpression(expression, state, parseClassName2, generateStyleKey2, t);
+    return processLogicalExpression(
+      expression,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      splitModifierClasses2,
+      processPlatformModifiers2,
+      processColorSchemeModifiers2,
+      componentScope,
+      isPlatformModifier2,
+      isColorSchemeModifier2,
+      isSchemeModifier2,
+      expandSchemeModifier2,
+      t
+    );
   }
   return null;
 }
-function processTemplateLiteral(node, state, parseClassName2, generateStyleKey2, t) {
+function processTemplateLiteral(node, state, parseClassName2, generateStyleKey2, splitModifierClasses2, processPlatformModifiers2, processColorSchemeModifiers2, componentScope, isPlatformModifier2, isColorSchemeModifier2, isSchemeModifier2, expandSchemeModifier2, t) {
   const parts = [];
   const staticParts = [];
   for (let i = 0; i < node.quasis.length; i++) {
     const quasi = node.quasis[i];
     const staticText = quasi.value.cooked?.trim();
     if (staticText) {
-      const classes = staticText.split(/\s+/).filter(Boolean);
-      for (const cls of classes) {
-        const styleObject = parseClassName2(cls, state.customColors);
-        const styleKey = generateStyleKey2(cls);
-        state.styleRegistry.set(styleKey, styleObject);
-        staticParts.push(cls);
-        parts.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+      const processedExpression = processStringOrExpressionHelper(
+        t.stringLiteral(staticText),
+        state,
+        parseClassName2,
+        generateStyleKey2,
+        splitModifierClasses2,
+        processPlatformModifiers2,
+        processColorSchemeModifiers2,
+        componentScope,
+        isPlatformModifier2,
+        isColorSchemeModifier2,
+        isSchemeModifier2,
+        expandSchemeModifier2,
+        t
+      );
+      if (processedExpression) {
+        staticParts.push(staticText);
+        if (t.isArrayExpression(processedExpression)) {
+          parts.push(...processedExpression.elements);
+        } else {
+          parts.push(processedExpression);
+        }
       }
     }
     if (i < node.expressions.length) {
@@ -1999,6 +2148,14 @@ function processTemplateLiteral(node, state, parseClassName2, generateStyleKey2,
         state,
         parseClassName2,
         generateStyleKey2,
+        splitModifierClasses2,
+        processPlatformModifiers2,
+        processColorSchemeModifiers2,
+        componentScope,
+        isPlatformModifier2,
+        isColorSchemeModifier2,
+        isSchemeModifier2,
+        expandSchemeModifier2,
         t
       );
       if (result) {
@@ -2017,9 +2174,37 @@ function processTemplateLiteral(node, state, parseClassName2, generateStyleKey2,
     staticParts: staticParts.length > 0 ? staticParts : void 0
   };
 }
-function processConditionalExpression(node, state, parseClassName2, generateStyleKey2, t) {
-  const consequent = processStringOrExpression(node.consequent, state, parseClassName2, generateStyleKey2, t);
-  const alternate = processStringOrExpression(node.alternate, state, parseClassName2, generateStyleKey2, t);
+function processConditionalExpression(node, state, parseClassName2, generateStyleKey2, splitModifierClasses2, processPlatformModifiers2, processColorSchemeModifiers2, componentScope, isPlatformModifier2, isColorSchemeModifier2, isSchemeModifier2, expandSchemeModifier2, t) {
+  const consequent = processStringOrExpressionHelper(
+    node.consequent,
+    state,
+    parseClassName2,
+    generateStyleKey2,
+    splitModifierClasses2,
+    processPlatformModifiers2,
+    processColorSchemeModifiers2,
+    componentScope,
+    isPlatformModifier2,
+    isColorSchemeModifier2,
+    isSchemeModifier2,
+    expandSchemeModifier2,
+    t
+  );
+  const alternate = processStringOrExpressionHelper(
+    node.alternate,
+    state,
+    parseClassName2,
+    generateStyleKey2,
+    splitModifierClasses2,
+    processPlatformModifiers2,
+    processColorSchemeModifiers2,
+    componentScope,
+    isPlatformModifier2,
+    isColorSchemeModifier2,
+    isSchemeModifier2,
+    expandSchemeModifier2,
+    t
+  );
   if (!consequent && !alternate) {
     return null;
   }
@@ -2030,38 +2215,153 @@ function processConditionalExpression(node, state, parseClassName2, generateStyl
   );
   return { expression };
 }
-function processLogicalExpression(node, state, parseClassName2, generateStyleKey2, t) {
+function processLogicalExpression(node, state, parseClassName2, generateStyleKey2, splitModifierClasses2, processPlatformModifiers2, processColorSchemeModifiers2, componentScope, isPlatformModifier2, isColorSchemeModifier2, isSchemeModifier2, expandSchemeModifier2, t) {
   if (node.operator !== "&&") {
     return null;
   }
-  const right = processStringOrExpression(node.right, state, parseClassName2, generateStyleKey2, t);
+  const right = processStringOrExpressionHelper(
+    node.right,
+    state,
+    parseClassName2,
+    generateStyleKey2,
+    splitModifierClasses2,
+    processPlatformModifiers2,
+    processColorSchemeModifiers2,
+    componentScope,
+    isPlatformModifier2,
+    isColorSchemeModifier2,
+    isSchemeModifier2,
+    expandSchemeModifier2,
+    t
+  );
   if (!right) {
     return null;
   }
   const expression = t.logicalExpression("&&", node.left, right);
   return { expression };
 }
-function processStringOrExpression(node, state, parseClassName2, generateStyleKey2, t) {
+function processStringOrExpressionHelper(node, state, parseClassName2, generateStyleKey2, splitModifierClasses2, processPlatformModifiers2, processColorSchemeModifiers2, componentScope, isPlatformModifier2, isColorSchemeModifier2, isSchemeModifier2, expandSchemeModifier2, t) {
   if (t.isStringLiteral(node)) {
     const className = node.value.trim();
     if (!className) {
       return null;
     }
-    const styleObject = parseClassName2(className, state.customColors);
-    const styleKey = generateStyleKey2(className);
-    state.styleRegistry.set(styleKey, styleObject);
-    return t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses2(className);
+    const modifierClasses = [];
+    for (const modifier of rawModifierClasses) {
+      if (isSchemeModifier2(modifier.modifier)) {
+        const expanded = expandSchemeModifier2(
+          modifier,
+          state.customColors,
+          state.schemeModifierConfig.darkSuffix ?? "-dark",
+          state.schemeModifierConfig.lightSuffix ?? "-light"
+        );
+        modifierClasses.push(...expanded);
+      } else {
+        modifierClasses.push(modifier);
+      }
+    }
+    const platformModifiers = modifierClasses.filter((m) => isPlatformModifier2(m.modifier));
+    const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier2(m.modifier));
+    const styleElements = [];
+    if (baseClasses.length > 0) {
+      const baseClassName = baseClasses.join(" ");
+      const styleObject = parseClassName2(baseClassName, state.customColors);
+      const styleKey = generateStyleKey2(baseClassName);
+      state.styleRegistry.set(styleKey, styleObject);
+      styleElements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+    }
+    if (platformModifiers.length > 0) {
+      state.needsPlatformImport = true;
+      const platformExpression = processPlatformModifiers2(
+        platformModifiers,
+        state,
+        parseClassName2,
+        generateStyleKey2,
+        t
+      );
+      styleElements.push(platformExpression);
+    }
+    if (colorSchemeModifiers.length > 0) {
+      if (componentScope) {
+        state.needsColorSchemeImport = true;
+        state.functionComponentsNeedingColorScheme.add(componentScope);
+        const colorSchemeExpressions = processColorSchemeModifiers2(
+          colorSchemeModifiers,
+          state,
+          parseClassName2,
+          generateStyleKey2,
+          t
+        );
+        styleElements.push(...colorSchemeExpressions);
+      } else {
+        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."
+          );
+        }
+      }
+    }
+    if (styleElements.length === 0) {
+      return null;
+    }
+    if (styleElements.length === 1) {
+      return styleElements[0];
+    }
+    return t.arrayExpression(styleElements);
   }
   if (t.isConditionalExpression(node)) {
-    const result = processConditionalExpression(node, state, parseClassName2, generateStyleKey2, t);
+    const result = processConditionalExpression(
+      node,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      splitModifierClasses2,
+      processPlatformModifiers2,
+      processColorSchemeModifiers2,
+      componentScope,
+      isPlatformModifier2,
+      isColorSchemeModifier2,
+      isSchemeModifier2,
+      expandSchemeModifier2,
+      t
+    );
     return result?.expression ?? null;
   }
   if (t.isLogicalExpression(node)) {
-    const result = processLogicalExpression(node, state, parseClassName2, generateStyleKey2, t);
+    const result = processLogicalExpression(
+      node,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      splitModifierClasses2,
+      processPlatformModifiers2,
+      processColorSchemeModifiers2,
+      componentScope,
+      isPlatformModifier2,
+      isColorSchemeModifier2,
+      isSchemeModifier2,
+      expandSchemeModifier2,
+      t
+    );
     return result?.expression ?? null;
   }
   if (t.isTemplateLiteral(node)) {
-    const result = processTemplateLiteral(node, state, parseClassName2, generateStyleKey2, t);
+    const result = processTemplateLiteral(
+      node,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      splitModifierClasses2,
+      processPlatformModifiers2,
+      processColorSchemeModifiers2,
+      componentScope,
+      isPlatformModifier2,
+      isColorSchemeModifier2,
+      isSchemeModifier2,
+      expandSchemeModifier2,
+      t
+    );
     return result?.expression ?? null;
   }
   return null;
@@ -2156,11 +2456,25 @@ function processPlatformModifiers(platformModifiers, state, parseClassName2, gen
 
 // src/babel/utils/styleInjection.ts
 function addStyleSheetImport(path2, t) {
-  const importDeclaration = t.importDeclaration(
-    [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
-    t.stringLiteral("react-native")
-  );
-  path2.unshiftContainer("body", importDeclaration);
+  const body = path2.node.body;
+  let reactNativeImport = null;
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
+  if (reactNativeImport) {
+    reactNativeImport.specifiers.push(
+      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))
+    );
+  } else {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
+      t.stringLiteral("react-native")
+    );
+    path2.unshiftContainer("body", importDeclaration);
+  }
 }
 function addPlatformImport(path2, t) {
   const body = path2.node.body;
@@ -2181,6 +2495,63 @@ function addPlatformImport(path2, t) {
     path2.unshiftContainer("body", importDeclaration);
   }
 }
+function addColorSchemeImport(path2, t) {
+  const body = path2.node.body;
+  let reactNativeImport = null;
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
+  if (reactNativeImport) {
+    const hasUseColorScheme = reactNativeImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "useColorScheme"
+    );
+    if (!hasUseColorScheme) {
+      reactNativeImport.specifiers.push(
+        t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))
+      );
+    }
+  } else {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))],
+      t.stringLiteral("react-native")
+    );
+    path2.unshiftContainer("body", importDeclaration);
+  }
+}
+function injectColorSchemeHook(functionPath, colorSchemeVariableName, t) {
+  let body = functionPath.node.body;
+  if (!t.isBlockStatement(body)) {
+    if (t.isArrowFunctionExpression(functionPath.node) && t.isExpression(body)) {
+      const returnStatement = t.returnStatement(body);
+      const blockStatement = t.blockStatement([returnStatement]);
+      functionPath.node.body = blockStatement;
+      body = blockStatement;
+    } else {
+      return false;
+    }
+  }
+  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;
+  }
+  const hookCall = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(colorSchemeVariableName),
+      t.callExpression(t.identifier("useColorScheme"), [])
+    )
+  ]);
+  body.body.unshift(hookCall);
+  return true;
+}
 function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
   const styleProperties = [];
   for (const [key, styleObject] of styleRegistry) {
@@ -2331,7 +2702,21 @@ function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
 
 // src/babel/utils/twProcessing.ts
 function processTwCall(className, path2, state, parseClassName2, generateStyleKey2, splitModifierClasses2, t) {
-  const { baseClasses, modifierClasses } = splitModifierClasses2(className);
+  const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses2(className);
+  const modifierClasses = [];
+  for (const modifier of rawModifierClasses) {
+    if (isSchemeModifier(modifier.modifier)) {
+      const expanded = expandSchemeModifier(
+        modifier,
+        state.customColors,
+        state.schemeModifierConfig.darkSuffix ?? "-dark",
+        state.schemeModifierConfig.lightSuffix ?? "-light"
+      );
+      modifierClasses.push(...expanded);
+    } else {
+      modifierClasses.push(modifier);
+    }
+  }
   const objectProperties = [];
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
@@ -2398,10 +2783,52 @@ function removeTwImports(path2, t) {
 
 // src/babel/plugin.ts
 var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
+function isComponentScope(functionPath, t) {
+  const node = functionPath.node;
+  const parent = functionPath.parent;
+  const parentPath = functionPath.parentPath;
+  if (t.isClassMethod(parent)) {
+    return false;
+  }
+  if (functionPath.findParent((p) => t.isClassBody(p.node))) {
+    return false;
+  }
+  if (t.isFunctionDeclaration(node)) {
+    if (t.isProgram(parent) || t.isExportNamedDeclaration(parent) || t.isExportDefaultDeclaration(parent)) {
+      return true;
+    }
+  }
+  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
+    if (t.isVariableDeclarator(parent)) {
+      const varDeclarationPath = parentPath?.parentPath;
+      if (varDeclarationPath && t.isVariableDeclaration(varDeclarationPath.node) && (t.isProgram(varDeclarationPath.parent) || t.isExportNamedDeclaration(varDeclarationPath.parent))) {
+        if (t.isIdentifier(parent.id)) {
+          const name = parent.id.name;
+          return /^[A-Z]/.test(name);
+        }
+      }
+    }
+  }
+  return false;
+}
+function findComponentScope(path2, t) {
+  let current = path2.getFunctionParent();
+  while (current) {
+    if (t.isFunction(current.node) && isComponentScope(current, t)) {
+      return current;
+    }
+    current = current.getFunctionParent();
+  }
+  return null;
+}
 function reactNativeTailwindBabelPlugin({ types: t }, options) {
   const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
   const { exactMatches, patterns } = buildAttributeMatchers(attributes);
   const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
+  const schemeModifierConfig = {
+    darkSuffix: options?.schemeModifier?.darkSuffix ?? "-dark",
+    lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light"
+  };
   return {
     name: "react-native-tailwind",
     visitor: {
@@ -2412,12 +2839,17 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           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 = /* @__PURE__ */ new Set();
           state.hasTwImport = false;
+          state.functionComponentsNeedingColorScheme = /* @__PURE__ */ new Set();
           state.customColors = extractCustomColors(state.file.opts.filename ?? "");
+          state.schemeModifierConfig = schemeModifierConfig;
         },
         exit(path2, state) {
           if (state.hasTwImport) {
@@ -2432,6 +2864,14 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           if (state.needsPlatformImport && !state.hasPlatformImport) {
             addPlatformImport(path2, t);
           }
+          if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
+            addColorSchemeImport(path2, t);
+          }
+          if (state.needsColorSchemeImport) {
+            for (const functionPath of state.functionComponentsNeedingColorScheme) {
+              injectColorSchemeHook(functionPath, state.colorSchemeVariableName, t);
+            }
+          }
           injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
         }
       },
@@ -2452,15 +2892,22 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             }
             return false;
           });
+          const hasUseColorScheme = specifiers.some((spec) => {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              return spec.imported.name === "useColorScheme";
+            }
+            return false;
+          });
           if (hasStyleSheet) {
             state.hasStyleSheetImport = true;
-          } else {
-            node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
-            state.hasStyleSheetImport = true;
           }
           if (hasPlatform) {
             state.hasPlatformImport = true;
           }
+          if (hasUseColorScheme) {
+            state.hasColorSchemeImport = true;
+          }
+          state.reactNativeImportPath = path2;
         }
         if (node.source.value === "@mgcrea/react-native-tailwind") {
           const specifiers = node.specifiers;
@@ -2561,9 +3008,24 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             return;
           }
           state.hasClassNames = true;
-          const { baseClasses, modifierClasses } = splitModifierClasses(className);
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+          const modifierClasses = [];
+          for (const modifier of rawModifierClasses) {
+            if (isSchemeModifier(modifier.modifier)) {
+              const expanded = expandSchemeModifier(
+                modifier,
+                state.customColors,
+                state.schemeModifierConfig.darkSuffix,
+                state.schemeModifierConfig.lightSuffix
+              );
+              modifierClasses.push(...expanded);
+            } else {
+              modifierClasses.push(modifier);
+            }
+          }
           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"
           );
@@ -2585,9 +3047,23 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             }
           }
           const hasPlatformModifiers = platformModifiers.length > 0;
+          const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
           const hasStateModifiers = stateModifiers.length > 0;
           const hasBaseClasses = baseClasses.length > 0;
-          if (hasStateModifiers && hasPlatformModifiers) {
+          let componentScope = null;
+          if (hasColorSchemeModifiers) {
+            componentScope = findComponentScope(path2, t);
+            if (componentScope) {
+              state.functionComponentsNeedingColorScheme.add(componentScope);
+            } else {
+              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 (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
             const jsxOpeningElement = path2.parent;
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
             if (componentSupport) {
@@ -2601,14 +3077,26 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                   t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
                 );
               }
-              const platformSelectExpression = processPlatformModifiers(
-                platformModifiers,
-                state,
-                parseClassName,
-                generateStyleKey,
-                t
-              );
-              styleArrayElements.push(platformSelectExpression);
+              if (hasPlatformModifiers) {
+                const platformSelectExpression = processPlatformModifiers(
+                  platformModifiers,
+                  state,
+                  parseClassName,
+                  generateStyleKey,
+                  t
+                );
+                styleArrayElements.push(platformSelectExpression);
+              }
+              if (hasColorSchemeModifiers && componentScope) {
+                const colorSchemeConditionals = processColorSchemeModifiers(
+                  colorSchemeModifiers,
+                  state,
+                  parseClassName,
+                  generateStyleKey,
+                  t
+                );
+                styleArrayElements.push(...colorSchemeConditionals);
+              }
               const modifiersByType = /* @__PURE__ */ new Map();
               for (const mod of stateModifiers) {
                 const modType = mod.modifier;
@@ -2648,7 +3136,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             } else {
             }
           }
-          if (hasPlatformModifiers && !hasStateModifiers) {
+          if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
             const styleExpressions = [];
             if (hasBaseClasses) {
               const baseClassName = baseClasses.join(" ");
@@ -2659,14 +3147,26 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                 t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
               );
             }
-            const platformSelectExpression = processPlatformModifiers(
-              platformModifiers,
-              state,
-              parseClassName,
-              generateStyleKey,
-              t
-            );
-            styleExpressions.push(platformSelectExpression);
+            if (hasPlatformModifiers) {
+              const platformSelectExpression = processPlatformModifiers(
+                platformModifiers,
+                state,
+                parseClassName,
+                generateStyleKey,
+                t
+              );
+              styleExpressions.push(platformSelectExpression);
+            }
+            if (hasColorSchemeModifiers && componentScope) {
+              const colorSchemeConditionals = processColorSchemeModifiers(
+                colorSchemeModifiers,
+                state,
+                parseClassName,
+                generateStyleKey,
+                t
+              );
+              styleExpressions.push(...colorSchemeConditionals);
+            }
             const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
             const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
             if (styleAttribute2) {
@@ -2773,7 +3273,22 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             return;
           }
           try {
-            const result = processDynamicExpression(expression, state, parseClassName, generateStyleKey, t);
+            const componentScope = findComponentScope(path2, t);
+            const result = processDynamicExpression(
+              expression,
+              state,
+              parseClassName,
+              generateStyleKey,
+              splitModifierClasses,
+              processPlatformModifiers,
+              processColorSchemeModifiers,
+              componentScope,
+              isPlatformModifier,
+              isColorSchemeModifier,
+              isSchemeModifier,
+              expandSchemeModifier,
+              t
+            );
             if (result) {
               state.hasClassNames = true;
               const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);