@mgcrea/react-native-tailwind 0.11.1 → 0.12.0

package/dist/babel/index.cjs

@@ -1194,14 +1194,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;
@@ -2725,7 +2725,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 +2756,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 +3013,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 +3075,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)) {
@@ -2990,7 +3131,16 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path2,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t
+        );
       },
       // Handle twStyle('...') call expressions
       CallExpression(path2, state) {
@@ -3025,7 +3175,16 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path2,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t
+        );
       },
       JSXAttribute(path2, state) {
         const node = path2.node;
@@ -3038,14 +3197,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 +3328,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               } else {
                 replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
               }
-              return;
+              return true;
             } else {
             }
           }
@@ -3220,7 +3379,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 +3417,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 +3436,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                 } else {
                   replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
                 }
-                return;
+                return true;
               }
             } else {
               if (process.env.NODE_ENV !== "production") {
@@ -3291,7 +3450,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 +3461,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(