@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/dist/parser/typography.test.js

@@ -0,0 +1 @@
+var _vitest=require("vitest");var _typography=require("./typography");(0,_vitest.describe)("FONT_SIZES",function(){(0,_vitest.it)("should export complete font size scale",function(){(0,_vitest.expect)(_typography.FONT_SIZES).toMatchSnapshot();});});(0,_vitest.describe)("LETTER_SPACING_SCALE",function(){(0,_vitest.it)("should export complete letter spacing scale",function(){(0,_vitest.expect)(_typography.LETTER_SPACING_SCALE).toMatchSnapshot();});});(0,_vitest.describe)("parseTypography - font size",function(){(0,_vitest.it)("should parse font size with preset values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-xs")).toEqual({fontSize:12});(0,_vitest.expect)((0,_typography.parseTypography)("text-sm")).toEqual({fontSize:14});(0,_vitest.expect)((0,_typography.parseTypography)("text-base")).toEqual({fontSize:16});(0,_vitest.expect)((0,_typography.parseTypography)("text-lg")).toEqual({fontSize:18});(0,_vitest.expect)((0,_typography.parseTypography)("text-xl")).toEqual({fontSize:20});(0,_vitest.expect)((0,_typography.parseTypography)("text-2xl")).toEqual({fontSize:24});(0,_vitest.expect)((0,_typography.parseTypography)("text-3xl")).toEqual({fontSize:30});(0,_vitest.expect)((0,_typography.parseTypography)("text-4xl")).toEqual({fontSize:36});(0,_vitest.expect)((0,_typography.parseTypography)("text-5xl")).toEqual({fontSize:48});(0,_vitest.expect)((0,_typography.parseTypography)("text-6xl")).toEqual({fontSize:60});(0,_vitest.expect)((0,_typography.parseTypography)("text-7xl")).toEqual({fontSize:72});(0,_vitest.expect)((0,_typography.parseTypography)("text-8xl")).toEqual({fontSize:96});(0,_vitest.expect)((0,_typography.parseTypography)("text-9xl")).toEqual({fontSize:128});});(0,_vitest.it)("should parse font size with arbitrary pixel values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-[18px]")).toEqual({fontSize:18});(0,_vitest.expect)((0,_typography.parseTypography)("text-[18]")).toEqual({fontSize:18});(0,_vitest.expect)((0,_typography.parseTypography)("text-[22px]")).toEqual({fontSize:22});(0,_vitest.expect)((0,_typography.parseTypography)("text-[22]")).toEqual({fontSize:22});(0,_vitest.expect)((0,_typography.parseTypography)("text-[100px]")).toEqual({fontSize:100});});});(0,_vitest.describe)("parseTypography - font weight",function(){(0,_vitest.it)("should parse font weight values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("font-thin")).toEqual({fontWeight:"100"});(0,_vitest.expect)((0,_typography.parseTypography)("font-extralight")).toEqual({fontWeight:"200"});(0,_vitest.expect)((0,_typography.parseTypography)("font-light")).toEqual({fontWeight:"300"});(0,_vitest.expect)((0,_typography.parseTypography)("font-normal")).toEqual({fontWeight:"400"});(0,_vitest.expect)((0,_typography.parseTypography)("font-medium")).toEqual({fontWeight:"500"});(0,_vitest.expect)((0,_typography.parseTypography)("font-semibold")).toEqual({fontWeight:"600"});(0,_vitest.expect)((0,_typography.parseTypography)("font-bold")).toEqual({fontWeight:"700"});(0,_vitest.expect)((0,_typography.parseTypography)("font-extrabold")).toEqual({fontWeight:"800"});(0,_vitest.expect)((0,_typography.parseTypography)("font-black")).toEqual({fontWeight:"900"});});});(0,_vitest.describe)("parseTypography - font style",function(){(0,_vitest.it)("should parse font style values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("italic")).toEqual({fontStyle:"italic"});(0,_vitest.expect)((0,_typography.parseTypography)("not-italic")).toEqual({fontStyle:"normal"});});});(0,_vitest.describe)("parseTypography - text alignment",function(){(0,_vitest.it)("should parse text alignment values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-left")).toEqual({textAlign:"left"});(0,_vitest.expect)((0,_typography.parseTypography)("text-center")).toEqual({textAlign:"center"});(0,_vitest.expect)((0,_typography.parseTypography)("text-right")).toEqual({textAlign:"right"});(0,_vitest.expect)((0,_typography.parseTypography)("text-justify")).toEqual({textAlign:"justify"});});});(0,_vitest.describe)("parseTypography - text decoration",function(){(0,_vitest.it)("should parse text decoration values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("underline")).toEqual({textDecorationLine:"underline"});(0,_vitest.expect)((0,_typography.parseTypography)("line-through")).toEqual({textDecorationLine:"line-through"});(0,_vitest.expect)((0,_typography.parseTypography)("no-underline")).toEqual({textDecorationLine:"none"});});});(0,_vitest.describe)("parseTypography - text transform",function(){(0,_vitest.it)("should parse text transform values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("uppercase")).toEqual({textTransform:"uppercase"});(0,_vitest.expect)((0,_typography.parseTypography)("lowercase")).toEqual({textTransform:"lowercase"});(0,_vitest.expect)((0,_typography.parseTypography)("capitalize")).toEqual({textTransform:"capitalize"});(0,_vitest.expect)((0,_typography.parseTypography)("normal-case")).toEqual({textTransform:"none"});});});(0,_vitest.describe)("parseTypography - line height",function(){(0,_vitest.it)("should parse line height with preset values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("leading-none")).toEqual({lineHeight:16});(0,_vitest.expect)((0,_typography.parseTypography)("leading-tight")).toEqual({lineHeight:20});(0,_vitest.expect)((0,_typography.parseTypography)("leading-snug")).toEqual({lineHeight:22});(0,_vitest.expect)((0,_typography.parseTypography)("leading-normal")).toEqual({lineHeight:24});(0,_vitest.expect)((0,_typography.parseTypography)("leading-relaxed")).toEqual({lineHeight:28});(0,_vitest.expect)((0,_typography.parseTypography)("leading-loose")).toEqual({lineHeight:32});});(0,_vitest.it)("should parse line height with arbitrary pixel values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("leading-[24px]")).toEqual({lineHeight:24});(0,_vitest.expect)((0,_typography.parseTypography)("leading-[24]")).toEqual({lineHeight:24});(0,_vitest.expect)((0,_typography.parseTypography)("leading-[30px]")).toEqual({lineHeight:30});(0,_vitest.expect)((0,_typography.parseTypography)("leading-[30]")).toEqual({lineHeight:30});(0,_vitest.expect)((0,_typography.parseTypography)("leading-[50px]")).toEqual({lineHeight:50});});});(0,_vitest.describe)("parseTypography - letter spacing",function(){(0,_vitest.it)("should parse letter spacing with preset values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("tracking-tighter")).toEqual({letterSpacing:-0.8});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-tight")).toEqual({letterSpacing:-0.4});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-normal")).toEqual({letterSpacing:0});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-wide")).toEqual({letterSpacing:0.4});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-wider")).toEqual({letterSpacing:0.8});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-widest")).toEqual({letterSpacing:1.6});});});(0,_vitest.describe)("parseTypography - edge cases",function(){(0,_vitest.it)("should return null for invalid classes",function(){(0,_vitest.expect)((0,_typography.parseTypography)("invalid")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("text")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("font")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("leading")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("tracking")).toBeNull();});(0,_vitest.it)("should return null for invalid font size values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-invalid")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("text-10xl")).toBeNull();});(0,_vitest.it)("should return null for invalid font weight values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("font-invalid")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("font-100")).toBeNull();});(0,_vitest.it)("should return null for arbitrary values with unsupported units",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-[16rem]")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("text-[2em]")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("leading-[2rem]")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("leading-[1.5em]")).toBeNull();});(0,_vitest.it)("should return null for malformed arbitrary values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-[16")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("text-16]")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("text-[]")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("leading-[24")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("leading-24]")).toBeNull();});(0,_vitest.it)("should not match partial class names",function(){(0,_vitest.expect)((0,_typography.parseTypography)("mytext-lg")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("font-bold-extra")).toBeNull();(0,_vitest.expect)((0,_typography.parseTypography)("italic-text")).toBeNull();});});(0,_vitest.describe)("parseTypography - comprehensive coverage",function(){(0,_vitest.it)("should handle all typography categories independently",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-base")).toEqual({fontSize:16});(0,_vitest.expect)((0,_typography.parseTypography)("font-bold")).toEqual({fontWeight:"700"});(0,_vitest.expect)((0,_typography.parseTypography)("italic")).toEqual({fontStyle:"italic"});(0,_vitest.expect)((0,_typography.parseTypography)("text-center")).toEqual({textAlign:"center"});(0,_vitest.expect)((0,_typography.parseTypography)("underline")).toEqual({textDecorationLine:"underline"});(0,_vitest.expect)((0,_typography.parseTypography)("uppercase")).toEqual({textTransform:"uppercase"});(0,_vitest.expect)((0,_typography.parseTypography)("leading-normal")).toEqual({lineHeight:24});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-wide")).toEqual({letterSpacing:0.4});});(0,_vitest.it)("should handle arbitrary values for font size and line height",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-[19px]")).toEqual({fontSize:19});(0,_vitest.expect)((0,_typography.parseTypography)("text-[19]")).toEqual({fontSize:19});(0,_vitest.expect)((0,_typography.parseTypography)("leading-[26px]")).toEqual({lineHeight:26});(0,_vitest.expect)((0,_typography.parseTypography)("leading-[26]")).toEqual({lineHeight:26});});(0,_vitest.it)("should handle edge case values",function(){(0,_vitest.expect)((0,_typography.parseTypography)("text-xs")).toEqual({fontSize:12});(0,_vitest.expect)((0,_typography.parseTypography)("text-9xl")).toEqual({fontSize:128});(0,_vitest.expect)((0,_typography.parseTypography)("leading-none")).toEqual({lineHeight:16});(0,_vitest.expect)((0,_typography.parseTypography)("leading-loose")).toEqual({lineHeight:32});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-tighter")).toEqual({letterSpacing:-0.8});(0,_vitest.expect)((0,_typography.parseTypography)("tracking-widest")).toEqual({letterSpacing:1.6});});});

