@mgcrea/react-native-tailwind 0.9.1 → 0.10.0

package/src/babel/utils/twProcessing.ts

@@ -5,6 +5,8 @@
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
 import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
+import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -14,6 +16,7 @@ import type { StyleObject } from "../../types/core.js";
 export interface TwProcessingState {
   styleRegistry: Map<string, StyleObject>;
   customColors: Record<string, string>;
+  schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
 }
 
@@ -30,7 +33,25 @@ export function processTwCall(
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
   t: typeof BabelTypes,
 ): void {
-  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+  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.customColors,
+        state.schemeModifierConfig.darkSuffix ?? "-dark",
+        state.schemeModifierConfig.lightSuffix ?? "-light",
+      );
+      modifierClasses.push(...expanded);
+    } else {
+      // Keep other modifiers as-is
+      modifierClasses.push(modifier);
+    }
+  }
 
   // Build TwStyle object properties
   const objectProperties: BabelTypes.ObjectProperty[] = [];

package/src/parser/index.ts

@@ -84,10 +84,21 @@ export { parseTypography } from "./typography";
 
 // Re-export modifier utilities
 export {
+  expandSchemeModifier,
   hasModifier,
+  isColorClass,
+  isColorSchemeModifier,
   isPlatformModifier,
+  isSchemeModifier,
   isStateModifier,
   parseModifier,
   splitModifierClasses,
 } from "./modifiers";
-export type { ModifierType, ParsedModifier, PlatformModifierType, StateModifierType } from "./modifiers";
+export type {
+  ColorSchemeModifierType,
+  ModifierType,
+  ParsedModifier,
+  PlatformModifierType,
+  SchemeModifierType,
+  StateModifierType,
+} from "./modifiers";

package/src/parser/modifiers.test.ts

@@ -1,6 +1,13 @@
 import { describe, expect, it } from "vitest";
 import type { ModifierType, ParsedModifier } from "./modifiers";
