feat: add exclusion functionality in handleAtRule

callstack · Nov 7, 2022 · 68c5ddb · 68c5ddb
1 parent 8cc05c3
commit 68c5ddb
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 16 deletions.
diff --git a/packages/server/__tests__/__snapshots__/collect.test.ts.snap b/packages/server/__tests__/__snapshots__/collect.test.ts.snap
@@ -213,15 +213,19 @@ exports[`include atrule once critical 1`] = `
   h1 {
     font-size: 20px;
   }
+}
+"
+`;
+
+exports[`include atrule once other 1`] = `
+"@media screen {
   .class {
     font-size: 15px;
   }
 }
 "
 `;
 
-exports[`include atrule once other 1`] = `""`;
-
 exports[`simple class name critical 1`] = `
 ".linaria {
 }

diff --git a/packages/server/__tests__/collect.test.ts b/packages/server/__tests__/collect.test.ts
@@ -283,3 +283,39 @@ test('does not match selectors in excludedClasses list', () => {
   expect(critical).toMatchInlineSnapshot(`".linaria.ltr {}.lily {}"`);
   expect(other).toMatchInlineSnapshot(`".linaria.rtl {}"`);
 });
+
+test('does not match child selectors in excludedClasses list for media queries', () => {
+  const code = dedent`
+    <div class="lily linaria ltr dir"></div>
+  `;
+
+  const css = dedent`
+  @media only screen and (max-width:561.5px) {
+    .dir-ltr.left_6_3_l9xil3s {
+      padding-left: 24px !important;
+    }
+
+    .dir-rtl.left_6_3_l9xil3s {
+      padding-right: 24px !important;
+    }
+  }
+  `;
+
+  const { critical, other } = collect(code, css, [], ['dir-rtl']);
+
+  expect(critical).toMatchInlineSnapshot(`
+    "@media only screen and (max-width:561.5px) {
+      .dir-ltr.left_6_3_l9xil3s {
+        padding-left: 24px !important;
+      }
+    }"
+  `);
+  expect(other).toMatchInlineSnapshot(`
+    "@media only screen and (max-width:561.5px) {
+
+      .dir-rtl.left_6_3_l9xil3s {
+        padding-right: 24px !important;
+      }
+    }"
+  `);
+});
diff --git a/packages/server/src/collect.ts b/packages/server/src/collect.ts
@@ -62,32 +62,39 @@ export default function collect(
     if ('selector' in rule && rule.selector.startsWith('.')) {
       const isExcluded =
         excludedClasses.length > 0 && excludedClassesRegExp.test(rule.selector);
+      if (isExcluded) return false;
 
-      const isMatch = Boolean(rule.selector.match(htmlClassesRegExp));
-      return isMatch && !isExcluded;
+      return Boolean(rule.selector.match(htmlClassesRegExp));
     }
 
     return true;
   };
 
   const handleAtRule = (rule: AtRule) => {
-    let addedToCritical = false;
+    if (rule.name === 'keyframes') {
+      return;
+    }
 
-    rule.each((childRule) => {
-      if (isCritical(childRule) && !addedToCritical) {
-        critical.append(rule.clone());
-        addedToCritical = true;
+    const criticalRule = rule.clone();
+    const otherRule = rule.clone();
+
+    let removedNodesFromOther = 0;
+    criticalRule.each((childRule: ChildNode, index: number) => {
+      if (isCritical(childRule)) {
+        otherRule.nodes[index - removedNodesFromOther]?.remove();
+        removedNodesFromOther += 1;
+      } else {
+        childRule.remove();
       }
     });
 
-    if (rule.name === 'keyframes') {
-      return;
-    }
+    rule.remove();
 
-    if (addedToCritical) {
-      rule.remove();
-    } else {
-      other.append(rule);
+    if (criticalRule.nodes.length > 0) {
+      critical.append(criticalRule);
+    }
+    if (otherRule.nodes.length > 0) {
+      other.append(otherRule);
     }
   };