fix/media-query-stripping

Issue 2388

Author: PedroMarianoAlmeida

packages/tailwind/src/utils/css/make-inline-styles-for.ts

@@ -30,25 +30,52 @@ export function makeInlineStylesFor(
 
   let residualClasses = [...classes];
   const styles: Record<string, string> = {};
+  const classesWithNonInlinableStyles = new Set<string>();
+
+  tailwindStylesRoot.walkRules((rule) => {
+    const isInAtRule = rule.parent?.type === 'atrule';
+
+    let hasPseudoSelectors = false;
+    selectorParser((selector) => {
+      selector.walkPseudos(() => {
+        hasPseudoSelectors = true;
+      });
+    }).processSync(rule.selector);
+
+    const isNonInlinable = isInAtRule || hasPseudoSelectors;
+
+    if (isNonInlinable) {
+      selectorParser((selector) => {
+        selector.walkClasses((v) => {
+          classesWithNonInlinableStyles.add(unescapeClass(v.value));
+        });
+      }).processSync(rule.selector);
+    }
+  });
+
+  const inlinableClasses = new Set<string>();
 
   walkInlinableRules(tailwindStylesRoot, (rule) => {
-    const classesOnSelector: string[] = [];
     selectorParser((selector) => {
       selector.walkClasses((v) => {
-        classesOnSelector.push(unescapeClass(v.value));
+        inlinableClasses.add(unescapeClass(v.value));
       });
     }).processSync(rule.selector);
 
-    residualClasses = residualClasses.filter((singleClass) => {
-      return !classesOnSelector.includes(singleClass);
-    });
-
     rule.walkDecls((declaration) => {
       styles[convertCssPropertyToReactProperty(declaration.prop)] =
         declaration.value + (declaration.important ? '!important' : '');
     });
   });
 
+  residualClasses = residualClasses.filter((singleClass) => {
+    const isInlinable = inlinableClasses.has(singleClass);
+    const hasNonInlinableStyles =
+      classesWithNonInlinableStyles.has(singleClass);
+
+    return !isInlinable || hasNonInlinableStyles;
+  });
+
   return {
     styles,
     residualClassName: residualClasses.join(' '),