@mgcrea/react-native-tailwind 0.12.1 → 0.14.0

package/dist/babel/plugin/visitors/tw.ts

@@ -0,0 +1,148 @@
+/**
+ * tw and twStyle visitors - handles compile-time tw tagged templates and twStyle calls
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import { parseClassName, splitModifierClasses } from "../../../parser/index.js";
+import { generateStyleKey } from "../../../utils/styleKey.js";
+import { processTwCall } from "../../utils/twProcessing.js";
+import { findComponentScope } from "../componentScope.js";
+import type { PluginState } from "../state.js";
+
+/**
+ * TaggedTemplateExpression visitor
+ * Handles tw`...` tagged template expressions
+ */
+export function taggedTemplateVisitor(
+  path: NodePath<BabelTypes.TaggedTemplateExpression>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  const node = path.node;
+
+  // Check if the tag is a tracked tw import
+  if (!t.isIdentifier(node.tag)) {
+    return;
+  }
+
+  const tagName = node.tag.name;
+  if (!state.twImportNames.has(tagName)) {
+    return;
+  }
+
+  // Extract static className from template literal
+  const quasi = node.quasi;
+  if (!t.isTemplateLiteral(quasi)) {
+    return;
+  }
+
+  // Only support static strings (no interpolations)
+  if (quasi.expressions.length > 0) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Dynamic tw\`...\` with interpolations is not supported at ${state.file.opts.filename ?? "unknown"}. ` +
+          `Use style prop for dynamic values.`,
+      );
+    }
+    return;
+  }
+
+  // Get the static className string
+  const className = quasi.quasis[0]?.value.cooked?.trim() ?? "";
+  if (!className) {
+    // Replace with empty object
+    path.replaceWith(t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))]));
+    // Mark as successfully transformed (even if empty)
+    state.hasTwImport = true;
+    return;
+  }
+
+  state.hasClassNames = true;
+
+  // Process the className with modifiers
+  processTwCall(
+    className,
+    path,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    findComponentScope,
+    t,
+  );
+
+  // Mark as successfully transformed
+  state.hasTwImport = true;
+}
+
+/**
+ * CallExpression visitor
+ * Handles twStyle('...') call expressions
+ */
+export function callExpressionVisitor(
+  path: NodePath<BabelTypes.CallExpression>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  const node = path.node;
+
+  // Check if the callee is a tracked twStyle import
+  if (!t.isIdentifier(node.callee)) {
+    return;
+  }
+
+  const calleeName = node.callee.name;
+  if (!state.twImportNames.has(calleeName)) {
+    return;
+  }
+
+  // Must have exactly one argument
+  if (node.arguments.length !== 1) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] twStyle() expects exactly one argument at ${state.file.opts.filename ?? "unknown"}`,
+      );
+    }
+    return;
+  }
+
+  const arg = node.arguments[0];
+
+  // Only support static string literals
+  if (!t.isStringLiteral(arg)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] twStyle() only supports static string literals at ${state.file.opts.filename ?? "unknown"}. ` +
+          `Use style prop for dynamic values.`,
+      );
+    }
+    return;
+  }
+
+  const className = arg.value.trim();
+  if (!className) {
+    // Replace with undefined
+    path.replaceWith(t.identifier("undefined"));
+    // Mark as successfully transformed (even if empty)
+    state.hasTwImport = true;
+    return;
+  }
+
+  state.hasClassNames = true;
+
+  // Process the className with modifiers
+  processTwCall(
+    className,
+    path,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    findComponentScope,
+    t,
+  );
+
+  // Mark as successfully transformed
+  state.hasTwImport = true;
+}

package/dist/babel/plugin.d.ts

@@ -2,103 +2,10 @@
  * Babel plugin for react-native-tailwind
  * Transforms className props to style props at compile time
  */
-import type { NodePath, PluginObj, PluginPass } from "@babel/core";
+import type { PluginObj } 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
- */
-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;
-    };
-};
-type PluginState = PluginPass & {
-    styleRegistry: Map<string, StyleObject>;
-    hasClassNames: boolean;
-    hasStyleSheetImport: boolean;
-    hasPlatformImport: boolean;
-    needsPlatformImport: boolean;
-    hasColorSchemeImport: boolean;
-    needsColorSchemeImport: boolean;
-    colorSchemeVariableName: string;
-    colorSchemeImportSource: string;
-    colorSchemeHookName: string;
-    colorSchemeLocalIdentifier?: string;
-    customTheme: CustomTheme;
-    schemeModifierConfig: SchemeModifierConfig;
-    supportedAttributes: Set<string>;
-    attributePatterns: RegExp[];
-    stylesIdentifier: string;
-    twImportNames: Set<string>;
-    hasTwImport: boolean;
-    reactNativeImportPath?: NodePath<BabelTypes.ImportDeclaration>;
-    functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
-};
+import type { PluginOptions, PluginState } from "./plugin/state.js";
+export type { PluginOptions };
 export default function reactNativeTailwindBabelPlugin({ types: t }: {
     types: typeof BabelTypes;
 }, options?: PluginOptions): PluginObj<PluginState>;
-export {};