@mgcrea/react-native-tailwind 0.2.0 → 0.4.0

package/README.md

@@ -22,6 +22,7 @@ Compile-time Tailwind CSS for React Native with zero runtime overhead. Transform
 - 🔧 **No dependencies** — Direct-to-React-Native style generation without tailwindcss package
 - 🎨 **Custom colors** — Extend the default palette via `tailwind.config.*`
 - 📐 **Arbitrary values** — Use custom sizes and borders: `w-[123px]`, `rounded-[20px]`
+- 🔀 **Dynamic className** — Conditional styles with hybrid compile-time optimization
 - 📜 **Special style props** — Support for `contentContainerClassName`, `columnWrapperClassName`, and more
 
 ## Installation
@@ -94,11 +95,11 @@ The Babel plugin transforms your code at compile time:
 ```tsx
 import { StyleSheet } from "react-native";
 
-<View style={styles._bg_blue_500_m_4_p_2_rounded_lg} />;
-<ScrollView contentContainerStyle={styles._gap_4_items_center} />;
-<FlatList columnWrapperStyle={styles._gap_4} ListHeaderComponentStyle={styles._bg_gray_100_p_4} />;
+<View style={_twStyles._bg_blue_500_m_4_p_2_rounded_lg} />;
+<ScrollView contentContainerStyle={_twStyles._gap_4_items_center} />;
+<FlatList columnWrapperStyle={_twStyles._gap_4} ListHeaderComponentStyle={_twStyles._bg_gray_100_p_4} />;
 
-const styles = StyleSheet.create({
+const _twStyles = StyleSheet.create({
   _bg_blue_500_m_4_p_2_rounded_lg: {
     margin: 16,
     padding: 8,
@@ -249,6 +250,106 @@ export function Card({ title, description, onPress }) {
 }
 ```
 
+### Dynamic className (Hybrid Optimization)
+
+You can use dynamic expressions in `className` for conditional styling. The Babel plugin will parse all static strings at compile-time and preserve the conditional logic:
+
+**Conditional Expression:**
+
+```tsx
+import { useState } from "react";
+import { View, Text, Pressable } from "react-native";
+
+export function ToggleButton() {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <Pressable
+      onPress={() => setIsActive(!isActive)}
+      className={isActive ? "bg-green-500 p-4" : "bg-red-500 p-4"}
+    >
+      <Text className="text-white">{isActive ? "Active" : "Inactive"}</Text>
+    </Pressable>
+  );
+}
+```
+
+**Transforms to:**
+
+```tsx
+<Pressable
+  onPress={() => setIsActive(!isActive)}
+  style={isActive ? _twStyles._bg_green_500_p_4 : _twStyles._bg_red_500_p_4}
+>
+  <Text style={_twStyles._text_white}>{isActive ? "Active" : "Inactive"}</Text>
+</Pressable>
+```
+
+**Template Literal (Static + Dynamic):**
+
+```tsx
+<Pressable className={`border-2 rounded-lg ${isActive ? "bg-blue-500" : "bg-gray-300"} p-4`}>
+  <Text className="text-white">Click Me</Text>
+</Pressable>
+```
+
+**Transforms to:**
+
+```tsx
+<Pressable
+  style={[
+    _twStyles._border_2,
+    _twStyles._rounded_lg,
+    isActive ? _twStyles._bg_blue_500 : _twStyles._bg_gray_300,
+    _twStyles._p_4,
+  ]}
+>
+  <Text style={_twStyles._text_white}>Click Me</Text>
+</Pressable>
+```
+
+**Logical Expression:**
+
+```tsx
+<View className={`p-4 bg-gray-100 ${isActive && "border-4 border-purple-500"}`}>
+  <Text>Content</Text>
+</View>
+```
+
+**Transforms to:**
+
+```tsx
+<View style={[_twStyles._p_4, _twStyles._bg_gray_100, isActive && _twStyles._border_4_border_purple_500]}>
+  <Text>Content</Text>
+</View>
+```
+
+**Multiple Conditionals:**
+
+```tsx
+<View className={`${size === "lg" ? "p-8" : "p-4"} ${isActive ? "bg-blue-500" : "bg-gray-400"}`}>
+  <Text>Dynamic Size & Color</Text>
+</View>
+```
+
+**Key Benefits:**
+
+- ✅ All string literals are parsed at compile-time
+- ✅ Only conditional logic remains at runtime (no parser overhead)
+- ✅ Full type-safety and validation for all class names
+- ✅ Optimal performance with pre-compiled styles
+
+**What Won't Work:**
+
+```tsx
+// ❌ Runtime variables in class names
+const spacing = 4;
+<View className={`p-${spacing}`} />  // Can't parse "p-${spacing}" at compile time
+
+// ✅ Use inline style for truly dynamic values:
+<View className="border-2" style={{ padding: spacing * 4 }} />
+```
+
 ### Combining with Inline Styles
 
 You can use inline `style` prop alongside `className`:
