@mgcrea/react-native-tailwind 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",

package/src/babel/config-loader.test.ts

@@ -120,7 +120,7 @@ describe("config-loader", () => {
       vi.spyOn(fs, "existsSync").mockReturnValue(false);
 
       const result = extractCustomTheme("/project/src/file.ts");
-      expect(result).toEqual({ colors: {}, fontFamily: {} });
+      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
     });
 
     it("should return empty theme when config has no theme", () => {
@@ -134,7 +134,7 @@ describe("config-loader", () => {
       const result = extractCustomTheme("/project/src/file.ts");
 
       // Without actual config loading, this returns empty
-      expect(result).toEqual({ colors: {}, fontFamily: {} });
+      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
     });
 
     it("should extract colors and fontFamily from theme.extend", () => {

package/src/babel/config-loader.ts

@@ -14,9 +14,11 @@ export type TailwindConfig = {
     extend?: {
       colors?: Record<string, string | Record<string, string>>;
       fontFamily?: Record<string, string | string[]>;
+      fontSize?: Record<string, string | number>;
     };
     colors?: Record<string, string | Record<string, string>>;
     fontFamily?: Record<string, string | string[]>;
+    fontSize?: Record<string, string | number>;
   };
 };
 
@@ -89,6 +91,7 @@ export function loadTailwindConfig(configPath: string): TailwindConfig | null {
 export type CustomTheme = {
   colors: Record<string, string>;
   fontFamily: Record<string, string>;
+  fontSize: Record<string, number>;
 };
 
 /**
@@ -100,12 +103,12 @@ export function extractCustomTheme(filename: string): CustomTheme {
   const configPath = findTailwindConfig(projectDir);
 
   if (!configPath) {
-    return { colors: {}, fontFamily: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {} };
   }
 
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return { colors: {}, fontFamily: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {} };
   }
 
   // Extract colors
@@ -139,8 +142,40 @@ export function extractCustomTheme(filename: string): CustomTheme {
     }
   }
 
+  // Extract fontSize
+  /* v8 ignore next 5 */
+  if (config.theme.fontSize && !config.theme.extend?.fontSize && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontSize will override all default font sizes. " +
+        "Use theme.extend.fontSize to add custom font sizes while keeping defaults.",
+    );
+  }
+  const fontSize = config.theme.extend?.fontSize ?? config.theme.fontSize ?? {};
+
+  // Convert fontSize values to numbers (handle string or number values)
+  const fontSizeResult: Record<string, number> = {};
+  for (const [key, value] of Object.entries(fontSize)) {
+    if (typeof value === "number") {
+      fontSizeResult[key] = value;
+    } else if (typeof value === "string") {
+      // Parse string values like "18px" or "18" to number
+      const parsed = parseFloat(value.replace(/px$/, ""));
+      if (!isNaN(parsed)) {
+        fontSizeResult[key] = parsed;
+      } else {
+        /* v8 ignore next 5 */
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid fontSize value for "${key}": ${value}. Expected number or string like "18px".`,
+          );
+        }
+      }
+    }
+  }
+
   return {
     colors: flattenColors(colors),
     fontFamily: fontFamilyResult,
+    fontSize: fontSizeResult,
   };
 }

package/src/babel/plugin/componentScope.ts

@@ -0,0 +1,87 @@
+/**
+ * Component scope detection helpers for hook injection
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+
+/**
+ * Check if a function path represents a valid component scope for hook injection
+ * Valid scopes:
+ * - Top-level FunctionDeclaration
+ * - FunctionExpression/ArrowFunctionExpression in top-level VariableDeclarator (with PascalCase name)
+ * - NOT class methods, NOT nested functions, NOT inline callbacks
+ *
+ * @param functionPath - Path to the function to check
+ * @param t - Babel types
+ * @returns true if function is a valid component scope
+ */
+export function isComponentScope(functionPath: NodePath<BabelTypes.Function>, t: typeof BabelTypes): boolean {
+  const node = functionPath.node;
+  const parent = functionPath.parent;
+  const parentPath = functionPath.parentPath;
+
+  // Reject class methods (class components not supported for hooks)
+  if (t.isClassMethod(parent)) {
+    return false;
+  }
+
+  // Reject if inside a class body
+  if (functionPath.findParent((p) => t.isClassBody(p.node))) {
+    return false;
+  }
+
+  // Accept top-level FunctionDeclaration
+  if (t.isFunctionDeclaration(node)) {
+    // Check if it's at program level or in export
+    if (t.isProgram(parent) || t.isExportNamedDeclaration(parent) || t.isExportDefaultDeclaration(parent)) {
+      return true;
+    }
+  }
+
+  // Accept FunctionExpression/ArrowFunctionExpression in VariableDeclarator
+  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
+    if (t.isVariableDeclarator(parent)) {
+      // Check if it's at program level (via VariableDeclaration)
+      const varDeclarationPath = parentPath?.parentPath;
+      if (
+        varDeclarationPath &&
+        t.isVariableDeclaration(varDeclarationPath.node) &&
+        (t.isProgram(varDeclarationPath.parent) || t.isExportNamedDeclaration(varDeclarationPath.parent))
+      ) {
+        // Check for PascalCase naming (component convention)
+        if (t.isIdentifier(parent.id)) {
+          const name = parent.id.name;
+          return /^[A-Z]/.test(name); // Starts with uppercase
+        }
+      }
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Find the nearest valid component scope for hook injection
+ * Climbs the AST from the current path to find a component-level function
+ *
+ * @param path - Starting path (e.g., JSXAttribute)
+ * @param t - Babel types
+ * @returns NodePath to component function, or null if not found
+ */
+export function findComponentScope(
+  path: NodePath,
+  t: typeof BabelTypes,
+): NodePath<BabelTypes.Function> | null {
+  let current = path.getFunctionParent();
+
+  while (current) {
+    if (t.isFunction(current.node) && isComponentScope(current, t)) {
+      return current;
+    }
+    // Climb to next parent function
+    current = current.getFunctionParent();
+  }
+
+  return null;
+}

package/src/babel/plugin/state.ts

@@ -0,0 +1,177 @@
+/**
+ * Plugin state and options types
+ */
+
+import type { NodePath, PluginPass } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import type { SchemeModifierConfig } from "../../types/config.js";
+import type { StyleObject } from "../../types/core.js";
+import type { CustomTheme } from "../config-loader.js";
+import { extractCustomTheme } from "../config-loader.js";
+import { DEFAULT_CLASS_ATTRIBUTES, buildAttributeMatchers } from "../utils/attributeMatchers.js";
+
+/**
+ * Plugin options
+ */
+export type PluginOptions = {
+  /**
+   * List of JSX attribute names to transform (in addition to or instead of 'className')
+   * Supports exact matches and glob patterns:
+   * - Exact: 'className', 'containerClassName'
+   * - Glob: '*ClassName' (matches any attribute ending in 'ClassName')
+   *
+   * @default ['className', 'contentContainerClassName', 'columnWrapperClassName', 'ListHeaderComponentClassName', 'ListFooterComponentClassName']
+   */
+  attributes?: string[];
+
+  /**
+   * Custom identifier name for the generated StyleSheet constant
+   *
+   * @default '_twStyles'
+   */
+  stylesIdentifier?: string;
+
+  /**
+   * Configuration for the scheme: modifier that expands to both dark: and light: modifiers
+   *
+   * @example
+   * {
+   *   darkSuffix: '-dark',  // scheme:bg-primary -> dark:bg-primary-dark
+   *   lightSuffix: '-light' // scheme:bg-primary -> light:bg-primary-light
+   * }
+   *
+   * @default { darkSuffix: '-dark', lightSuffix: '-light' }
+   */
+  schemeModifier?: {
+    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;
+  };
+};
+
+/**
+ * Plugin state - passed through all visitors
+ */
+export type PluginState = PluginPass & {
+  styleRegistry: Map<string, StyleObject>;
+  hasClassNames: boolean;
+  hasStyleSheetImport: boolean;
+  hasPlatformImport: boolean;
+  needsPlatformImport: boolean;
+  hasColorSchemeImport: boolean;
+  needsColorSchemeImport: boolean;
+  colorSchemeVariableName: string;
+  colorSchemeImportSource: string; // Where to import the hook from (e.g., 'react-native')
+  colorSchemeHookName: string; // Name of the hook to import (e.g., 'useColorScheme')
+  colorSchemeLocalIdentifier?: string; // Local identifier if hook is already imported with an alias
+  hasWindowDimensionsImport: boolean;
+  needsWindowDimensionsImport: boolean;
+  windowDimensionsVariableName: string;
+  windowDimensionsLocalIdentifier?: string; // Local identifier if hook is already imported with an alias
+  customTheme: CustomTheme;
+  schemeModifierConfig: SchemeModifierConfig;
+  supportedAttributes: Set<string>;
+  attributePatterns: RegExp[];
+  stylesIdentifier: string;
+  // Track tw/twStyle imports from main package
+  twImportNames: Set<string>; // e.g., ['tw', 'twStyle'] or ['tw as customTw']
+  hasTwImport: boolean;
+  // Track react-native import path for conditional StyleSheet/Platform injection
+  reactNativeImportPath?: NodePath<BabelTypes.ImportDeclaration>;
+  // Track function components that need colorScheme hook injection
+  functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
+  // Track function components that need windowDimensions hook injection
+  functionComponentsNeedingWindowDimensions: Set<NodePath<BabelTypes.Function>>;
+};
+
+// Default identifier for the generated StyleSheet constant
+export const DEFAULT_STYLES_IDENTIFIER = "_twStyles";
+
+/**
+ * Create initial plugin state for a file
+ *
+ * @param options - Plugin options from babel config
+ * @param filename - Current file being processed
+ * @param colorSchemeImportSource - Where to import the color scheme hook from
+ * @param colorSchemeHookName - Name of the color scheme hook to import
+ * @param schemeModifierConfig - Configuration for scheme: modifier expansion
+ * @returns Initial plugin state
+ */
+export function createInitialState(
+  options: PluginOptions | undefined,
+  filename: string,
+  colorSchemeImportSource: string,
+  colorSchemeHookName: string,
+  schemeModifierConfig: SchemeModifierConfig,
+): Partial<PluginState> {
+  // Build attribute matchers from options
+  const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
+  const { exactMatches, patterns } = buildAttributeMatchers(attributes);
+  const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
+
+  // Load custom theme from tailwind.config.*
+  const customTheme = extractCustomTheme(filename);
+
+  return {
+    styleRegistry: new Map(),
+    hasClassNames: false,
+    hasStyleSheetImport: false,
+    hasPlatformImport: false,
+    needsPlatformImport: false,
+    hasColorSchemeImport: false,
+    needsColorSchemeImport: false,
+    colorSchemeVariableName: "_twColorScheme",
+    colorSchemeImportSource,
+    colorSchemeHookName,
+    colorSchemeLocalIdentifier: undefined,
+    hasWindowDimensionsImport: false,
+    needsWindowDimensionsImport: false,
+    windowDimensionsVariableName: "_twDimensions",
+    windowDimensionsLocalIdentifier: undefined,
+    customTheme,
+    schemeModifierConfig,
+    supportedAttributes: exactMatches,
+    attributePatterns: patterns,
+    stylesIdentifier,
+    twImportNames: new Set(),
+    hasTwImport: false,
+    reactNativeImportPath: undefined,
+    functionComponentsNeedingColorScheme: new Set(),
+    functionComponentsNeedingWindowDimensions: new Set(),
+  };
+}