-import { hasModifier, parseModifier, splitModifierClasses } from "./modifiers";
+import {
+  expandSchemeModifier,
+  hasModifier,
+  isColorClass,
+  isSchemeModifier,
+  parseModifier,
+  splitModifierClasses,
+} from "./modifiers";
 
 describe("parseModifier - basic functionality", () => {
   it("should parse active modifier", () => {
@@ -373,3 +380,146 @@ describe("type safety", () => {
     }
   });
 });
+
+describe("isSchemeModifier", () => {
+  it("should return true for scheme modifier", () => {
+    expect(isSchemeModifier("scheme")).toBe(true);
+  });
+
+  it("should return false for non-scheme modifiers", () => {
+    expect(isSchemeModifier("dark")).toBe(false);
+    expect(isSchemeModifier("light")).toBe(false);
+    expect(isSchemeModifier("active")).toBe(false);
+    expect(isSchemeModifier("ios")).toBe(false);
+  });
+});
+
+describe("isColorClass", () => {
+  it("should return true for text color classes", () => {
+    expect(isColorClass("text-red-500")).toBe(true);
+    expect(isColorClass("text-systemGray")).toBe(true);
+    expect(isColorClass("text-blue-50")).toBe(true);
+  });
+
+  it("should return true for background color classes", () => {
+    expect(isColorClass("bg-red-500")).toBe(true);
+    expect(isColorClass("bg-systemGray")).toBe(true);
+    expect(isColorClass("bg-transparent")).toBe(true);
+  });
+
+  it("should return true for border color classes", () => {
+    expect(isColorClass("border-red-500")).toBe(true);
+    expect(isColorClass("border-systemGray")).toBe(true);
+    expect(isColorClass("border-black")).toBe(true);
+  });
+
+  it("should return false for non-color classes", () => {
+    expect(isColorClass("m-4")).toBe(false);
+    expect(isColorClass("p-2")).toBe(false);
+    expect(isColorClass("flex")).toBe(false);
+    expect(isColorClass("rounded-lg")).toBe(false);
+    expect(isColorClass("font-bold")).toBe(false);
+  });
+});
+
+describe("expandSchemeModifier", () => {
+  const customColors = {
+    "systemGray-dark": "#333333",
+    "systemGray-light": "#CCCCCC",
+    "primary-dark": "#1E40AF",
+    "primary-light": "#BFDBFE",
+    "accent-dark": "#DC2626",
+    "accent-light": "#FECACA",
+  };
+
+  it("should expand text color scheme modifier with default suffixes", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-systemGray" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toHaveLength(2);
+    expect((result as [ParsedModifier, ParsedModifier])[0]).toEqual({
+      modifier: "dark",
+      baseClass: "text-systemGray-dark",
+    });
+    expect((result as [ParsedModifier, ParsedModifier])[1]).toEqual({
+      modifier: "light",
+      baseClass: "text-systemGray-light",
+    });
+  });
+
+  it("should expand background color scheme modifier", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "bg-primary" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toHaveLength(2);
+    expect((result as [ParsedModifier, ParsedModifier])[0]).toEqual({
+      modifier: "dark",
+      baseClass: "bg-primary-dark",
+    });
+    expect((result as [ParsedModifier, ParsedModifier])[1]).toEqual({
+      modifier: "light",
+      baseClass: "bg-primary-light",
+    });
+  });
+
+  it("should expand border color scheme modifier", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "border-accent" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toHaveLength(2);
+    expect((result as [ParsedModifier, ParsedModifier])[0]).toEqual({
+      modifier: "dark",
+      baseClass: "border-accent-dark",
+    });
+    expect((result as [ParsedModifier, ParsedModifier])[1]).toEqual({
+      modifier: "light",
+      baseClass: "border-accent-light",
+    });
+  });
+
+  it("should use custom suffixes when provided", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-systemGray" };
+    const _result = expandSchemeModifier(modifier, customColors, "-darkMode", "-lightMode");
+
+    const expectedColors = {
+      "systemGray-darkMode": "#333333",
+      "systemGray-lightMode": "#CCCCCC",
+    };
+
+    expect(expandSchemeModifier(modifier, expectedColors, "-darkMode", "-lightMode")).toHaveLength(2);
+  });
+
+  it("should return empty array for non-color classes", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "m-4" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when dark color variant is missing", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-missing" };
+    const incompleteColors = {
+      "missing-light": "#FFFFFF",
+    };
+    const result = expandSchemeModifier(modifier, incompleteColors);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when light color variant is missing", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-missing" };
+    const incompleteColors = {
+      "missing-dark": "#000000",
+    };
+    const result = expandSchemeModifier(modifier, incompleteColors);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when both color variants are missing", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-missing" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toEqual([]);
+  });
+});

package/src/parser/modifiers.ts

@@ -1,12 +1,19 @@
 /**
- * Modifier parsing utilities for state-based and platform-specific class names
+ * Modifier parsing utilities for state-based, platform-specific, and color scheme class names
  * - State modifiers: active:, hover:, focus:, disabled:, placeholder:
  * - Platform modifiers: ios:, android:, web:
+ * - Color scheme modifiers: dark:, light:
  */
 
 export type StateModifierType = "active" | "hover" | "focus" | "disabled" | "placeholder";
 export type PlatformModifierType = "ios" | "android" | "web";
