@mgcrea/react-native-tailwind 0.11.1 → 0.12.1

package/dist/babel/index.cjs

@@ -701,6 +701,21 @@ function parseArbitraryZIndex(value) {
   }
   return null;
 }
+function parseArbitraryGrowShrink(value) {
+  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
+  if (match) {
+    return parseFloat(match[1]);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
 var DISPLAY_MAP = {
   flex: { display: "flex" },
   hidden: { display: "none" }
@@ -725,7 +740,12 @@ var GROW_SHRINK_MAP = {
   grow: { flexGrow: 1 },
   "grow-0": { flexGrow: 0 },
   shrink: { flexShrink: 1 },
-  "shrink-0": { flexShrink: 0 }
+  "shrink-0": { flexShrink: 0 },
+  // CSS-style aliases
+  "flex-grow": { flexGrow: 1 },
+  "flex-grow-0": { flexGrow: 0 },
+  "flex-shrink": { flexShrink: 1 },
+  "flex-shrink-0": { flexShrink: 0 }
 };
 var JUSTIFY_CONTENT_MAP = {
   "justify-start": { justifyContent: "flex-start" },
@@ -920,6 +940,22 @@ function parseLayout(cls) {
       return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
     }
   }
+  if (cls.startsWith("grow-") || cls.startsWith("flex-grow-")) {
+    const prefix = cls.startsWith("flex-grow-") ? "flex-grow-" : "grow-";
+    const growKey = cls.substring(prefix.length);
+    const arbitraryGrow = parseArbitraryGrowShrink(growKey);
+    if (arbitraryGrow !== null) {
+      return { flexGrow: arbitraryGrow };
+    }
+  }
+  if (cls.startsWith("shrink-") || cls.startsWith("flex-shrink-")) {
+    const prefix = cls.startsWith("flex-shrink-") ? "flex-shrink-" : "shrink-";
+    const shrinkKey = cls.substring(prefix.length);
+    const arbitraryShrink = parseArbitraryGrowShrink(shrinkKey);
+    if (arbitraryShrink !== null) {
+      return { flexShrink: arbitraryShrink };
+    }
+  }
   return DISPLAY_MAP[cls] ?? FLEX_DIRECTION_MAP[cls] ?? FLEX_WRAP_MAP[cls] ?? FLEX_MAP[cls] ?? GROW_SHRINK_MAP[cls] ?? JUSTIFY_CONTENT_MAP[cls] ?? ALIGN_ITEMS_MAP[cls] ?? ALIGN_SELF_MAP[cls] ?? ALIGN_CONTENT_MAP[cls] ?? POSITION_MAP[cls] ?? OVERFLOW_MAP[cls] ?? OPACITY_MAP[cls] ?? null;
 }
 
@@ -1194,14 +1230,14 @@ var SPACING_SCALE = {
   96: 384
 };
 function parseArbitrarySpacing(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`
+        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px], [16], [4.5px], [4.5]).`
       );
     }
     return null;
@@ -1649,14 +1685,14 @@ var TRACKING_MAP = {
   "tracking-widest": { letterSpacing: 1.6 }
 };
 function parseArbitraryFontSize(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary font size value: ${value}. Only px values are supported (e.g., [18px] or [18]).`
+        `[react-native-tailwind] Unsupported arbitrary font size value: ${value}. Only px values are supported (e.g., [18px], [13.5px], [.5]).`
       );
     }
     return null;
@@ -1664,21 +1700,36 @@ function parseArbitraryFontSize(value) {
   return null;
 }
 function parseArbitraryLineHeight(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary line height value: ${value}. Only px values are supported (e.g., [24px] or [24]).`
+        `[react-native-tailwind] Unsupported arbitrary line height value: ${value}. Only px values are supported (e.g., [24px], [21.5px], [.5]).`
       );
     }
     return null;
   }
   return null;
 }