@@ -262,7 +363,7 @@ You can use inline `style` prop alongside `className`:
 The Babel plugin will merge them:
 
 ```tsx
-<View style={[styles._className_styles, { paddingTop: safeAreaInsets.top }]}>
+<View style={[_twStyles._className_styles, { paddingTop: safeAreaInsets.top }]}>
   <Text>Content</Text>
 </View>
 ```
@@ -456,7 +557,7 @@ Access the parser and constants programmatically:
 import { parseClassName, COLORS, SPACING_SCALE } from "@mgcrea/react-native-tailwind";
 
 // Parse className strings
-const styles = parseClassName("m-4 p-2 bg-blue-500");
+const _twStyles = parseClassName("m-4 p-2 bg-blue-500");
 // Returns: { margin: 16, padding: 8, backgroundColor: '#3B82F6' }
 
 // Access default scales

package/dist/babel/index.cjs

@@ -950,6 +950,7 @@ function extractCustomColors(filename) {
 }
 
 // src/babel/index.ts
+var STYLES_IDENTIFIER = "_twStyles";
 var SUPPORTED_CLASS_ATTRIBUTES = [
   "className",
   "contentContainerClassName",
@@ -972,6 +973,102 @@ function getTargetStyleProp(attributeName) {
   }
   return "style";
 }