-export type ModifierType = StateModifierType | PlatformModifierType;
+export type ColorSchemeModifierType = "dark" | "light";
+export type SchemeModifierType = "scheme";
+export type ModifierType =
+  | StateModifierType
+  | PlatformModifierType
+  | ColorSchemeModifierType
+  | SchemeModifierType;
 
 export type ParsedModifier = {
   modifier: ModifierType;
@@ -30,9 +37,24 @@ const STATE_MODIFIERS: readonly StateModifierType[] = [
 const PLATFORM_MODIFIERS: readonly PlatformModifierType[] = ["ios", "android", "web"] as const;
 
 /**
- * All supported modifiers (state + platform)
+ * Supported color scheme modifiers that map to Appearance.colorScheme values
  */
-const SUPPORTED_MODIFIERS: readonly ModifierType[] = [...STATE_MODIFIERS, ...PLATFORM_MODIFIERS] as const;
+const COLOR_SCHEME_MODIFIERS: readonly ColorSchemeModifierType[] = ["dark", "light"] as const;
+
+/**
+ * Scheme modifier that expands to both dark: and light: modifiers
+ */
+const SCHEME_MODIFIERS: readonly SchemeModifierType[] = ["scheme"] as const;
+
+/**
+ * All supported modifiers (state + platform + color scheme + scheme)
+ */
+const SUPPORTED_MODIFIERS: readonly ModifierType[] = [
+  ...STATE_MODIFIERS,
+  ...PLATFORM_MODIFIERS,
+  ...COLOR_SCHEME_MODIFIERS,
+  ...SCHEME_MODIFIERS,
+] as const;
 
 /**
  * Parse a class name to detect and extract modifiers
@@ -107,6 +129,119 @@ export function isPlatformModifier(modifier: ModifierType): modifier is Platform
   return PLATFORM_MODIFIERS.includes(modifier as PlatformModifierType);
 }
 
+/**
+ * Check if a modifier is a color scheme modifier (dark, light)
+ *
+ * @param modifier - Modifier type to check
+ * @returns true if modifier is a color scheme modifier
+ */
+export function isColorSchemeModifier(modifier: ModifierType): modifier is ColorSchemeModifierType {
+  return COLOR_SCHEME_MODIFIERS.includes(modifier as ColorSchemeModifierType);
+}
+
+/**
+ * Check if a modifier is a scheme modifier (scheme)
+ *
+ * @param modifier - Modifier type to check
+ * @returns true if modifier is a scheme modifier
+ */
+export function isSchemeModifier(modifier: ModifierType): modifier is SchemeModifierType {
+  return SCHEME_MODIFIERS.includes(modifier as SchemeModifierType);
+}
+
+/**
+ * Check if a class name is a color-based utility class
+ *
+ * @param className - Class name to check
+ * @returns true if class is color-based (text-*, bg-*, border-*)
+ */
+export function isColorClass(className: string): boolean {
+  return className.startsWith("text-") || className.startsWith("bg-") || className.startsWith("border-");
+}
+
+/**
+ * Expand scheme modifier into dark and light modifiers
+ *
+ * @param schemeModifier - Parsed scheme modifier
+ * @param customColors - Custom colors from config
+ * @param darkSuffix - Suffix for dark variant (default: "-dark")
+ * @param lightSuffix - Suffix for light variant (default: "-light")
+ * @returns Array of expanded modifiers (dark: and light:), or empty array if validation fails
+ *
+ * @example
+ * expandSchemeModifier(
+ *   { modifier: "scheme", baseClass: "text-systemGray" },
+ *   { "systemGray-dark": "#333", "systemGray-light": "#ccc" },
+ *   "-dark",
+ *   "-light"
+ * )
+ * // Returns: [
+ * //   { modifier: "dark", baseClass: "text-systemGray-dark" },
+ * //   { modifier: "light", baseClass: "text-systemGray-light" }
+ * // ]
+ */
+export function expandSchemeModifier(
+  schemeModifier: ParsedModifier,
+  customColors: Record<string, string>,
+  darkSuffix = "-dark",
+  lightSuffix = "-light",
+): ParsedModifier[] {
+  const { baseClass } = schemeModifier;
+
+  // Only process color-based classes
+  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 [];
+  }
+
+  // Extract the color name from the class
+  // e.g., "text-systemGray" -> "systemGray"
+  const match = baseClass.match(/^(text|bg|border)-(.+)$/);
+  if (!match) {
+    return [];
+  }
+
+  const [, prefix, colorName] = match;
+
+  // Build variant class names
+  const darkColorName = `${colorName}${darkSuffix}`;
+  const lightColorName = `${colorName}${lightSuffix}`;
+
+  // Validate that both color variants exist
+  const darkColorExists = customColors[darkColorName] !== undefined;
+  const lightColorExists = customColors[lightColorName] !== undefined;
+
+  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 [];
+  }
+
+  // Expand to dark: and light: modifiers
+  return [
+    {
+      modifier: "dark" as ColorSchemeModifierType,
+      baseClass: `${prefix}-${darkColorName}`,
+    },
+    {
+      modifier: "light" as ColorSchemeModifierType,
+      baseClass: `${prefix}-${lightColorName}`,
+    },
+  ];
+}
+
 /**
  * Split a space-separated className string into base and modifier classes
  *

package/src/types/config.ts

@@ -0,0 +1,7 @@
+/**
+ * Configuration for the scheme: modifier
+ */
+export type SchemeModifierConfig = {
+  darkSuffix?: string;
+  lightSuffix?: string;
+};