-function parseTypography(cls, customFontFamily) {
+function parseArbitraryLetterSpacing(value) {
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseFloat(pxMatch[1]);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary letter spacing value: ${value}. Only px values are supported (e.g., [0.5px], [0.3], [.5], [-0.4]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseTypography(cls, customFontFamily, customFontSize) {
   const fontFamilyMap = customFontFamily ? {
     ...FONT_FAMILY_MAP,
     ...Object.fromEntries(
@@ -1691,6 +1742,9 @@ function parseTypography(cls, customFontFamily) {
     if (arbitraryValue !== null) {
       return { fontSize: arbitraryValue };
     }
+    if (customFontSize?.[sizeKey] !== void 0) {
+      return { fontSize: customFontSize[sizeKey] };
+    }
     const fontSize = FONT_SIZES[sizeKey];
     if (fontSize !== void 0) {
       return { fontSize };
@@ -1707,6 +1761,13 @@ function parseTypography(cls, customFontFamily) {
       return { lineHeight };
     }
   }
+  if (cls.startsWith("tracking-")) {
+    const trackingKey = cls.substring(9);
+    const arbitraryValue = parseArbitraryLetterSpacing(trackingKey);
+    if (arbitraryValue !== null) {
+      return { letterSpacing: arbitraryValue };
+    }
+  }
   return fontFamilyMap[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;
 }
 
@@ -1863,7 +1924,7 @@ function parseClass(cls, customTheme) {
     parseBorder,
     (cls2) => parseColor(cls2, customTheme?.colors),
     parseLayout,
-    (cls2) => parseTypography(cls2, customTheme?.fontFamily),
+    (cls2) => parseTypography(cls2, customTheme?.fontFamily, customTheme?.fontSize),
     parseSizing,
     parseShadow,
     parseAspectRatio,
@@ -1935,11 +1996,11 @@ function extractCustomTheme(filename) {
   const projectDir = path.dirname(filename);
   const configPath = findTailwindConfig(projectDir);
   if (!configPath) {
-    return { colors: {}, fontFamily: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {} };
   }
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return { colors: {}, fontFamily: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {} };
   }
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
     console.warn(
@@ -1961,9 +2022,33 @@ function extractCustomTheme(filename) {
       fontFamilyResult[key] = value;
     }
   }
+  if (config.theme.fontSize && !config.theme.extend?.fontSize && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontSize will override all default font sizes. Use theme.extend.fontSize to add custom font sizes while keeping defaults."
+    );
+  }
+  const fontSize = config.theme.extend?.fontSize ?? config.theme.fontSize ?? {};
+  const fontSizeResult = {};
+  for (const [key, value] of Object.entries(fontSize)) {
+    if (typeof value === "number") {
+      fontSizeResult[key] = value;
+    } else if (typeof value === "string") {
+      const parsed = parseFloat(value.replace(/px$/, ""));
+      if (!isNaN(parsed)) {
+        fontSizeResult[key] = parsed;
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid fontSize value for "${key}": ${value}. Expected number or string like "18px".`
+          );
+        }
+      }
+    }
+  }
   return {
     colors: flattenColors(colors),
-    fontFamily: fontFamilyResult
+    fontFamily: fontFamilyResult,
+    fontSize: fontSizeResult
   };
 }
 
@@ -2480,17 +2565,29 @@ function processPlatformModifiers(platformModifiers, state, parseClassName2, gen
 // src/babel/utils/styleInjection.ts
 function addStyleSheetImport(path2, t) {
   const body = path2.node.body;
-  let reactNativeImport = null;
+  let existingValueImport = null;
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
+      if (statement.importKind === "type") {
+        continue;
+      }
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
       break;
     }
   }
-  if (reactNativeImport) {
-    reactNativeImport.specifiers.push(
-      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))
+  if (existingValueImport) {
+    const hasStyleSheet = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "StyleSheet"
     );
+    if (!hasStyleSheet) {
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))
+      );
+    }
   } else {
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
@@ -2501,15 +2598,29 @@ function addStyleSheetImport(path2, t) {
 }
 function addPlatformImport(path2, t) {
   const body = path2.node.body;
-  let reactNativeImport = null;
+  let existingValueImport = null;
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
+      if (statement.importKind === "type") {
+        continue;
+      }
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
       break;
     }
   }
-  if (reactNativeImport) {
-    reactNativeImport.specifiers.push(t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")));
+  if (existingValueImport) {
+    const hasPlatform = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "Platform"
+    );
+    if (!hasPlatform) {
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))
+      );
+    }
   } else {
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))],
@@ -2725,7 +2836,7 @@ function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
 }
 
 // src/babel/utils/twProcessing.ts
-function processTwCall(className, path2, state, parseClassName2, generateStyleKey2, splitModifierClasses2, t) {
+function processTwCall(className, path2, state, parseClassName2, generateStyleKey2, splitModifierClasses2, findComponentScope2, t) {
   const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses2(className);
   const modifierClasses = [];
   for (const modifier of rawModifierClasses) {
@@ -2756,8 +2867,145 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   } else {
     objectProperties.push(t.objectProperty(t.identifier("style"), t.objectExpression([])));
   }
+  const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+  const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+  const otherModifiers = modifierClasses.filter(
+    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier)
+  );
+  const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+  let componentScope = null;
+  if (hasColorSchemeModifiers) {
+    componentScope = findComponentScope2(path2, t);
+    if (!componentScope) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-native-tailwind] Color scheme modifiers (dark:, light:) in tw/twStyle calls must be used inside a React component. Modifiers will be ignored.`
+        );
+      }
+    } else {
+      state.functionComponentsNeedingColorScheme.add(componentScope);
+    }
+  }
+  if (hasColorSchemeModifiers && componentScope) {
+    const colorSchemeConditionals = processColorSchemeModifiers(
+      colorSchemeModifiers,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      t
+    );
+    const styleArrayElements = [];
+    if (baseClasses.length > 0) {
+      const baseClassName = baseClasses.join(" ");
+      const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+      const baseStyleKey = generateStyleKey2(baseClassName);
+      state.styleRegistry.set(baseStyleKey, baseStyleObject);
+      styleArrayElements.push(
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+      );
+    }
+    styleArrayElements.push(...colorSchemeConditionals);
+    objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    const darkModifiers = colorSchemeModifiers.filter((m) => m.modifier === "dark");
+    const lightModifiers = colorSchemeModifiers.filter((m) => m.modifier === "light");
+    if (darkModifiers.length > 0) {
+      const darkClassNames = darkModifiers.map((m) => m.baseClass).join(" ");
+      const darkStyleObject = parseClassName2(darkClassNames, state.customTheme);
+      const darkStyleKey = generateStyleKey2(`dark_${darkClassNames}`);
+      state.styleRegistry.set(darkStyleKey, darkStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("darkStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(darkStyleKey))
+        )
+      );
+    }
+    if (lightModifiers.length > 0) {
+      const lightClassNames = lightModifiers.map((m) => m.baseClass).join(" ");
+      const lightStyleObject = parseClassName2(lightClassNames, state.customTheme);
+      const lightStyleKey = generateStyleKey2(`light_${lightClassNames}`);
+      state.styleRegistry.set(lightStyleKey, lightStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("lightStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(lightStyleKey))
+        )
+      );
+    }
+  }
+  const hasPlatformModifiers = platformModifiers.length > 0;
+  if (hasPlatformModifiers) {
+    state.needsPlatformImport = true;
+    const platformSelectExpression = processPlatformModifiers(
+      platformModifiers,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      t
+    );
+    if (hasColorSchemeModifiers && componentScope) {
+      const styleProperty = objectProperties.find(
+        (prop) => t.isIdentifier(prop.key) && prop.key.name === "style"
+      );
+      if (styleProperty && t.isArrayExpression(styleProperty.value)) {
+        styleProperty.value.elements.push(platformSelectExpression);
+      }
+    } else {
+      const styleArrayElements = [];
+      if (baseClasses.length > 0) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+        const baseStyleKey = generateStyleKey2(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleArrayElements.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+        );
+      }
+      styleArrayElements.push(platformSelectExpression);
+      objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    }
+    const iosModifiers = platformModifiers.filter((m) => m.modifier === "ios");
+    const androidModifiers = platformModifiers.filter((m) => m.modifier === "android");
+    const webModifiers = platformModifiers.filter((m) => m.modifier === "web");
+    if (iosModifiers.length > 0) {
+      const iosClassNames = iosModifiers.map((m) => m.baseClass).join(" ");
+      const iosStyleObject = parseClassName2(iosClassNames, state.customTheme);
+      const iosStyleKey = generateStyleKey2(`ios_${iosClassNames}`);
+      state.styleRegistry.set(iosStyleKey, iosStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("iosStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(iosStyleKey))
+        )
+      );
+    }
+    if (androidModifiers.length > 0) {
+      const androidClassNames = androidModifiers.map((m) => m.baseClass).join(" ");
+      const androidStyleObject = parseClassName2(androidClassNames, state.customTheme);
+      const androidStyleKey = generateStyleKey2(`android_${androidClassNames}`);
+      state.styleRegistry.set(androidStyleKey, androidStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("androidStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(androidStyleKey))
+        )
+      );
+    }
+    if (webModifiers.length > 0) {
+      const webClassNames = webModifiers.map((m) => m.baseClass).join(" ");
+      const webStyleObject = parseClassName2(webClassNames, state.customTheme);
+      const webStyleKey = generateStyleKey2(`web_${webClassNames}`);
+      state.styleRegistry.set(webStyleKey, webStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("webStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(webStyleKey))
+        )
+      );
+    }
+  }
   const modifiersByType = /* @__PURE__ */ new Map();
-  for (const mod of modifierClasses) {
+  for (const mod of otherModifiers) {
     if (!modifiersByType.has(mod.modifier)) {
       modifiersByType.set(mod.modifier, []);
     }
@@ -2876,6 +3124,10 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           state.twImportNames = /* @__PURE__ */ new Set();
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = /* @__PURE__ */ new Set();
+          state.hasColorSchemeImport = false;
+          state.colorSchemeLocalIdentifier = void 0;
+          state.needsPlatformImport = false;
+          state.hasPlatformImport = false;
           state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
           state.schemeModifierConfig = schemeModifierConfig;
         },
@@ -2934,7 +3186,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           }
           state.reactNativeImportPath = path2;
         }
-        if (node.source.value === state.colorSchemeImportSource) {
+        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
           const specifiers = node.specifiers;
           for (const spec of specifiers) {
             if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
@@ -2954,7 +3206,6 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               if (importedName === "tw" || importedName === "twStyle") {
                 const localName = spec.local.name;
                 state.twImportNames.add(localName);
-                state.hasTwImport = true;
               }
             }
           });
@@ -2987,10 +3238,21 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           path2.replaceWith(
             t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))])
           );
