@mgcrea/react-native-tailwind 0.3.0 → 0.4.0

package/README.md

@@ -95,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,
@@ -279,18 +279,16 @@ export function ToggleButton() {
 ```tsx
 <Pressable
   onPress={() => setIsActive(!isActive)}
-  style={isActive ? styles._bg_green_500_p_4 : styles._bg_red_500_p_4}
+  style={isActive ? _twStyles._bg_green_500_p_4 : _twStyles._bg_red_500_p_4}
 >
-  <Text style={styles._text_white}>{isActive ? "Active" : "Inactive"}</Text>
+  <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`}
->
+<Pressable className={`border-2 rounded-lg ${isActive ? "bg-blue-500" : "bg-gray-300"} p-4`}>
   <Text className="text-white">Click Me</Text>
 </Pressable>
 ```
@@ -300,13 +298,13 @@ export function ToggleButton() {
 ```tsx
 <Pressable
   style={[
-    styles._border_2,
-    styles._rounded_lg,
-    isActive ? styles._bg_blue_500 : styles._bg_gray_300,
-    styles._p_4
+    _twStyles._border_2,
+    _twStyles._rounded_lg,
+    isActive ? _twStyles._bg_blue_500 : _twStyles._bg_gray_300,
+    _twStyles._p_4,
   ]}
 >
-  <Text style={styles._text_white}>Click Me</Text>
+  <Text style={_twStyles._text_white}>Click Me</Text>
 </Pressable>
 ```
 
@@ -321,13 +319,7 @@ export function ToggleButton() {
 **Transforms to:**
 
 ```tsx
-<View
-  style={[
-    styles._p_4,
-    styles._bg_gray_100,
-    isActive && styles._border_4_border_purple_500
-  ]}
->
+<View style={[_twStyles._p_4, _twStyles._bg_gray_100, isActive && _twStyles._border_4_border_purple_500]}>
   <Text>Content</Text>
 </View>
 ```
@@ -335,9 +327,7 @@ export function ToggleButton() {
 **Multiple Conditionals:**
 
 ```tsx
-<View
-  className={`${size === "lg" ? "p-8" : "p-4"} ${isActive ? "bg-blue-500" : "bg-gray-400"}`}
->
+<View className={`${size === "lg" ? "p-8" : "p-4"} ${isActive ? "bg-blue-500" : "bg-gray-400"}`}>
   <Text>Dynamic Size & Color</Text>
 </View>
 ```
@@ -373,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>
 ```
@@ -567,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",
@@ -997,7 +998,7 @@ function processTemplateLiteral(node, state, t) {
         const styleKey = generateStyleKey2(cls);
         state.styleRegistry.set(styleKey, styleObject);
         staticParts.push(cls);
-        parts.push(t.memberExpression(t.identifier("styles"), t.identifier(styleKey)));
+        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
       }
     }
     if (i < node.expressions.length) {
@@ -1052,7 +1053,7 @@ function processStringOrExpression(node, state, t) {
     const styleObject = parseClassName2(className, state.customColors);
     const styleKey = generateStyleKey2(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));
   }
   if (t.isConditionalExpression(node)) {
     const result = processConditionalExpression(node, state, t);
@@ -1187,14 +1188,14 @@ 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);
@@ -1236,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
  */
@@ -117,7 +120,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 +219,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
@@ -426,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);
@@ -446,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,
   ]);
 
@@ -531,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.3.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
  */
@@ -117,7 +120,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 +219,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
@@ -426,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);
@@ -446,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,
   ]);
 
@@ -531,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),
       ]),