fix(postcss-merge-rules): preserve container queries

packages/postcss-merge-rules/src/index.js

@@ -84,9 +84,19 @@ function canMerge(ruleA, ruleB, browsers, compatibilityCache) {
   ) {
     return false;
   }
+  if (ruleA.some(isRuleOrAtRule) || ruleB.some(isRuleOrAtRule)) {
+    return false;
+  }
   return parent && (selectors.every(noVendor) || sameVendor(a, b));
 }
 
+/**
+ * @param {import('postcss').ChildNode} node
+ * @return {boolean}
+ */
+function isRuleOrAtRule(node) {
+  return node.type === 'rule' || node.type === 'atrule';
+}
 /**
  * @param {import('postcss').ChildNode} node
  * @return {node is import('postcss').Declaration}

packages/postcss-merge-rules/test/index.js

@@ -150,6 +150,22 @@ test(
   passthroughCSS('@media print{h1{display:block}}h1{color:red}')
 );
 
+test(
+  'should not merge across container queries',
+  passthroughCSS(
+    `@container (min-width: 200px) {
+  .mobile {
+     display: none;
+  }
+}
+@container (max-width: 100px) {
+  .notMobile {
+     display: none;
+  }
+}`
+  )
+);
+
 test(
   'should perform partial merging of selectors',
   processCSS(
@@ -843,4 +859,26 @@ test(
     'h1{color:#001;color:#002;color:#003}h2{color:#001;color:#002}'
   )
 );
+
+test(
+  'should not merge nested rules',
+  passthroughCSS('h1 { .a { color: red; } } h1 { .b { color: red; } }')
+);
+
+test(
+  'should not merge nested container rules',
+  passthroughCSS(
+    `.mobile {
+  @container (min-width: 200px) {
+     display: none;
+  }
+}
+
+.notMobile {
+  @container (max-width: 100px) {
+     display: none;
+  }
+}`
+  )
+);
 test.run();