@mgcrea/react-native-tailwind 0.7.0 → 0.8.0

package/dist/babel/index.cjs

@@ -258,8 +258,8 @@ function parseBorderRadius(cls) {
   return null;
 }
 
-// src/config/palettes.ts
-var TAILWIND_PALETTES = {
+// src/config/tailwind.ts
+var TAILWIND_COLORS = {
   red: {
     "50": "#fef2f2",
     "100": "#ffe2e2",
@@ -564,7 +564,7 @@ function flattenColors(colors, prefix = "") {
 
 // src/parser/colors.ts
 var COLORS = {
-  ...flattenColors(TAILWIND_PALETTES),
+  ...flattenColors(TAILWIND_COLORS),
   // Add basic colors
   white: "#FFFFFF",
   black: "#000000",
@@ -1619,6 +1619,16 @@ var TEXT_TRANSFORM_MAP = {
   capitalize: { textTransform: "capitalize" },
   "normal-case": { textTransform: "none" }
 };
+var LINE_HEIGHT_SCALE = {
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40
+};
 var LINE_HEIGHT_MAP = {
   "leading-none": { lineHeight: 16 },
   "leading-tight": { lineHeight: 20 },
@@ -1683,12 +1693,50 @@ function parseTypography(cls) {
     if (arbitraryValue !== null) {
       return { lineHeight: arbitraryValue };
     }
+    const lineHeight = LINE_HEIGHT_SCALE[heightKey];
+    if (lineHeight !== void 0) {
+      return { lineHeight };
+    }
   }
   return FONT_FAMILY_MAP[cls] ?? FONT_WEIGHT_MAP[cls] ?? FONT_STYLE_MAP[cls] ?? TEXT_ALIGN_MAP[cls] ?? TEXT_DECORATION_MAP[cls] ?? TEXT_TRANSFORM_MAP[cls] ?? LINE_HEIGHT_MAP[cls] ?? TRACKING_MAP[cls] ?? null;
 }
 
+// src/parser/placeholder.ts
+function parsePlaceholderClass(cls, customColors) {
+  if (!cls.startsWith("text-")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Only text color utilities are supported in placeholder: modifier. Class "${cls}" will be ignored. React Native only supports placeholderTextColor prop.`
+      );
+    }
+    return null;
+  }
+  const styleObject = parseColor(cls, customColors);
+  if (!styleObject?.color) {
+    return null;
+  }
+  return styleObject.color;
+}
+function parsePlaceholderClasses(classes, customColors) {
+  const classList = classes.trim().split(/\s+/).filter(Boolean);
+  let finalColor = null;
+  for (const cls of classList) {
+    const color = parsePlaceholderClass(cls, customColors);
+    if (color) {
+      finalColor = color;
+    }
+  }
+  return finalColor;
+}
+
 // src/parser/modifiers.ts
-var SUPPORTED_MODIFIERS = ["active", "hover", "focus", "disabled"];
+var SUPPORTED_MODIFIERS = [
+  "active",
+  "hover",
+  "focus",
+  "disabled",
+  "placeholder"
+];
 function parseModifier(cls) {
   const colonIndex = cls.indexOf(":");
   if (colonIndex === -1) {
@@ -1828,8 +1876,7 @@ function extractCustomColors(filename) {
   return flattenColors(colors);
 }
 
-// src/babel/index.ts
-var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
+// src/babel/utils/attributeMatchers.ts
 var DEFAULT_CLASS_ATTRIBUTES = [
   "className",
   "contentContainerClassName",
@@ -1864,6 +1911,8 @@ function isAttributeSupported(attributeName, exactMatches, patterns) {
 function getTargetStyleProp(attributeName) {
   return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
 }
+
+// src/babel/utils/componentSupport.ts
 function getComponentModifierSupport(jsxElement, t) {
   if (!t.isJSXOpeningElement(jsxElement)) {
     return null;
@@ -1886,24 +1935,40 @@ function getComponentModifierSupport(jsxElement, t) {
     case "Pressable":
       return { component: "Pressable", supportedModifiers: ["active", "hover", "focus", "disabled"] };
     case "TextInput":
-      return { component: "TextInput", supportedModifiers: ["focus", "disabled"] };
+      return { component: "TextInput", supportedModifiers: ["focus", "disabled", "placeholder"] };
     default:
       return null;
   }
 }
-function processDynamicExpression(expression, state, t) {
+function getStatePropertyForModifier(modifier) {
+  switch (modifier) {
+    case "active":
+      return "pressed";
+    case "hover":
+      return "hovered";
+    case "focus":
+      return "focused";
+    case "disabled":
+      return "disabled";
+    default:
+      return "pressed";
+  }
+}
+
+// src/babel/utils/dynamicProcessing.ts
+function processDynamicExpression(expression, state, parseClassName2, generateStyleKey2, t) {
   if (t.isTemplateLiteral(expression)) {
-    return processTemplateLiteral(expression, state, t);
+    return processTemplateLiteral(expression, state, parseClassName2, generateStyleKey2, t);
   }
   if (t.isConditionalExpression(expression)) {
-    return processConditionalExpression(expression, state, t);
+    return processConditionalExpression(expression, state, parseClassName2, generateStyleKey2, t);
   }
   if (t.isLogicalExpression(expression)) {
-    return processLogicalExpression(expression, state, t);
+    return processLogicalExpression(expression, state, parseClassName2, generateStyleKey2, t);
   }
   return null;
 }
-function processTemplateLiteral(node, state, t) {
+function processTemplateLiteral(node, state, parseClassName2, generateStyleKey2, t) {
   const parts = [];
   const staticParts = [];
   for (let i = 0; i < node.quasis.length; i++) {
@@ -1921,7 +1986,13 @@ function processTemplateLiteral(node, state, t) {
     }
     if (i < node.expressions.length) {
       const expr = node.expressions[i];
-      const result = processDynamicExpression(expr, state, t);
+      const result = processDynamicExpression(
+        expr,
+        state,
+        parseClassName2,
+        generateStyleKey2,
+        t
+      );
       if (result) {
         parts.push(result.expression);
       } else {
@@ -1938,9 +2009,9 @@ function processTemplateLiteral(node, state, t) {
     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);
+function processConditionalExpression(node, state, parseClassName2, generateStyleKey2, t) {
+  const consequent = processStringOrExpression(node.consequent, state, parseClassName2, generateStyleKey2, t);
+  const alternate = processStringOrExpression(node.alternate, state, parseClassName2, generateStyleKey2, t);
   if (!consequent && !alternate) {
     return null;
   }
@@ -1951,18 +2022,18 @@ function processConditionalExpression(node, state, t) {
   );
   return { expression };
 }
-function processLogicalExpression(node, state, t) {
+function processLogicalExpression(node, state, parseClassName2, generateStyleKey2, t) {
   if (node.operator !== "&&") {
     return null;
   }
-  const right = processStringOrExpression(node.right, state, t);
+  const right = processStringOrExpression(node.right, state, parseClassName2, generateStyleKey2, t);
   if (!right) {
     return null;
   }
   const expression = t.logicalExpression("&&", node.left, right);
   return { expression };
 }
-function processStringOrExpression(node, state, t) {
+function processStringOrExpression(node, state, parseClassName2, generateStyleKey2, t) {
   if (t.isStringLiteral(node)) {
     const className = node.value.trim();
     if (!className) {
@@ -1974,21 +2045,23 @@ function processStringOrExpression(node, state, t) {
     return t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
   }
   if (t.isConditionalExpression(node)) {
-    const result = processConditionalExpression(node, state, t);
+    const result = processConditionalExpression(node, state, parseClassName2, generateStyleKey2, t);
     return result?.expression ?? null;
   }
   if (t.isLogicalExpression(node)) {
-    const result = processLogicalExpression(node, state, t);
+    const result = processLogicalExpression(node, state, parseClassName2, generateStyleKey2, t);
     return result?.expression ?? null;
   }
   if (t.isTemplateLiteral(node)) {
-    const result = processTemplateLiteral(node, state, t);
+    const result = processTemplateLiteral(node, state, parseClassName2, generateStyleKey2, t);
     return result?.expression ?? null;
   }
   return null;
 }
-function processStaticClassNameWithModifiers(className, state, t) {
-  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+
+// src/babel/utils/modifierProcessing.ts
+function processStaticClassNameWithModifiers(className, state, parseClassName2, generateStyleKey2, splitModifierClasses2, t) {
+  const { baseClasses, modifierClasses } = splitModifierClasses2(className);
   let baseStyleExpression = null;
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
@@ -2029,20 +2102,6 @@ function processStaticClassNameWithModifiers(className, state, t) {
   }
   return t.arrayExpression(styleArrayElements);
 }
-function getStatePropertyForModifier(modifier) {
-  switch (modifier) {
-    case "active":
-      return "pressed";
-    case "hover":
-      return "hovered";
-    case "focus":
-      return "focused";
-    case "disabled":
-      return "disabled";
-    default:
-      return "pressed";
-  }
-}
 function createStyleFunction(styleExpression, modifierTypes, t) {
   const paramProperties = [];
   const usedStateProps = /* @__PURE__ */ new Set();
@@ -2058,8 +2117,166 @@ function createStyleFunction(styleExpression, modifierTypes, t) {
   const param = t.objectPattern(paramProperties);
   return t.arrowFunctionExpression([param], styleExpression);
 }
-function processTwCall(className, path2, state, t) {
-  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+
+// src/babel/utils/styleInjection.ts
+function addStyleSheetImport(path2, t) {
+  const importDeclaration = t.importDeclaration(
+    [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
+    t.stringLiteral("react-native")
+  );
+  path2.unshiftContainer("body", importDeclaration);
+}
+function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
+  const styleProperties = [];
+  for (const [key, styleObject] of styleRegistry) {
+    const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
+      let valueNode;
+      if (typeof styleValue === "number") {
+        valueNode = t.numericLiteral(styleValue);
+      } else if (typeof styleValue === "string") {
+        valueNode = t.stringLiteral(styleValue);
+      } else {
+        valueNode = t.valueToNode(styleValue);
+      }
+      return t.objectProperty(t.identifier(styleProp), valueNode);
+    });
+    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
+  }
+  const styleSheet = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(stylesIdentifier),
+      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
+        t.objectExpression(styleProperties)
+      ])
+    )
+  ]);
+  const body = path2.node.body;
+  let insertIndex = 0;
+  for (let i = 0; i < body.length; i++) {
+    if (t.isImportDeclaration(body[i])) {
+      insertIndex = i + 1;
+    } else {
+      break;
+    }
+  }
+  body.splice(insertIndex, 0, styleSheet);
+}
+
+// src/babel/utils/styleTransforms.ts
+function getStyleExpression(styleAttribute, t) {
+  const value = styleAttribute.value;
+  if (!t.isJSXExpressionContainer(value)) return null;
+  const expression = value.expression;
+  if (t.isJSXEmptyExpression(expression)) return null;
+  return expression;
+}
+function findStyleAttribute(path2, targetStyleProp, t) {
+  const parent = path2.parent;
+  return parent.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === targetStyleProp
+  );
+}
+function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, stylesIdentifier, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)))
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, stylesIdentifier, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
+      functionCall
+    ]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    const styleArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), 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 = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([result.expression, functionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    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 replaceWithStyleFunctionAttribute(classNamePath, styleFunctionExpression, targetStyleProp, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(styleFunctionExpression)
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeStyleFunctionAttribute(classNamePath, styleAttribute, styleFunctionExpression, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    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 {
+    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);
+  }
+  classNamePath.remove();
+}
+function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
+  const existingProp = jsxOpeningElement.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && attr.name.name === "placeholderTextColor"
+  );
+  if (existingProp) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. Remove the explicit prop or the placeholder: modifier to avoid confusion.`
+      );
+    }
+    existingProp.value = t.stringLiteral(color);
+  } else {
+    const newProp = t.jsxAttribute(t.jsxIdentifier("placeholderTextColor"), t.stringLiteral(color));
+    jsxOpeningElement.attributes.push(newProp);
+  }
+}
+
+// src/babel/utils/twProcessing.ts
+function processTwCall(className, path2, state, parseClassName2, generateStyleKey2, splitModifierClasses2, t) {
+  const { baseClasses, modifierClasses } = splitModifierClasses2(className);
   const objectProperties = [];
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
@@ -2101,6 +2318,31 @@ function processTwCall(className, path2, state, t) {
   const twStyleObject = t.objectExpression(objectProperties);
   path2.replaceWith(twStyleObject);
 }
+function removeTwImports(path2, t) {
+  path2.traverse({
+    ImportDeclaration(importPath) {
+      const node = importPath.node;
+      if (node.source.value !== "@mgcrea/react-native-tailwind") {
+        return;
+      }
+      const remainingSpecifiers = node.specifiers.filter((spec) => {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          const importedName = spec.imported.name;
+          return importedName !== "tw" && importedName !== "twStyle";
+        }
+        return true;
+      });
+      if (remainingSpecifiers.length === 0) {
+        importPath.remove();
+      } else if (remainingSpecifiers.length < node.specifiers.length) {
+        node.specifiers = remainingSpecifiers;
+      }
+    }
+  });
+}
+
+// src/babel/plugin.ts
+var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
 function reactNativeTailwindBabelPlugin({ types: t }, options) {
   const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
   const { exactMatches, patterns } = buildAttributeMatchers(attributes);
@@ -2195,7 +2437,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, t);
+        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
       },
       // Handle twStyle('...') call expressions
       CallExpression(path2, state) {
@@ -2230,10 +2472,13 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, t);
+        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
       },
       JSXAttribute(path2, state) {
         const node = path2.node;
+        if (!t.isJSXIdentifier(node.name)) {
+          return;
+        }
         const attributeName = node.name.name;
         if (!isAttributeSupported(attributeName, state.supportedAttributes, state.attributePatterns)) {
           return;
@@ -2248,11 +2493,30 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           }
           state.hasClassNames = true;
           const { baseClasses, modifierClasses } = splitModifierClasses(className);
-          if (modifierClasses.length > 0) {
+          const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
+          const stateModifiers = modifierClasses.filter((m) => m.modifier !== "placeholder");
+          if (placeholderModifiers.length > 0) {
+            const jsxOpeningElement = path2.parent;
+            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+            if (componentSupport?.supportedModifiers.includes("placeholder")) {
+              const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
+              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customColors);
+              if (placeholderColor) {
+                addOrMergePlaceholderTextColorProp(jsxOpeningElement, placeholderColor, t);
+              }
+            } else {
+              if (process.env.NODE_ENV !== "production") {
+                console.warn(
+                  `[react-native-tailwind] placeholder: modifier can only be used on TextInput component at ${state.file.opts.filename ?? "unknown"}`
+                );
+              }
+            }
+          }
+          if (stateModifiers.length > 0) {
             const jsxOpeningElement = path2.parent;
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
             if (componentSupport) {
-              const usedModifiers = Array.from(new Set(modifierClasses.map((m) => m.modifier)));
+              const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
               const unsupportedModifiers = usedModifiers.filter(
                 (mod) => !componentSupport.supportedModifiers.includes(mod)
               );
@@ -2262,7 +2526,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                     `[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(", ")}`
                   );
                 }
-                const supportedModifierClasses = modifierClasses.filter(
+                const supportedModifierClasses = stateModifiers.filter(
                   (m) => componentSupport.supportedModifiers.includes(m.modifier)
                 );
                 if (supportedModifierClasses.length === 0) {
@@ -2271,14 +2535,14 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                   const styleExpression = processStaticClassNameWithModifiers(
                     filteredClassName.trim(),
                     state,
+                    parseClassName,
+                    generateStyleKey,
+                    splitModifierClasses,
                     t
                   );
                   const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
                   const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
-                  const parent2 = path2.parent;
-                  const styleAttribute2 = parent2.attributes.find(
-                    (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
-                  );
+                  const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
                   if (styleAttribute2) {
                     mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
                   } else {
@@ -2287,13 +2551,17 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                   return;
                 }
               } else {
-                const styleExpression = processStaticClassNameWithModifiers(className, state, t);
+                const styleExpression = processStaticClassNameWithModifiers(
+                  className,
+                  state,
+                  parseClassName,
+                  generateStyleKey,
+                  splitModifierClasses,
+                  t
+                );
                 const modifierTypes = usedModifiers;
                 const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
-                const parent2 = path2.parent;
-                const styleAttribute2 = parent2.attributes.find(
-                  (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
-                );
+                const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
                 if (styleAttribute2) {
                   mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
                 } else {
@@ -2303,20 +2571,22 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               }
             } else {
               if (process.env.NODE_ENV !== "production") {
-                const usedModifiers = Array.from(new Set(modifierClasses.map((m) => m.modifier)));
+                const usedModifiers = Array.from(new Set(stateModifiers.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"}`
                 );
               }
             }
           }
-          const styleObject = parseClassName2(className, state.customColors);
-          const styleKey = generateStyleKey2(className);
+          const classNameForStyle = baseClasses.join(" ");
+          if (!classNameForStyle) {
+            path2.remove();
+            return;
+          }
+          const styleObject = parseClassName(classNameForStyle, state.customColors);
+          const styleKey = generateStyleKey(classNameForStyle);
           state.styleRegistry.set(styleKey, styleObject);
-          const parent = path2.parent;
-          const styleAttribute = parent.attributes.find(
-            (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
-          );
+          const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
           if (styleAttribute) {
             mergeStyleAttribute(path2, styleAttribute, styleKey, state.stylesIdentifier, t);
           } else {
@@ -2330,13 +2600,10 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             return;
           }
           try {
-            const result = processDynamicExpression(expression, state, t);
+            const result = processDynamicExpression(expression, state, parseClassName, generateStyleKey, t);
             if (result) {
               state.hasClassNames = true;
-              const parent = path2.parent;
-              const styleAttribute = parent.attributes.find(
-                (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
-              );
+              const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
               if (styleAttribute) {
                 mergeDynamicStyleAttribute(path2, styleAttribute, result, t);
               } else {
@@ -2362,132 +2629,3 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
     }
   };
 }
-function addStyleSheetImport(path2, t) {
-  const importDeclaration = t.importDeclaration(
-    [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
-    t.stringLiteral("react-native")
-  );
-  path2.unshiftContainer("body", importDeclaration);
-}
-function removeTwImports(path2, t) {
-  path2.traverse({
-    ImportDeclaration(importPath) {
-      const node = importPath.node;
-      if (node.source.value !== "@mgcrea/react-native-tailwind") {
-        return;
-      }
-      const remainingSpecifiers = node.specifiers.filter((spec) => {
-        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-          const importedName = spec.imported.name;
-          return importedName !== "tw" && importedName !== "twStyle";
-        }
-        return true;
-      });
-      if (remainingSpecifiers.length === 0) {
-        importPath.remove();
-      } else if (remainingSpecifiers.length < node.specifiers.length) {
-        node.specifiers = remainingSpecifiers;
-      }
-    }
-  });
-}
-function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, stylesIdentifier, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)))
-  );
-  classNamePath.replaceWith(styleAttribute);
-}
-function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, stylesIdentifier, t) {
-  const existingStyle = styleAttribute.value.expression;
-  const styleArray = t.arrayExpression([
-    t.memberExpression(t.identifier(stylesIdentifier), 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 replaceWithStyleFunctionAttribute(classNamePath, styleFunctionExpression, targetStyleProp, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(styleFunctionExpression)
-  );
-  classNamePath.replaceWith(styleAttribute);
-}
-function mergeStyleFunctionAttribute(classNamePath, styleAttribute, styleFunctionExpression, t) {
-  const existingStyle = styleAttribute.value.expression;
-  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
-    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 {
-    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);
-  }
-  classNamePath.remove();
-}
-function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
-  const styleProperties = [];
-  for (const [key, styleObject] of styleRegistry) {
-    const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
-      let valueNode;
-      if (typeof styleValue === "number") {
-        valueNode = t.numericLiteral(styleValue);
-      } else if (typeof styleValue === "string") {
-        valueNode = t.stringLiteral(styleValue);
-      } else {
-        valueNode = t.valueToNode(styleValue);
-      }
-      return t.objectProperty(t.identifier(styleProp), valueNode);
-    });
-    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
-  }
-  const styleSheet = t.variableDeclaration("const", [
-    t.variableDeclarator(
-      t.identifier(stylesIdentifier),
-      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
-        t.objectExpression(styleProperties)
-      ])
-    )
-  ]);
-  const body = path2.node.body;
-  let insertIndex = 0;
-  for (let i = 0; i < body.length; i++) {
-    if (t.isImportDeclaration(body[i])) {
-      insertIndex = i + 1;
-    } else {
-      break;
-    }
-  }
-  body.splice(insertIndex, 0, styleSheet);
-}
-function parseClassName2(className, customColors) {
-  return parseClassName(className, customColors);
-}
-function generateStyleKey2(className) {
-  return generateStyleKey(className);
-}