package/dist/types.d.ts

@@ -3,8 +3,11 @@
  */
 import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
 export type RNStyle = ViewStyle | TextStyle | ImageStyle;
-export type StyleObject = {
-    [key: string]: string | number;
+export type StyleObject = Record<Exclude<string, "shadowOffset">, string | number | undefined> & {
+    shadowOffset?: {
+        width: number;
+        height: number;
+    };
 };
 export type SpacingValue = number;
 export type ColorValue = string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.3.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,22 +11,28 @@
 
 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>;
 };
 
+// Use a unique identifier to avoid conflicts with user's own styles
+const STYLES_IDENTIFIER = "_twStyles";
+
 /**
  * Supported className-like attributes
  */
 const SUPPORTED_CLASS_ATTRIBUTES = [
   "className",
+  "containerClassName",
   "contentContainerClassName",
   "columnWrapperClassName",
   "ListHeaderComponentClassName",
@@ -37,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";
   }
@@ -52,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
  */
@@ -117,7 +169,7 @@ function processTemplateLiteral(
         staticParts.push(cls);
 
         // Add to parts array
-        parts.push(t.memberExpression(t.identifier("styles"), t.identifier(styleKey)));
+        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
       }
     }
 
@@ -216,7 +268,7 @@ function processStringOrExpression(node: any, state: PluginState, t: typeof Babe
     const styleKey = generateStyleKey(className);
     state.styleRegistry.set(styleKey, styleObject);
 
-    return t.memberExpression(t.identifier("styles"), t.identifier(styleKey));
+    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
   }
 
   // Handle nested expressions recursively
