@mgcrea/react-native-tailwind 0.9.1 → 0.11.0

package/src/babel/utils/styleInjection.ts

@@ -64,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

package/src/babel/utils/styleTransforms.test.ts

@@ -347,3 +347,59 @@ describe("Style merging - edge cases", () => {
     expect(output).not.toContain("className");
   });
 });
+
+describe("Style function merging - mergeStyleFunctionAttribute", () => {
+  it("should merge modifier className with existing function style prop", () => {
+    const input = `
+      import { Pressable } from 'react-native';
+      export function Component() {
+        return (
+          <Pressable
+            className="bg-blue-500 active:bg-blue-700"
+            style={({ pressed }) => pressed && { opacity: 0.8 }}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should create wrapper function that merges both style functions
+    expect(output).toContain("_state");
+    expect(output).toMatch(/_state\s*=>/);
+
+    // Should call both the new style function and existing style function
+    expect(output).toContain("_bg_blue_500");
+    expect(output).toContain("_active_bg_blue_700");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge modifier className with static existing style when using Pressable", () => {
+    const input = `
+      import { Pressable } from 'react-native';
+      export function Component() {
+        return (
+          <Pressable
+            className="p-4 active:bg-gray-100"
+            style={{ borderRadius: 8 }}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should create function that wraps className styles
+    expect(output).toContain("_state");
+
+    // Should include both the className styles and the static style
+    expect(output).toContain("_p_4");
+    expect(output).toContain("_active_bg_gray_100");
+    expect(output).toContain("borderRadius");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+});

package/src/babel/utils/twProcessing.ts

@@ -4,7 +4,9 @@
 
 import type { NodePath } from "@babel/core";
 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 { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
+import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -13,7 +15,8 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface TwProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
+  schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
 }
 
@@ -25,12 +28,30 @@ export function processTwCall(
   className: string,
   path: NodePath,
   state: TwProcessingState,
-  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,
 ): 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.customTheme.colors ?? {},
+        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[] = [];
@@ -38,7 +59,7 @@ export function processTwCall(
   // Parse and add base styles
   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);
 
@@ -68,7 +89,7 @@ export function processTwCall(
   // Add modifier styles
   for (const [modifierType, modifiers] of modifiersByType) {
     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/parser/index.ts

@@ -14,18 +14,26 @@ import { parseSpacing } from "./spacing";
 import { parseTransform } from "./transforms";
 import { parseTypography } from "./typography";
 
+/**
+ * Custom theme configuration (subset of tailwind.config theme extensions)
+ */
+export type CustomTheme = {
+  colors?: Record<string, string>;
+  fontFamily?: Record<string, string>;
+};
+
 /**
  * Parse a className string and return a React Native style object
  * @param className - Space-separated class names
- * @param customColors - Optional custom colors from tailwind.config
+ * @param customTheme - Optional custom theme from tailwind.config
  * @returns React Native style object
  */
-export function parseClassName(className: string, customColors?: Record<string, string>): StyleObject {
+export function parseClassName(className: string, customTheme?: CustomTheme): StyleObject {
   const classes = className.split(/\s+/).filter(Boolean);
   const style: StyleObject = {};
 
   for (const cls of classes) {
-    const parsedStyle = parseClass(cls, customColors);
+    const parsedStyle = parseClass(cls, customTheme);
     Object.assign(style, parsedStyle);
   }
 
@@ -35,19 +43,19 @@ export function parseClassName(className: string, customColors?: Record<string,
 /**
  * Parse a single class name
  * @param cls - Single class name
- * @param customColors - Optional custom colors from tailwind.config
+ * @param customTheme - Optional custom theme from tailwind.config
  * @returns React Native style object
  */
-export function parseClass(cls: string, customColors?: Record<string, string>): StyleObject {
+export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject {
   // Try each parser in order
   // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
-  // parseColor gets custom colors, others don't need it
+  // parseColor and parseTypography get custom theme, others don't need it
   const parsers: Array<(cls: string) => StyleObject | null> = [
     parseSpacing,
     parseBorder,
-    (cls: string) => parseColor(cls, customColors),
+    (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
-    parseTypography,
+    (cls: string) => parseTypography(cls, customTheme?.fontFamily),
     parseSizing,
     parseShadow,
     parseAspectRatio,
@@ -84,10 +92,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/parser/typography.ts

@@ -164,8 +164,20 @@ function parseArbitraryLineHeight(value: string): number | null {
 
 /**
  * Parse typography classes
+ * @param cls - Class name to parse
+ * @param customFontFamily - Optional custom fontFamily from tailwind.config
  */
-export function parseTypography(cls: string): StyleObject | null {
+export function parseTypography(cls: string, customFontFamily?: Record<string, string>): StyleObject | null {
+  // Merge custom fontFamily with defaults (custom takes precedence)
+  const fontFamilyMap = customFontFamily
+    ? {
+        ...FONT_FAMILY_MAP,
+        ...Object.fromEntries(
+          Object.entries(customFontFamily).map(([key, value]) => [`font-${key}`, { fontFamily: value }]),
+        ),
+      }
+    : FONT_FAMILY_MAP;
+
   // Font size: text-base, text-lg, text-[18px], etc.
   if (cls.startsWith("text-")) {
     const sizeKey = cls.substring(5);
@@ -202,7 +214,7 @@ export function parseTypography(cls: string): StyleObject | null {
 
   // Try each lookup table in order
   return (
-    FONT_FAMILY_MAP[cls] ??
+    fontFamilyMap[cls] ??
     FONT_WEIGHT_MAP[cls] ??
     FONT_STYLE_MAP[cls] ??
     TEXT_ALIGN_MAP[cls] ??