@mgcrea/react-native-tailwind 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.4.0",
+  "version": "0.5.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",
@@ -33,14 +33,14 @@
     "dev": "cd example; npm run dev",
     "build": "npm run build:babel && npm run build:babel-plugin && npm run build:types",
     "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files --ignore 'src/babel/**' --ignore '**/*.d.ts'",
-    "build:babel-plugin": "node scripts/bundle-babel-plugin.cjs",
-    "build:types": "tsc --emitDeclarationOnly && node scripts/post-build-types.cjs",
+    "build:babel-plugin": "node --experimental-strip-types scripts/bundle-babel-plugin.ts",
+    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly && node --experimental-strip-types scripts/post-build-types.ts",
     "install:ios": "cd example; npm run install:ios",
     "open:ios": "cd example; npm run open:ios",
-    "lint": "eslint .",
+    "lint": "eslint src/",
     "prettify": "prettier --write src/",
     "check": "tsc --noEmit",
-    "spec": "NODE_OPTIONS=--experimental-require-module jest",
+    "spec": "vitest",
     "test": "npm run lint && npm run check && npm run spec",
     "prepare": "npm run build"
   },
@@ -71,7 +71,8 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "react": "^19.2.0",
     "react-native": "0.82.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.10"
   },
   "engines": {
     "node": ">=18"

package/src/babel/index.ts

@@ -11,12 +11,14 @@
 
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
-import { parseClassName as parseClassNameFn } from "../parser/index.js";
+import { StyleObject } from "src/types.js";
+import type { ModifierType, ParsedModifier } from "../parser/index.js";
+import { parseClassName as parseClassNameFn, splitModifierClasses } from "../parser/index.js";
 import { generateStyleKey as generateStyleKeyFn } from "../utils/styleKey.js";
 import { extractCustomColors } from "./config-loader.js";
 
 type PluginState = PluginPass & {
-  styleRegistry: Map<string, Record<string, string | number>>;
+  styleRegistry: Map<string, StyleObject>;
   hasClassNames: boolean;
   hasStyleSheetImport: boolean;
   customColors: Record<string, string>;
@@ -30,6 +32,7 @@ const STYLES_IDENTIFIER = "_twStyles";
  */
 const SUPPORTED_CLASS_ATTRIBUTES = [
   "className",
+  "containerClassName",
   "contentContainerClassName",
   "columnWrapperClassName",
   "ListHeaderComponentClassName",
@@ -40,6 +43,9 @@ const SUPPORTED_CLASS_ATTRIBUTES = [
  * Get the target style prop name based on the className attribute
  */
 function getTargetStyleProp(attributeName: string): string {
+  if (attributeName === "containerClassName") {
+    return "containerStyle";
+  }
   if (attributeName === "contentContainerClassName") {
     return "contentContainerStyle";
   }
@@ -55,6 +61,49 @@ function getTargetStyleProp(attributeName: string): string {
   return "style";
 }
 
+/**
+ * Check if a JSX element supports modifiers and determine which modifiers are supported
+ * Returns an object with component info and supported modifiers
+ */
+function getComponentModifierSupport(
+  jsxElement: any,
+  t: typeof BabelTypes,
+): { component: string; supportedModifiers: ModifierType[] } | null {
+  if (!t.isJSXOpeningElement(jsxElement)) {
+    return null;
+  }
+
+  const name = jsxElement.name;
+  let componentName: string | null = null;
+
+  // Handle simple identifier: <Pressable>
+  if (t.isJSXIdentifier(name)) {
+    componentName = name.name;
+  }
+
+  // Handle member expression: <ReactNative.Pressable>
+  if (t.isJSXMemberExpression(name)) {
+    const property = name.property;
+    if (t.isJSXIdentifier(property)) {
+      componentName = property.name;
+    }
+  }
+
+  if (!componentName) {
+    return null;
+  }
+
+  // Map components to their supported modifiers
+  switch (componentName) {
+    case "Pressable":
+      return { component: "Pressable", supportedModifiers: ["active", "hover", "focus", "disabled"] };
+    case "TextInput":
+      return { component: "TextInput", supportedModifiers: ["focus", "disabled"] };
+    default:
+      return null;
+  }
+}
+
 /**
  * Result of processing a dynamic expression
  */
@@ -242,6 +291,118 @@ function processStringOrExpression(node: any, state: PluginState, t: typeof Babe
   return null;
 }
 
+/**
+ * Process a static className string that contains modifiers
+ * Returns a style function expression for Pressable components
+ */
+function processStaticClassNameWithModifiers(
+  className: string,
+  state: PluginState,
+  t: typeof BabelTypes,
+): any {
+  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+
+  // Parse and register base classes
+  let baseStyleExpression: any = null;
+  if (baseClasses.length > 0) {
+    const baseClassName = baseClasses.join(" ");
+    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleKey = generateStyleKey(baseClassName);
+    state.styleRegistry.set(baseStyleKey, baseStyleObject);
+    baseStyleExpression = t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(baseStyleKey));
+  }
+
+  // Parse and register modifier classes
+  // Group by modifier type for better organization
+  const modifiersByType = new Map<ModifierType, ParsedModifier[]>();
+  for (const mod of modifierClasses) {
+    if (!modifiersByType.has(mod.modifier)) {
+      modifiersByType.set(mod.modifier, []);
+    }
+    const modGroup = modifiersByType.get(mod.modifier);
+    if (modGroup) {
+      modGroup.push(mod);
+    }
+  }
+
+  // Build style function: ({ pressed }) => [baseStyle, pressed && modifierStyle]
+  const styleArrayElements: any[] = [];
+
+  // Add base style first
+  if (baseStyleExpression) {
+    styleArrayElements.push(baseStyleExpression);
+  }
+
+  // Add conditional styles for each modifier type
+  for (const [modifierType, modifiers] of modifiersByType) {
+    // Parse all modifier classes together
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+
+    // Create conditional: pressed && styles._active_bg_blue_700
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    const conditionalExpression = t.logicalExpression(
+      "&&",
+      t.identifier(stateProperty),
+      t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(modifierStyleKey)),
+    );
+
+    styleArrayElements.push(conditionalExpression);
+  }
+
+  // If only base style, return it directly; otherwise return array
+  if (styleArrayElements.length === 1) {
+    return styleArrayElements[0];
+  }
+
+  return t.arrayExpression(styleArrayElements);
+}
+
+/**
+ * Get the state property name for a modifier type
+ * Maps modifier types to component state parameter properties
+ */
+function getStatePropertyForModifier(modifier: ModifierType): string {
+  switch (modifier) {
+    case "active":
+      return "pressed";
+    case "hover":
+      return "hovered";
+    case "focus":
+      return "focused";
+    case "disabled":
+      return "disabled";
+    default:
+      return "pressed"; // fallback
+  }
+}
+
+/**
+ * Create a style function for Pressable: ({ pressed }) => styleExpression
+ */
+function createStyleFunction(styleExpression: any, modifierTypes: ModifierType[], t: typeof BabelTypes): any {
+  // Build parameter object: { pressed, hovered, focused }
+  const paramProperties: any[] = [];
+  const usedStateProps = new Set<string>();
+
+  for (const modifierType of modifierTypes) {
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    if (!usedStateProps.has(stateProperty)) {
+      usedStateProps.add(stateProperty);
+      paramProperties.push(
+        t.objectProperty(t.identifier(stateProperty), t.identifier(stateProperty), false, true),
+      );
+    }
+  }
+
+  const param = t.objectPattern(paramProperties);
+
+  // Create arrow function: ({ pressed }) => styleExpression
+  return t.arrowFunctionExpression([param], styleExpression);
+}
+
 export default function reactNativeTailwindBabelPlugin({
   types: t,
 }: {
@@ -314,7 +475,7 @@ export default function reactNativeTailwindBabelPlugin({
         // Determine target style prop based on attribute name
         const targetStyleProp = getTargetStyleProp(attributeName);
 
-        // Handle static string literals (original behavior)
+        // Handle static string literals
         if (t.isStringLiteral(value)) {
           const className = value.value.trim();
 
@@ -326,13 +487,99 @@ export default function reactNativeTailwindBabelPlugin({
 
           state.hasClassNames = true;
 
-          // Parse className to React Native styles
-          const styleObject = parseClassName(className, state.customColors);
+          // Check if className contains modifiers (active:, hover:, focus:)
+          const { baseClasses, modifierClasses } = splitModifierClasses(className);
 
-          // Generate unique style key
-          const styleKey = generateStyleKey(className);
+          // If there are modifiers, check if this component supports them
+          if (modifierClasses.length > 0) {
+            // Get the JSX opening element (the direct parent of the attribute)
+            const jsxOpeningElement = path.parent;
+            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+
+            if (componentSupport) {
+              // Get modifier types used in className
+              const usedModifiers = Array.from(new Set(modifierClasses.map((m) => m.modifier)));
+
+              // Check if all modifiers are supported by this component
+              const unsupportedModifiers = usedModifiers.filter(
+                (mod) => !componentSupport.supportedModifiers.includes(mod),
+              );
+
+              if (unsupportedModifiers.length > 0) {
+                // Warn about unsupported modifiers
+                if (process.env.NODE_ENV !== "production") {
+                  console.warn(
+                    `[react-native-tailwind] Modifiers (${unsupportedModifiers.map((m) => `${m}:`).join(", ")}) are not supported on ${componentSupport.component} component at ${state.file.opts.filename ?? "unknown"}. ` +
+                      `Supported modifiers: ${componentSupport.supportedModifiers.join(", ")}`,
+                  );
+                }
+                // Filter out unsupported modifiers
+                const supportedModifierClasses = modifierClasses.filter((m) =>
+                  componentSupport.supportedModifiers.includes(m.modifier),
+                );
+
+                // If no supported modifiers remain, fall through to normal processing
+                if (supportedModifierClasses.length === 0) {
+                  // Continue to normal processing
+                } else {
+                  // Process only supported modifiers
+                  const filteredClassName =
+                    baseClasses.join(" ") +
+                    " " +
+                    supportedModifierClasses.map((m) => `${m.modifier}:${m.baseClass}`).join(" ");
+                  const styleExpression = processStaticClassNameWithModifiers(
+                    filteredClassName.trim(),
+                    state,
+                    t,
+                  );
+                  const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
+                  const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+
+                  const parent = path.parent as any;
+                  const styleAttribute = parent.attributes.find(
+                    (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+                  );
+
+                  if (styleAttribute) {
+                    mergeStyleFunctionAttribute(path, styleAttribute, styleFunctionExpression, t);
+                  } else {
+                    replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
+                  }
+                  return;
+                }
+              } else {
+                // All modifiers are supported - process normally
+                const styleExpression = processStaticClassNameWithModifiers(className, state, t);
+                const modifierTypes = usedModifiers;
+                const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+
+                const parent = path.parent as any;
+                const styleAttribute = parent.attributes.find(
+                  (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+                );
+
+                if (styleAttribute) {
+                  mergeStyleFunctionAttribute(path, styleAttribute, styleFunctionExpression, t);
+                } else {
+                  replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
+                }
+                return;
+              }
+            } else {
+              // Component doesn't support any modifiers
+              if (process.env.NODE_ENV !== "production") {
+                const usedModifiers = Array.from(new Set(modifierClasses.map((m) => m.modifier)));
+                console.warn(
+                  `[react-native-tailwind] Modifiers (${usedModifiers.map((m) => `${m}:`).join(", ")}) can only be used on compatible components (Pressable, TextInput). Found on unsupported element at ${state.file.opts.filename ?? "unknown"}`,
+                );
+              }
+              // Fall through to normal processing (ignore modifiers)
+            }
+          }
 
-          // Store in registry
+          // Normal processing without modifiers
+          const styleObject = parseClassName(className, state.customColors);
+          const styleKey = generateStyleKey(className);
           state.styleRegistry.set(styleKey, styleObject);
 
           // Check if there's already a style prop on this element
@@ -505,13 +752,72 @@ function mergeDynamicStyleAttribute(
 }
 
 /**
- * Inject StyleSheet.create with all collected styles
+ * Replace className with style function attribute (for Pressable with modifiers)
+ */
+function replaceWithStyleFunctionAttribute(
+  classNamePath: NodePath,
+  styleFunctionExpression: any,
+  targetStyleProp: string,
+  t: typeof BabelTypes,
+) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(styleFunctionExpression),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge className style function with existing style prop (for Pressable with modifiers)
  */
-function injectStyles(
-  path: NodePath,
-  styleRegistry: Map<string, Record<string, string | number>>,
+function mergeStyleFunctionAttribute(
+  classNamePath: NodePath,
+  styleAttribute: any,
+  styleFunctionExpression: any,
   t: typeof BabelTypes,
 ) {
+  const existingStyle = styleAttribute.value.expression;
+
+  // Create a wrapper function that merges both styles
+  // ({ pressed }) => [styleFunctionResult, existingStyle]
+  // We need to call the style function and merge results
+
+  // If existing is already a function, we need to handle it specially
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    // Both are functions - create wrapper that calls both
+    // (_state) => [newStyleFn(_state), existingStyleFn(_state)]
+    // Create an identifier for the parameter to pass to the function calls
+    const paramIdentifier = t.identifier("_state");
+
+    const newFunctionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const existingFunctionCall = t.callExpression(existingStyle, [paramIdentifier]);
+
+    const mergedArray = t.arrayExpression([newFunctionCall, existingFunctionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    // Existing is static - create function that returns array
+    // (_state) => [styleFunctionResult, existingStyle]
+    // Create an identifier for the parameter to pass to the function call
+    const paramIdentifier = t.identifier("_state");
+
+    const functionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([functionCall, existingStyle]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  }
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
+/**
+ * Inject StyleSheet.create with all collected styles
+ */
+function injectStyles(path: NodePath, styleRegistry: Map<string, StyleObject>, t: typeof BabelTypes) {
   // Build style object properties
   const styleProperties: any[] = [];
 
@@ -549,10 +855,7 @@ function injectStyles(
 }
 
 // Helper functions that use the imported parser
-function parseClassName(
-  className: string,
-  customColors: Record<string, string>,
-): Record<string, string | number> {
+function parseClassName(className: string, customColors: Record<string, string>): StyleObject {
   return parseClassNameFn(className, customColors);
 }
 

package/src/components/Pressable.tsx

@@ -0,0 +1,46 @@
+/**
+ * Enhanced Pressable component with modifier support
+ * Injects disabled state into style function for disabled: modifier support
+ */
+
+import type { ComponentRef } from "react";
+import { forwardRef } from "react";
+import {
+  Pressable as RNPressable,
+  type PressableStateCallbackType,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+
+// Extend PressableStateCallbackType to include disabled
+type EnhancedPressableState = PressableStateCallbackType & { disabled: boolean | null | undefined };
+
+export type PressableProps = Omit<RNPressableProps, "style"> & {
+  /**
+   * Style can be a static style object/array or a function that receives Pressable state + disabled
+   */
+  style?: StyleProp<ViewStyle> | ((state: EnhancedPressableState) => StyleProp<ViewStyle>);
+};
+
+/**
+ * Enhanced Pressable that supports the disabled: modifier
+ *
+ * @example
+ * <Pressable
+ *   disabled={isLoading}
+ *   className="bg-blue-500 active:bg-blue-700 disabled:bg-gray-400"
+ * >
+ *   <Text>Submit</Text>
+ * </Pressable>
+ */
+export const Pressable = forwardRef<ComponentRef<typeof RNPressable>, PressableProps>(function Pressable(
+  { style, disabled = false, ...props },
+  ref,
+) {
+  // Inject disabled into style function context
+  const resolvedStyle =
+    typeof style === "function" ? (state: PressableStateCallbackType) => style({ ...state, disabled }) : style;
+
+  return <RNPressable ref={ref} disabled={disabled} style={resolvedStyle} {...props} />;
+});

package/src/components/TextInput.tsx

@@ -0,0 +1,90 @@
+/**
+ * Enhanced TextInput component with focus state support for focus: modifier
+ *
+ * This component wraps React Native's TextInput and manages focus state internally,
+ * allowing the style prop to be a function that receives { focused: boolean }.
+ *
+ * @example
+ * ```tsx
+ * import { TextInput } from '@mgcrea/react-native-tailwind';
+ *
+ * <TextInput
+ *   className="border-2 border-gray-300 focus:border-blue-500 p-3 rounded-lg"
+ *   placeholder="Email"
+ * />
+ * ```
+ */
+
+import { forwardRef, useCallback, useState } from "react";
+import {
+  type BlurEvent,
+  type FocusEvent,
+  TextInput as RNTextInput,
+  type TextInputProps as RNTextInputProps,
+} from "react-native";
+
+export type TextInputProps = Omit<RNTextInputProps, "style"> & {
+  /**
+   * Style can be a static style object/array or a function that receives focus and disabled state
+   */
+  style?:
+    | RNTextInputProps["style"]
+    | ((state: { focused: boolean; disabled: boolean }) => RNTextInputProps["style"]);
+  /**
+   * Convenience prop for disabled state (overrides editable if provided)
+   * When true, sets editable to false
+   */
+  disabled?: boolean;
+};
+
+/**
+ * Enhanced TextInput with focus and disabled state support
+ *
+ * Manages focus state internally and passes it to style functions,
+ * enabling the use of focus: and disabled: modifiers in className.
+ *
+ * Note: TextInput uses `editable` prop internally. You can pass either:
+ * - `disabled={true}` - convenience prop (sets editable to false)
+ * - `editable={false}` - React Native's native prop
+ * If both are provided, `disabled` takes precedence.
+ */
+export const TextInput = forwardRef<RNTextInput, TextInputProps>(function TextInput(
+  { style, onFocus, onBlur, disabled, editable = true, ...props },
+  ref,
+) {
+  const [focused, setFocused] = useState(false);
+
+  const handleFocus = useCallback(
+    (e: FocusEvent) => {
+      setFocused(true);
+      onFocus?.(e);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (e: BlurEvent) => {
+      setFocused(false);
+      onBlur?.(e);
+    },
+    [onBlur],
+  );
+
+  // Resolve editable state: disabled prop overrides editable if provided
+  const isEditable = disabled !== undefined ? !disabled : editable;
+  const isDisabled = !isEditable;
+
+  // Resolve style - call function with focus and disabled state if needed
+  const resolvedStyle = typeof style === "function" ? style({ focused, disabled: isDisabled }) : style;
+
+  return (
+    <RNTextInput
+      ref={ref}
+      style={resolvedStyle}
+      editable={isEditable}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      {...props}
+    />
+  );
+});

package/src/index.ts

@@ -11,10 +11,28 @@ export { generateStyleKey } from "./utils/styleKey";
 export type { RNStyle, StyleObject } from "./types";
 
 // Re-export individual parsers for advanced usage
-export { parseBorder, parseColor, parseLayout, parseSizing, parseSpacing, parseTypography } from "./parser";
+export {
+  parseAspectRatio,
+  parseBorder,
+  parseColor,
+  parseLayout,
+  parseShadow,
+  parseSizing,
+  parseSpacing,
+  parseTypography,
+} from "./parser";
 
 // Re-export constants for customization
+export { ASPECT_RATIO_PRESETS } from "./parser/aspectRatio";
 export { COLORS } from "./parser/colors";
+export { INSET_SCALE, Z_INDEX_SCALE } from "./parser/layout";
+export { SHADOW_SCALE } from "./parser/shadows";
 export { SIZE_PERCENTAGES, SIZE_SCALE } from "./parser/sizing";
 export { SPACING_SCALE } from "./parser/spacing";
-export { FONT_SIZES } from "./parser/typography";
+export { FONT_SIZES, LETTER_SPACING_SCALE } from "./parser/typography";
+
+// Re-export enhanced components with modifier support
+export { Pressable } from "./components/Pressable";
+export type { PressableProps } from "./components/Pressable";
+export { TextInput } from "./components/TextInput";
+export type { TextInputProps } from "./components/TextInput";