+function processDynamicExpression(expression, state, t) {
+  if (t.isTemplateLiteral(expression)) {
+    return processTemplateLiteral(expression, state, t);
+  }
+  if (t.isConditionalExpression(expression)) {
+    return processConditionalExpression(expression, state, t);
+  }
+  if (t.isLogicalExpression(expression)) {
+    return processLogicalExpression(expression, state, t);
+  }
+  return null;
+}
+function processTemplateLiteral(node, state, t) {
+  const parts = [];
+  const staticParts = [];
+  for (let i = 0; i < node.quasis.length; i++) {
+    const quasi = node.quasis[i];
+    const staticText = quasi.value.cooked?.trim();
+    if (staticText) {
+      const classes = staticText.split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        const styleObject = parseClassName2(cls, state.customColors);
+        const styleKey = generateStyleKey2(cls);
+        state.styleRegistry.set(styleKey, styleObject);
+        staticParts.push(cls);
+        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
+      }
+    }
+    if (i < node.expressions.length) {
+      const expr = node.expressions[i];
+      const result = processDynamicExpression(expr, state, t);
+      if (result) {
+        parts.push(result.expression);
+      } else {
+        parts.push(expr);
+      }
+    }
+  }
+  if (parts.length === 0) {
+    return null;
+  }
+  const expression = parts.length === 1 ? parts[0] : t.arrayExpression(parts);
+  return {
+    expression,
+    staticParts: staticParts.length > 0 ? staticParts : void 0
+  };
+}
+function processConditionalExpression(node, state, t) {
+  const consequent = processStringOrExpression(node.consequent, state, t);
+  const alternate = processStringOrExpression(node.alternate, state, t);
+  if (!consequent && !alternate) {
+    return null;
+  }
+  const expression = t.conditionalExpression(
+    node.test,
+    consequent ?? t.nullLiteral(),
+    alternate ?? t.nullLiteral()
+  );
+  return { expression };
+}
+function processLogicalExpression(node, state, t) {
+  if (node.operator !== "&&") {
+    return null;
+  }
+  const right = processStringOrExpression(node.right, state, t);
+  if (!right) {
+    return null;
+  }
+  const expression = t.logicalExpression("&&", node.left, right);
+  return { expression };
+}
+function processStringOrExpression(node, state, t) {
+  if (t.isStringLiteral(node)) {
+    const className = node.value.trim();
+    if (!className) {
+      return null;
+    }
+    const styleObject = parseClassName2(className, state.customColors);
+    const styleKey = generateStyleKey2(className);
+    state.styleRegistry.set(styleKey, styleObject);
+    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
+  }
+  if (t.isConditionalExpression(node)) {
+    const result = processConditionalExpression(node, state, t);
+    return result?.expression ?? null;
+  }
+  if (t.isLogicalExpression(node)) {
+    const result = processLogicalExpression(node, state, t);
+    return result?.expression ?? null;
+  }
+  if (t.isTemplateLiteral(node)) {
+    const result = processTemplateLiteral(node, state, t);
+    return result?.expression ?? null;
+  }
+  return null;
+}
 function reactNativeTailwindBabelPlugin({
   types: t
 }) {
@@ -1021,34 +1118,61 @@ function reactNativeTailwindBabelPlugin({
           return;
         }
         const value = node.value;
-        if (!t.isStringLiteral(value)) {
-          if (process.env.NODE_ENV !== "production") {
-            const filename = state.file.opts.filename ?? "unknown";
-            const targetStyleProp2 = getTargetStyleProp(attributeName);
-            console.warn(
-              `[react-native-tailwind] Dynamic ${attributeName} values are not supported at ${filename}. Use the ${targetStyleProp2} prop for dynamic values.`
-            );
+        const targetStyleProp = getTargetStyleProp(attributeName);
+        if (t.isStringLiteral(value)) {
+          const className = value.value.trim();
+          if (!className) {
+            path2.remove();
+            return;
+          }
+          state.hasClassNames = true;
+          const styleObject = parseClassName2(className, state.customColors);
+          const styleKey = generateStyleKey2(className);
+          state.styleRegistry.set(styleKey, styleObject);
+          const parent = path2.parent;
+          const styleAttribute = parent.attributes.find(
+            (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
+          );
+          if (styleAttribute) {
+            mergeStyleAttribute(path2, styleAttribute, styleKey, t);
+          } else {
+            replaceWithStyleAttribute(path2, styleKey, targetStyleProp, t);
           }
           return;
         }
-        const className = value.value.trim();
-        if (!className) {
-          path2.remove();
-          return;
+        if (t.isJSXExpressionContainer(value)) {
+          const expression = value.expression;
+          if (t.isJSXEmptyExpression(expression)) {
+            return;
+          }
+          try {
+            const result = processDynamicExpression(expression, state, t);
+            if (result) {
+              state.hasClassNames = true;
+              const parent = path2.parent;
+              const styleAttribute = parent.attributes.find(
+                (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
+              );
+              if (styleAttribute) {
+                mergeDynamicStyleAttribute(path2, styleAttribute, result, t);
+              } else {
+                replaceDynamicWithStyleAttribute(path2, result, targetStyleProp, t);
+              }
+              return;
+            }
+          } catch (error) {
+            if (process.env.NODE_ENV !== "production") {
+              console.warn(
+                `[react-native-tailwind] Failed to process dynamic ${attributeName} at ${state.file.opts.filename ?? "unknown"}: ${error instanceof Error ? error.message : String(error)}`
+              );
+            }
+          }
         }
-        state.hasClassNames = true;
-        const styleObject = parseClassName2(className, state.customColors);
-        const styleKey = generateStyleKey2(className);
-        state.styleRegistry.set(styleKey, styleObject);
-        const targetStyleProp = getTargetStyleProp(attributeName);
-        const parent = path2.parent;
-        const styleAttribute = parent.attributes.find(
-          (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
-        );
-        if (styleAttribute) {
-          mergeStyleAttribute(path2, styleAttribute, styleKey, t);
-        } else {
-          replaceWithStyleAttribute(path2, styleKey, targetStyleProp, t);
+        if (process.env.NODE_ENV !== "production") {
+          const filename = state.file.opts.filename ?? "unknown";
+          console.warn(
+            `[react-native-tailwind] Dynamic ${attributeName} values are not fully supported at ${filename}. Use the ${targetStyleProp} prop for dynamic values.`
+          );
         }
       }
     }
@@ -1064,19 +1188,37 @@ function addStyleSheetImport(path2, t) {
 function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, t) {
   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);
 }
 function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, t) {
   const existingStyle = styleAttribute.value.expression;
   const styleArray = t.arrayExpression([
-    t.memberExpression(t.identifier("styles"), t.identifier(styleKey)),
+    t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)),
     existingStyle
   ]);
   styleAttribute.value = t.jsxExpressionContainer(styleArray);
   classNamePath.remove();
 }
+function replaceDynamicWithStyleAttribute(classNamePath, result, targetStyleProp, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(result.expression)
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeDynamicStyleAttribute(classNamePath, styleAttribute, result, t) {
+  const existingStyle = styleAttribute.value.expression;
+  let styleArray;
+  if (t.isArrayExpression(existingStyle)) {
+    styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
+  } else {
+    styleArray = t.arrayExpression([result.expression, existingStyle]);
+  }
+  styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  classNamePath.remove();
+}
 function injectStyles(path2, styleRegistry, t) {
   const styleProperties = [];
   for (const [key, styleObject] of styleRegistry) {
@@ -1095,7 +1237,7 @@ function injectStyles(path2, styleRegistry, t) {
   }
   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)
       ])

package/dist/babel/index.ts

@@ -22,6 +22,9 @@ type PluginState = PluginPass & {
   customColors: Record<string, string>;
 };
 
+// Use a unique identifier to avoid conflicts with user's own styles
+const STYLES_IDENTIFIER = "_twStyles";
+
 /**
  * Supported className-like attributes
  */
@@ -52,6 +55,193 @@ function getTargetStyleProp(attributeName: string): string {
   return "style";
 }
 
+/**
+ * Result of processing a dynamic expression
+ */
+type DynamicExpressionResult = {
+  // The transformed expression to use in the style prop
+  expression: any;
+  // Static parts that can be parsed at compile time (if any)
+  staticParts?: string[];
+};
+
+/**
+ * Process a dynamic className expression
+ * Extracts static strings and transforms the expression to use pre-compiled styles
+ */
+function processDynamicExpression(
+  expression: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  // Handle template literals: `m-4 ${condition ? "p-4" : "p-2"}`
+  if (t.isTemplateLiteral(expression)) {
+    return processTemplateLiteral(expression, state, t);
+  }
+
+  // Handle conditional expressions: condition ? "m-4" : "p-2"
+  if (t.isConditionalExpression(expression)) {
+    return processConditionalExpression(expression, state, t);
+  }
+
+  // Handle logical expressions: condition && "m-4"
+  if (t.isLogicalExpression(expression)) {
+    return processLogicalExpression(expression, state, t);
+  }
+
+  // Unsupported expression type
+  return null;
+}
+
+/**
+ * Process template literal: `static ${dynamic} more-static`
+ */
+function processTemplateLiteral(
+  node: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  const parts: any[] = [];
+  const staticParts: string[] = [];
+
+  // Process quasis (static parts) and expressions (dynamic parts)
+  for (let i = 0; i < node.quasis.length; i++) {
+    const quasi = node.quasis[i];
+    const staticText = quasi.value.cooked?.trim();
+
+    // Add static part if not empty
+    if (staticText) {
+      // Parse static classes and add to registry
+      const classes = staticText.split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        const styleObject = parseClassName(cls, state.customColors);
+        const styleKey = generateStyleKey(cls);
+        state.styleRegistry.set(styleKey, styleObject);
+        staticParts.push(cls);
+
+        // Add to parts array
+        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
+      }
+    }
+
+    // Add dynamic expression if exists
+    if (i < node.expressions.length) {
+      const expr = node.expressions[i];
+
+      // Recursively process nested dynamic expressions
+      const result = processDynamicExpression(expr, state, t);
+      if (result) {
+        parts.push(result.expression);
+      } else {
+        // For unsupported expressions, keep them as-is
+        // This won't work at runtime but maintains the structure
+        parts.push(expr);
+      }
+    }
+  }
+
+  if (parts.length === 0) {
+    return null;
+  }
+
+  // If single part, return it directly; otherwise return array
+  const expression = parts.length === 1 ? parts[0] : t.arrayExpression(parts);
+
+  return {
+    expression,
+    staticParts: staticParts.length > 0 ? staticParts : undefined,
+  };
+}
+
+/**
+ * Process conditional expression: condition ? "class-a" : "class-b"
+ */
+function processConditionalExpression(
+  node: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  const consequent = processStringOrExpression(node.consequent, state, t);
+  const alternate = processStringOrExpression(node.alternate, state, t);
+
+  if (!consequent && !alternate) {
+    return null;
+  }
+
+  // Build conditional: condition ? consequentStyle : alternateStyle
+  const expression = t.conditionalExpression(
+    node.test,
+    consequent ?? t.nullLiteral(),
+    alternate ?? t.nullLiteral(),
+  );
+
+  return { expression };
+}
+
+/**
+ * Process logical expression: condition && "class-a"
+ */
+function processLogicalExpression(
+  node: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  // Only handle AND (&&) expressions
+  if (node.operator !== "&&") {
+    return null;
+  }
+
+  const right = processStringOrExpression(node.right, state, t);
+
+  if (!right) {
+    return null;
+  }
+
+  // Build logical: condition && style
+  const expression = t.logicalExpression("&&", node.left, right);
+
+  return { expression };
+}
+
+/**
+ * Process a node that might be a string literal or another expression
+ */
+function processStringOrExpression(node: any, state: PluginState, t: typeof BabelTypes): any {
+  // Handle string literals
+  if (t.isStringLiteral(node)) {
+    const className = node.value.trim();
+    if (!className) {
+      return null;
+    }
+
+    // Parse and register styles
+    const styleObject = parseClassName(className, state.customColors);
+    const styleKey = generateStyleKey(className);
+    state.styleRegistry.set(styleKey, styleObject);
+
+    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
+  }
+
+  // Handle nested expressions recursively
+  if (t.isConditionalExpression(node)) {
+    const result = processConditionalExpression(node, state, t);
+    return result?.expression ?? null;
+  }
+
+  if (t.isLogicalExpression(node)) {
+    const result = processLogicalExpression(node, state, t);
+    return result?.expression ?? null;
+  }
+
+  if (t.isTemplateLiteral(node)) {
+    const result = processTemplateLiteral(node, state, t);
+    return result?.expression ?? null;
+  }
+
+  // Unsupported - return null
+  return null;
+}
+
 export default function reactNativeTailwindBabelPlugin({
   types: t,
 }: {
@@ -121,54 +311,94 @@ export default function reactNativeTailwindBabelPlugin({
 
         const value = node.value;
 
-        // Only handle static string literals
-        if (!t.isStringLiteral(value)) {
-          // Warn about dynamic className in development
-          if (process.env.NODE_ENV !== "production") {
-            const filename = state.file.opts.filename ?? "unknown";
-            const targetStyleProp = getTargetStyleProp(attributeName);
-            console.warn(
-              `[react-native-tailwind] Dynamic ${attributeName} values are not supported at ${filename}. ` +
-                `Use the ${targetStyleProp} prop for dynamic values.`,
-            );
+        // Determine target style prop based on attribute name
+        const targetStyleProp = getTargetStyleProp(attributeName);
+
+        // Handle static string literals (original behavior)
+        if (t.isStringLiteral(value)) {
+          const className = value.value.trim();
+
+          // Skip empty classNames
+          if (!className) {
+            path.remove();
+            return;
           }
-          return;
-        }
 
-        const className = value.value.trim();
+          state.hasClassNames = true;
 
-        // Skip empty classNames
-        if (!className) {
-          path.remove();
-          return;
-        }
+          // Parse className to React Native styles
+          const styleObject = parseClassName(className, state.customColors);
 
-        state.hasClassNames = true;
+          // Generate unique style key
+          const styleKey = generateStyleKey(className);
 
-        // Parse className to React Native styles
-        const styleObject = parseClassName(className, state.customColors);
+          // Store in registry
+          state.styleRegistry.set(styleKey, styleObject);
 
-        // Generate unique style key
-        const styleKey = generateStyleKey(className);
+          // Check if there's already a style prop on this element
+          const parent = path.parent as any;
+          const styleAttribute = parent.attributes.find(
+            (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+          );
 
-        // Store in registry
-        state.styleRegistry.set(styleKey, styleObject);
+          if (styleAttribute) {
+            // Merge with existing style prop
+            mergeStyleAttribute(path, styleAttribute, styleKey, t);
+          } else {
+            // Replace className with style prop
+            replaceWithStyleAttribute(path, styleKey, targetStyleProp, t);
+          }
+          return;
+        }
 
-        // Determine target style prop based on attribute name
-        const targetStyleProp = getTargetStyleProp(attributeName);
+        // Handle dynamic expressions (JSXExpressionContainer)
+        if (t.isJSXExpressionContainer(value)) {
+          const expression = value.expression;
+
+          // Skip JSXEmptyExpression
+          if (t.isJSXEmptyExpression(expression)) {
+            return;
+          }
+
+          try {
+            // Process dynamic expression
+            const result = processDynamicExpression(expression, state, t);
+
+            if (result) {
+              state.hasClassNames = true;
+
+              // Check if there's already a style prop on this element
+              const parent = path.parent as any;
+              const styleAttribute = parent.attributes.find(
+                (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+              );
+
+              if (styleAttribute) {
+                // Merge with existing style prop
+                mergeDynamicStyleAttribute(path, styleAttribute, result, t);
+              } else {
+                // Replace className with style prop
+                replaceDynamicWithStyleAttribute(path, result, targetStyleProp, t);
+              }
+              return;
+            }
+          } catch (error) {
+            // Fall through to warning
+            if (process.env.NODE_ENV !== "production") {
+              console.warn(
+                `[react-native-tailwind] Failed to process dynamic ${attributeName} at ${state.file.opts.filename ?? "unknown"}: ${error instanceof Error ? error.message : String(error)}`,
+              );
+            }
+          }
+        }
 
-        // Check if there's already a style prop on this element
-        const parent = path.parent as any;
-        const styleAttribute = parent.attributes.find(
-          (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
-        );
-
-        if (styleAttribute) {
-          // Merge with existing style prop
-          mergeStyleAttribute(path, styleAttribute, styleKey, t);
-        } else {
-          // Replace className with style prop
-          replaceWithStyleAttribute(path, styleKey, targetStyleProp, t);
+        // Unsupported dynamic className - warn in development
+        if (process.env.NODE_ENV !== "production") {
+          const filename = state.file.opts.filename ?? "unknown";
+          console.warn(
+            `[react-native-tailwind] Dynamic ${attributeName} values are not fully supported at ${filename}. ` +
+              `Use the ${targetStyleProp} prop for dynamic values.`,
+          );
         }
       },
     },
@@ -199,7 +429,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);
@@ -219,7 +449,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,
   ]);
 
@@ -229,6 +459,51 @@ function mergeStyleAttribute(
   classNamePath.remove();
 }
 
+/**
+ * Replace className with dynamic style attribute
+ */
+function replaceDynamicWithStyleAttribute(
+  classNamePath: NodePath,
+  result: DynamicExpressionResult,
+  targetStyleProp: string,
+  t: typeof BabelTypes,
+) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(result.expression),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge dynamic className styles with existing style prop
+ */
+function mergeDynamicStyleAttribute(
+  classNamePath: NodePath,
+  styleAttribute: any,
+  result: DynamicExpressionResult,
+  t: typeof BabelTypes,
+) {
+  const existingStyle = styleAttribute.value.expression;
+
+  // Merge dynamic expression with existing styles
+  // If existing is already an array, append to it; otherwise create new array
+  let styleArray;
+  if (t.isArrayExpression(existingStyle)) {
+    // Prepend dynamic styles to existing array
+    styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
+  } else {
+    // Create new array with dynamic styles first, then existing
+    styleArray = t.arrayExpression([result.expression, existingStyle]);
+  }
+
+  styleAttribute.value = t.jsxExpressionContainer(styleArray);
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
 /**
  * Inject StyleSheet.create with all collected styles
  */
@@ -259,10 +534,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),
       ]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.2.0",
+  "version": "0.4.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/index.ts

@@ -22,6 +22,9 @@ type PluginState = PluginPass & {
   customColors: Record<string, string>;
 };
 
+// Use a unique identifier to avoid conflicts with user's own styles
+const STYLES_IDENTIFIER = "_twStyles";
+
 /**
  * Supported className-like attributes
  */
@@ -52,6 +55,193 @@ function getTargetStyleProp(attributeName: string): string {
   return "style";
 }
 
+/**
+ * Result of processing a dynamic expression
+ */
+type DynamicExpressionResult = {
+  // The transformed expression to use in the style prop
+  expression: any;
+  // Static parts that can be parsed at compile time (if any)
+  staticParts?: string[];
+};
+
+/**
+ * Process a dynamic className expression
+ * Extracts static strings and transforms the expression to use pre-compiled styles
+ */
+function processDynamicExpression(
+  expression: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  // Handle template literals: `m-4 ${condition ? "p-4" : "p-2"}`
+  if (t.isTemplateLiteral(expression)) {
+    return processTemplateLiteral(expression, state, t);
+  }
+
+  // Handle conditional expressions: condition ? "m-4" : "p-2"
+  if (t.isConditionalExpression(expression)) {
+    return processConditionalExpression(expression, state, t);
+  }
+
+  // Handle logical expressions: condition && "m-4"
+  if (t.isLogicalExpression(expression)) {
+    return processLogicalExpression(expression, state, t);
+  }
+
+  // Unsupported expression type
+  return null;
+}
+
+/**
+ * Process template literal: `static ${dynamic} more-static`
+ */
+function processTemplateLiteral(
+  node: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  const parts: any[] = [];
+  const staticParts: string[] = [];
+
+  // Process quasis (static parts) and expressions (dynamic parts)
+  for (let i = 0; i < node.quasis.length; i++) {
+    const quasi = node.quasis[i];
+    const staticText = quasi.value.cooked?.trim();
+
+    // Add static part if not empty
+    if (staticText) {
+      // Parse static classes and add to registry
+      const classes = staticText.split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        const styleObject = parseClassName(cls, state.customColors);
+        const styleKey = generateStyleKey(cls);
+        state.styleRegistry.set(styleKey, styleObject);
+        staticParts.push(cls);
+
+        // Add to parts array
+        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
+      }
+    }
+
+    // Add dynamic expression if exists
+    if (i < node.expressions.length) {
+      const expr = node.expressions[i];
+
+      // Recursively process nested dynamic expressions
+      const result = processDynamicExpression(expr, state, t);
+      if (result) {
+        parts.push(result.expression);
+      } else {
+        // For unsupported expressions, keep them as-is
+        // This won't work at runtime but maintains the structure
+        parts.push(expr);
+      }
+    }
+  }
+
+  if (parts.length === 0) {
+    return null;
+  }
+
+  // If single part, return it directly; otherwise return array
+  const expression = parts.length === 1 ? parts[0] : t.arrayExpression(parts);
+
+  return {
+    expression,
+    staticParts: staticParts.length > 0 ? staticParts : undefined,
+  };
+}
+
+/**
+ * Process conditional expression: condition ? "class-a" : "class-b"
+ */
+function processConditionalExpression(
+  node: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  const consequent = processStringOrExpression(node.consequent, state, t);
+  const alternate = processStringOrExpression(node.alternate, state, t);
+
+  if (!consequent && !alternate) {
+    return null;
+  }
+
+  // Build conditional: condition ? consequentStyle : alternateStyle
+  const expression = t.conditionalExpression(
+    node.test,
+    consequent ?? t.nullLiteral(),
+    alternate ?? t.nullLiteral(),
+  );
+
+  return { expression };
+}
+
+/**
+ * Process logical expression: condition && "class-a"
+ */
+function processLogicalExpression(
+  node: any,
+  state: PluginState,
+  t: typeof BabelTypes,
+): DynamicExpressionResult | null {
+  // Only handle AND (&&) expressions
+  if (node.operator !== "&&") {
+    return null;
+  }
+
+  const right = processStringOrExpression(node.right, state, t);
+
+  if (!right) {
+    return null;
+  }
+
+  // Build logical: condition && style
+  const expression = t.logicalExpression("&&", node.left, right);
+
+  return { expression };
+}
+
+/**
+ * Process a node that might be a string literal or another expression
+ */
+function processStringOrExpression(node: any, state: PluginState, t: typeof BabelTypes): any {
+  // Handle string literals
+  if (t.isStringLiteral(node)) {
+    const className = node.value.trim();
+    if (!className) {
+      return null;
+    }
+
+    // Parse and register styles
+    const styleObject = parseClassName(className, state.customColors);
+    const styleKey = generateStyleKey(className);
+    state.styleRegistry.set(styleKey, styleObject);
+
+    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
+  }
+
+  // Handle nested expressions recursively
+  if (t.isConditionalExpression(node)) {
+    const result = processConditionalExpression(node, state, t);
+    return result?.expression ?? null;
+  }
+
+  if (t.isLogicalExpression(node)) {
+    const result = processLogicalExpression(node, state, t);
+    return result?.expression ?? null;
+  }
+
+  if (t.isTemplateLiteral(node)) {
+    const result = processTemplateLiteral(node, state, t);
+    return result?.expression ?? null;
+  }
+
+  // Unsupported - return null
+  return null;
+}
+
 export default function reactNativeTailwindBabelPlugin({
   types: t,
 }: {
@@ -121,54 +311,94 @@ export default function reactNativeTailwindBabelPlugin({
 
         const value = node.value;
 
-        // Only handle static string literals
-        if (!t.isStringLiteral(value)) {
-          // Warn about dynamic className in development
-          if (process.env.NODE_ENV !== "production") {
-            const filename = state.file.opts.filename ?? "unknown";
-            const targetStyleProp = getTargetStyleProp(attributeName);
-            console.warn(
-              `[react-native-tailwind] Dynamic ${attributeName} values are not supported at ${filename}. ` +
-                `Use the ${targetStyleProp} prop for dynamic values.`,
-            );
+        // Determine target style prop based on attribute name
+        const targetStyleProp = getTargetStyleProp(attributeName);
+
+        // Handle static string literals (original behavior)
+        if (t.isStringLiteral(value)) {
+          const className = value.value.trim();
+
+          // Skip empty classNames
+          if (!className) {
+            path.remove();
+            return;
           }
-          return;
-        }
 
-        const className = value.value.trim();
+          state.hasClassNames = true;
 
-        // Skip empty classNames
-        if (!className) {
-          path.remove();
-          return;
-        }
+          // Parse className to React Native styles
+          const styleObject = parseClassName(className, state.customColors);
 
-        state.hasClassNames = true;
+          // Generate unique style key
+          const styleKey = generateStyleKey(className);
 
-        // Parse className to React Native styles
-        const styleObject = parseClassName(className, state.customColors);
+          // Store in registry
+          state.styleRegistry.set(styleKey, styleObject);
 
-        // Generate unique style key
-        const styleKey = generateStyleKey(className);
+          // Check if there's already a style prop on this element
+          const parent = path.parent as any;
+          const styleAttribute = parent.attributes.find(
+            (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+          );
 
-        // Store in registry
-        state.styleRegistry.set(styleKey, styleObject);
+          if (styleAttribute) {
+            // Merge with existing style prop
+            mergeStyleAttribute(path, styleAttribute, styleKey, t);
+          } else {
+            // Replace className with style prop
+            replaceWithStyleAttribute(path, styleKey, targetStyleProp, t);
+          }
+          return;
+        }
 
-        // Determine target style prop based on attribute name
-        const targetStyleProp = getTargetStyleProp(attributeName);
+        // Handle dynamic expressions (JSXExpressionContainer)
+        if (t.isJSXExpressionContainer(value)) {
+          const expression = value.expression;
+
+          // Skip JSXEmptyExpression
+          if (t.isJSXEmptyExpression(expression)) {
+            return;
+          }
+
+          try {
+            // Process dynamic expression
+            const result = processDynamicExpression(expression, state, t);
+
+            if (result) {
+              state.hasClassNames = true;
+
+              // Check if there's already a style prop on this element
+              const parent = path.parent as any;
+              const styleAttribute = parent.attributes.find(
+                (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+              );
+
+              if (styleAttribute) {
+                // Merge with existing style prop
+                mergeDynamicStyleAttribute(path, styleAttribute, result, t);
+              } else {
+                // Replace className with style prop
+                replaceDynamicWithStyleAttribute(path, result, targetStyleProp, t);
+              }
+              return;
+            }
+          } catch (error) {
+            // Fall through to warning
+            if (process.env.NODE_ENV !== "production") {
+              console.warn(
+                `[react-native-tailwind] Failed to process dynamic ${attributeName} at ${state.file.opts.filename ?? "unknown"}: ${error instanceof Error ? error.message : String(error)}`,
+              );
+            }
+          }
+        }
 
-        // Check if there's already a style prop on this element
-        const parent = path.parent as any;
-        const styleAttribute = parent.attributes.find(
-          (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
-        );
-
-        if (styleAttribute) {
-          // Merge with existing style prop
-          mergeStyleAttribute(path, styleAttribute, styleKey, t);
-        } else {
-          // Replace className with style prop
-          replaceWithStyleAttribute(path, styleKey, targetStyleProp, t);
+        // Unsupported dynamic className - warn in development
+        if (process.env.NODE_ENV !== "production") {
+          const filename = state.file.opts.filename ?? "unknown";
+          console.warn(
+            `[react-native-tailwind] Dynamic ${attributeName} values are not fully supported at ${filename}. ` +
+              `Use the ${targetStyleProp} prop for dynamic values.`,
+          );
         }
       },
     },
@@ -199,7 +429,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);
@@ -219,7 +449,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,
   ]);
 
@@ -229,6 +459,51 @@ function mergeStyleAttribute(
   classNamePath.remove();
 }
 
+/**
+ * Replace className with dynamic style attribute
+ */
+function replaceDynamicWithStyleAttribute(
+  classNamePath: NodePath,
+  result: DynamicExpressionResult,
+  targetStyleProp: string,
+  t: typeof BabelTypes,
+) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(result.expression),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge dynamic className styles with existing style prop
+ */
+function mergeDynamicStyleAttribute(
+  classNamePath: NodePath,
+  styleAttribute: any,
+  result: DynamicExpressionResult,
+  t: typeof BabelTypes,
+) {
+  const existingStyle = styleAttribute.value.expression;
+
+  // Merge dynamic expression with existing styles
+  // If existing is already an array, append to it; otherwise create new array
+  let styleArray;
+  if (t.isArrayExpression(existingStyle)) {
+    // Prepend dynamic styles to existing array
+    styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
+  } else {
+    // Create new array with dynamic styles first, then existing
+    styleArray = t.arrayExpression([result.expression, existingStyle]);
+  }
+
+  styleAttribute.value = t.jsxExpressionContainer(styleArray);
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
 /**
  * Inject StyleSheet.create with all collected styles
  */
@@ -259,10 +534,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),
       ]),