@mgcrea/react-native-tailwind 0.10.0 → 0.11.1

package/dist/babel/index.cjs

@@ -1678,7 +1678,13 @@ function parseArbitraryLineHeight(value) {
   }
   return null;
 }
-function parseTypography(cls) {
+function parseTypography(cls, customFontFamily) {
+  const fontFamilyMap = customFontFamily ? {
+    ...FONT_FAMILY_MAP,
+    ...Object.fromEntries(
+      Object.entries(customFontFamily).map(([key, value]) => [`font-${key}`, { fontFamily: value }])
+    )
+  } : FONT_FAMILY_MAP;
   if (cls.startsWith("text-")) {
     const sizeKey = cls.substring(5);
     const arbitraryValue = parseArbitraryFontSize(sizeKey);
@@ -1701,7 +1707,7 @@ function parseTypography(cls) {
       return { lineHeight };
     }
   }
-  return FONT_FAMILY_MAP[cls] ?? FONT_WEIGHT_MAP[cls] ?? FONT_STYLE_MAP[cls] ?? TEXT_ALIGN_MAP[cls] ?? TEXT_DECORATION_MAP[cls] ?? TEXT_TRANSFORM_MAP[cls] ?? LINE_HEIGHT_MAP[cls] ?? TRACKING_MAP[cls] ?? null;
+  return fontFamilyMap[cls] ?? FONT_WEIGHT_MAP[cls] ?? FONT_STYLE_MAP[cls] ?? TEXT_ALIGN_MAP[cls] ?? TEXT_DECORATION_MAP[cls] ?? TEXT_TRANSFORM_MAP[cls] ?? LINE_HEIGHT_MAP[cls] ?? TRACKING_MAP[cls] ?? null;
 }
 
 // src/parser/placeholder.ts
@@ -1842,22 +1848,22 @@ function splitModifierClasses(className) {
 }
 
 // src/parser/index.ts
-function parseClassName(className, customColors) {
+function parseClassName(className, customTheme) {
   const classes = className.split(/\s+/).filter(Boolean);
   const style = {};
   for (const cls of classes) {
-    const parsedStyle = parseClass(cls, customColors);
+    const parsedStyle = parseClass(cls, customTheme);
     Object.assign(style, parsedStyle);
   }
   return style;
 }
-function parseClass(cls, customColors) {
+function parseClass(cls, customTheme) {
   const parsers = [
     parseSpacing,
     parseBorder,
-    (cls2) => parseColor(cls2, customColors),
+    (cls2) => parseColor(cls2, customTheme?.colors),
     parseLayout,
-    parseTypography,
+    (cls2) => parseTypography(cls2, customTheme?.fontFamily),
     parseSizing,
     parseShadow,
     parseAspectRatio,
@@ -1925,15 +1931,15 @@ function loadTailwindConfig(configPath) {
     return null;
   }
 }
-function extractCustomColors(filename) {
+function extractCustomTheme(filename) {
   const projectDir = path.dirname(filename);
   const configPath = findTailwindConfig(projectDir);
   if (!configPath) {
-    return {};
+    return { colors: {}, fontFamily: {} };
   }
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return {};
+    return { colors: {}, fontFamily: {} };
   }
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
     console.warn(
@@ -1941,7 +1947,24 @@ function extractCustomColors(filename) {
     );
   }
   const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
-  return flattenColors(colors);
+  if (config.theme.fontFamily && !config.theme.extend?.fontFamily && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontFamily will override all default font families. Use theme.extend.fontFamily to add custom fonts while keeping defaults."
+    );
+  }
+  const fontFamily = config.theme.extend?.fontFamily ?? config.theme.fontFamily ?? {};
+  const fontFamilyResult = {};
+  for (const [key, value] of Object.entries(fontFamily)) {
+    if (Array.isArray(value)) {
+      fontFamilyResult[key] = value[0];
+    } else {
+      fontFamilyResult[key] = value;
+    }
+  }
+  return {
+    colors: flattenColors(colors),
+    fontFamily: fontFamilyResult
+  };
 }
 
 // src/babel/utils/attributeMatchers.ts
@@ -1997,7 +2020,7 @@ function processColorSchemeModifiers(colorSchemeModifiers, state, parseClassName
   const conditionalExpressions = [];
   for (const [scheme, modifiers] of modifiersByScheme) {
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName2(classNames, state.customColors);
+    const styleObject = parseClassName2(classNames, state.customTheme);
     const styleKey = generateStyleKey2(`${scheme}_${classNames}`);
     state.styleRegistry.set(styleKey, styleObject);
     const colorSchemeCheck = t.binaryExpression(
@@ -2252,7 +2275,7 @@ function processStringOrExpressionHelper(node, state, parseClassName2, generateS
       if (isSchemeModifier2(modifier.modifier)) {
         const expanded = expandSchemeModifier2(
           modifier,
-          state.customColors,
+          state.customTheme.colors ?? {},
           state.schemeModifierConfig.darkSuffix ?? "-dark",
           state.schemeModifierConfig.lightSuffix ?? "-light"
         );
@@ -2266,7 +2289,7 @@ function processStringOrExpressionHelper(node, state, parseClassName2, generateS
     const styleElements = [];
     if (baseClasses.length > 0) {
       const baseClassName = baseClasses.join(" ");
-      const styleObject = parseClassName2(baseClassName, state.customColors);
+      const styleObject = parseClassName2(baseClassName, state.customTheme);
       const styleKey = generateStyleKey2(baseClassName);
       state.styleRegistry.set(styleKey, styleObject);
       styleElements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
@@ -2373,7 +2396,7 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
   let baseStyleExpression = null;
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName2(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -2394,7 +2417,7 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
   }
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName2(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName2(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
     const stateProperty = getStatePropertyForModifier(modifierType);
@@ -2443,7 +2466,7 @@ function processPlatformModifiers(platformModifiers, state, parseClassName2, gen
   const selectProperties = [];
   for (const [platform, modifiers] of modifiersByPlatform) {
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName2(classNames, state.customColors);
+    const styleObject = parseClassName2(classNames, state.customTheme);
     const styleKey = generateStyleKey2(`${platform}_${classNames}`);
     state.styleRegistry.set(styleKey, styleObject);
     const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
@@ -2495,33 +2518,33 @@ function addPlatformImport(path2, t) {
     path2.unshiftContainer("body", importDeclaration);
   }
 }
-function addColorSchemeImport(path2, t) {
+function addColorSchemeImport(path2, importSource, hookName, t) {
   const body = path2.node.body;
-  let reactNativeImport = null;
+  let existingValueImport = null;
   for (const statement of body) {
-    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+    if (t.isImportDeclaration(statement) && statement.source.value === importSource) {
+      if (statement.importKind !== "type") {
+        existingValueImport = statement;
+        break;
+      }
     }
   }
-  if (reactNativeImport) {
-    const hasUseColorScheme = reactNativeImport.specifiers.some(
-      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "useColorScheme"
+  if (existingValueImport) {
+    const hasHook = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === hookName
     );
-    if (!hasUseColorScheme) {
-      reactNativeImport.specifiers.push(
-        t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))
-      );
+    if (!hasHook) {
+      existingValueImport.specifiers.push(t.importSpecifier(t.identifier(hookName), t.identifier(hookName)));
     }
   } else {
     const importDeclaration = t.importDeclaration(
-      [t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))],
-      t.stringLiteral("react-native")
+      [t.importSpecifier(t.identifier(hookName), t.identifier(hookName))],
+      t.stringLiteral(importSource)
     );
     path2.unshiftContainer("body", importDeclaration);
   }
 }
-function injectColorSchemeHook(functionPath, colorSchemeVariableName, t) {
+function injectColorSchemeHook(functionPath, colorSchemeVariableName, hookName, localIdentifier, t) {
   let body = functionPath.node.body;
   if (!t.isBlockStatement(body)) {
     if (t.isArrowFunctionExpression(functionPath.node) && t.isExpression(body)) {
@@ -2543,10 +2566,11 @@ function injectColorSchemeHook(functionPath, colorSchemeVariableName, t) {
   if (hasHook) {
     return false;
   }
+  const identifierToCall = localIdentifier ?? hookName;
   const hookCall = t.variableDeclaration("const", [
     t.variableDeclarator(
       t.identifier(colorSchemeVariableName),
-      t.callExpression(t.identifier("useColorScheme"), [])
+      t.callExpression(t.identifier(identifierToCall), [])
     )
   ]);
   body.body.unshift(hookCall);
@@ -2708,7 +2732,7 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
     if (isSchemeModifier(modifier.modifier)) {
       const expanded = expandSchemeModifier(
         modifier,
-        state.customColors,
+        state.customTheme.colors ?? {},
         state.schemeModifierConfig.darkSuffix ?? "-dark",
         state.schemeModifierConfig.lightSuffix ?? "-light"
       );
@@ -2720,7 +2744,7 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   const objectProperties = [];
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName2(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     objectProperties.push(
@@ -2744,7 +2768,7 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   }
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName2(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName2(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
     const propertyName = `${modifierType}Style`;
@@ -2829,6 +2853,8 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
     darkSuffix: options?.schemeModifier?.darkSuffix ?? "-dark",
     lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light"
   };
+  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
+  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
   return {
     name: "react-native-tailwind",
     visitor: {
@@ -2842,13 +2868,15 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           state.hasColorSchemeImport = false;
           state.needsColorSchemeImport = false;
           state.colorSchemeVariableName = "_twColorScheme";
+          state.colorSchemeImportSource = colorSchemeImportSource;
+          state.colorSchemeHookName = colorSchemeHookName;
           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.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
           state.schemeModifierConfig = schemeModifierConfig;
         },
         exit(path2, state) {
@@ -2865,11 +2893,17 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             addPlatformImport(path2, t);
           }
           if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
-            addColorSchemeImport(path2, t);
+            addColorSchemeImport(path2, state.colorSchemeImportSource, state.colorSchemeHookName, t);
           }
           if (state.needsColorSchemeImport) {
             for (const functionPath of state.functionComponentsNeedingColorScheme) {
-              injectColorSchemeHook(functionPath, state.colorSchemeVariableName, t);
+              injectColorSchemeHook(
+                functionPath,
+                state.colorSchemeVariableName,
+                state.colorSchemeHookName,
+                state.colorSchemeLocalIdentifier,
+                t
+              );
             }
           }
           injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
@@ -2892,23 +2926,26 @@ 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;
           }
           if (hasPlatform) {
             state.hasPlatformImport = true;
           }
-          if (hasUseColorScheme) {
-            state.hasColorSchemeImport = true;
-          }
           state.reactNativeImportPath = path2;
         }
+        if (node.source.value === state.colorSchemeImportSource) {
+          const specifiers = node.specifiers;
+          for (const spec of specifiers) {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              if (spec.imported.name === state.colorSchemeHookName) {
+                state.hasColorSchemeImport = true;
+                state.colorSchemeLocalIdentifier = spec.local.name;
+                break;
+              }
+            }
+          }
+        }
         if (node.source.value === "@mgcrea/react-native-tailwind") {
           const specifiers = node.specifiers;
           specifiers.forEach((spec) => {
@@ -3014,7 +3051,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             if (isSchemeModifier(modifier.modifier)) {
               const expanded = expandSchemeModifier(
                 modifier,
-                state.customColors,
+                state.customTheme.colors ?? {},
                 state.schemeModifierConfig.darkSuffix,
                 state.schemeModifierConfig.lightSuffix
               );
@@ -3034,7 +3071,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
             if (componentSupport?.supportedModifiers.includes("placeholder")) {
               const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
-              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customColors);
+              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
               if (placeholderColor) {
                 addOrMergePlaceholderTextColorProp(jsxOpeningElement, placeholderColor, t);
               }
@@ -3070,7 +3107,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               const styleArrayElements = [];
               if (hasBaseClasses) {
                 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);
                 styleArrayElements.push(
@@ -3110,7 +3147,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                   continue;
                 }
                 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);
                 const stateProperty = getStatePropertyForModifier(modifierType);
@@ -3140,7 +3177,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             const styleExpressions = [];
             if (hasBaseClasses) {
               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);
               styleExpressions.push(
@@ -3256,7 +3293,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             path2.remove();
             return;
           }
-          const styleObject = parseClassName(classNameForStyle, state.customColors);
+          const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
           state.styleRegistry.set(styleKey, styleObject);
           const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);

package/dist/babel/plugin.d.ts

@@ -5,6 +5,7 @@
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
 import type { StyleObject } from "../types/core.js";
+import type { CustomTheme } from "./config-loader.js";
 import type { SchemeModifierConfig } from "../types/config.js";
 /**
  * Plugin options
@@ -40,6 +41,40 @@ export type PluginOptions = {
         darkSuffix?: string;
         lightSuffix?: string;
     };
+    /**
+     * Configuration for color scheme hook import (dark:/light: modifiers)
+     *
+     * Allows using custom color scheme hooks from theme providers instead of
+     * React Native's built-in useColorScheme.
+     *
+     * @example
+     * // Use custom hook from theme provider
+     * {
+     *   importFrom: '@/hooks/useColorScheme',
+     *   importName: 'useColorScheme'
+     * }
+     *
+     * @example
+     * // Use React Navigation theme
+     * {
+     *   importFrom: '@react-navigation/native',
+     *   importName: 'useTheme'  // You'd wrap this to return ColorSchemeName
+     * }
+     *
+     * @default { importFrom: 'react-native', importName: 'useColorScheme' }
+     */
+    colorScheme?: {
+        /**
+         * Module to import the color scheme hook from
+         * @default 'react-native'
+         */
+        importFrom?: string;
+        /**
+         * Name of the hook to import
+         * @default 'useColorScheme'
+         */
+        importName?: string;
+    };
 };
 type PluginState = PluginPass & {
     styleRegistry: Map<string, StyleObject>;
@@ -50,7 +85,10 @@ type PluginState = PluginPass & {
     hasColorSchemeImport: boolean;
     needsColorSchemeImport: boolean;
     colorSchemeVariableName: string;
-    customColors: Record<string, string>;
+    colorSchemeImportSource: string;
+    colorSchemeHookName: string;
+    colorSchemeLocalIdentifier?: string;
+    customTheme: CustomTheme;
     schemeModifierConfig: SchemeModifierConfig;
     supportedAttributes: Set<string>;
     attributePatterns: RegExp[];