@@ -239,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,
 }: {
@@ -311,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();
 
@@ -323,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
@@ -426,7 +676,7 @@ function replaceWithStyleAttribute(
 ) {
   const styleAttribute = t.jsxAttribute(
     t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier("styles"), t.identifier(styleKey))),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey))),
   );
 
   classNamePath.replaceWith(styleAttribute);
@@ -446,7 +696,7 @@ function mergeStyleAttribute(
   // Create array with className styles first, then existing styles
   // This allows existing styles to override className styles
   const styleArray = t.arrayExpression([
-    t.memberExpression(t.identifier("styles"), t.identifier(styleKey)),
+    t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)),
     existingStyle,
   ]);
 
@@ -502,13 +752,72 @@ function mergeDynamicStyleAttribute(
 }
 
 /**
- * Inject StyleSheet.create with all collected styles
+ * Replace className with style function attribute (for Pressable with modifiers)
  */
-function injectStyles(
-  path: NodePath,
-  styleRegistry: Map<string, Record<string, string | number>>,
+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 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[] = [];
 
@@ -531,10 +840,10 @@ function injectStyles(
     styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
   }
 
-  // Create: const styles = StyleSheet.create({ ... })
+  // Create: const _tailwindStyles = StyleSheet.create({ ... })
   const styleSheet = t.variableDeclaration("const", [
     t.variableDeclarator(
-      t.identifier("styles"),
+      t.identifier(STYLES_IDENTIFIER),
       t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
         t.objectExpression(styleProperties),
       ]),
@@ -546,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}
+    />
+  );
+});