+          state.hasTwImport = true;
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path2,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t
+        );
+        state.hasTwImport = true;
       },
       // Handle twStyle('...') call expressions
       CallExpression(path2, state) {
@@ -3022,10 +3284,21 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
         const className = arg.value.trim();
         if (!className) {
           path2.replaceWith(t.identifier("undefined"));
+          state.hasTwImport = true;
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path2,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t
+        );
+        state.hasTwImport = true;
       },
       JSXAttribute(path2, state) {
         const node = path2.node;
@@ -3038,14 +3311,14 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
         }
         const value = node.value;
         const targetStyleProp = getTargetStyleProp(attributeName);
-        if (t.isStringLiteral(value)) {
-          const className = value.value.trim();
-          if (!className) {
+        const processStaticClassName = (className) => {
+          const trimmedClassName = className.trim();
+          if (!trimmedClassName) {
             path2.remove();
-            return;
+            return true;
           }
           state.hasClassNames = true;
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
           const modifierClasses = [];
           for (const modifier of rawModifierClasses) {
             if (isSchemeModifier(modifier.modifier)) {
@@ -3169,7 +3442,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               } else {
                 replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
               }
-              return;
+              return true;
             } else {
             }
           }
@@ -3220,7 +3493,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               path2.node.name = t.jsxIdentifier(targetStyleProp);
               path2.node.value = t.jsxExpressionContainer(styleExpression);
             }
-            return;
+            return true;
           }
           if (hasStateModifiers) {
             const jsxOpeningElement = path2.parent;
@@ -3258,11 +3531,11 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                   } else {
                     replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
                   }
-                  return;
+                  return true;
                 }
               } else {
                 const styleExpression = processStaticClassNameWithModifiers(
-                  className,
+                  trimmedClassName,
                   state,
                   parseClassName,
                   generateStyleKey,
@@ -3277,7 +3550,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                 } else {
                   replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
                 }
-                return;
+                return true;
               }
             } else {
               if (process.env.NODE_ENV !== "production") {
@@ -3291,7 +3564,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           const classNameForStyle = baseClasses.join(" ");
           if (!classNameForStyle) {
             path2.remove();
-            return;
+            return true;
           }
           const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
@@ -3302,13 +3575,23 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           } else {
             replaceWithStyleAttribute(path2, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
-          return;
+          return true;
+        };
+        if (t.isStringLiteral(value)) {
+          if (processStaticClassName(value.value)) {
+            return;
+          }
         }
         if (t.isJSXExpressionContainer(value)) {
           const expression = value.expression;
           if (t.isJSXEmptyExpression(expression)) {
             return;
           }
+          if (t.isStringLiteral(expression)) {
+            if (processStaticClassName(expression.value)) {
+              return;
+            }
+          }
           try {
             const componentScope = findComponentScope(path2, t);
             const result = processDynamicExpression(