fix(postcss-merge-rules): prevent breaking rule merges (#1072)

* fix(postcss-merge-rules): prevent merging of :host(tag) and tag

Fixes: #730

* chore(postcss-merge-rules): refactor
Move all checks together.

* fix(postcss-merge-rules): do not merge unknown pseudo-selectors

Do not merge if the pseudo-selector is not in the list of well-known pseudo-selectors
and does not start with a vendor prefix. We let through vendor prefixes as they are
handled elsewhere in the code.

Fix #999

* chore: update integration tests.

Co-authored-by: Martin Hristov <martin.r.hristov@gmail.com>

.all-contributorsrc

@@ -620,7 +620,17 @@
       "contributions": [
         "maintenance"
       ]
+    },
+    {
+      "login": "MapTo0",
+      "name": "Martin",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5821279?v=4",
+      "profile": "https://github.com/MapTo0",
+      "contributions": [
+        "code"
+      ]
     }
   ],
-  "repoType": "github"
+  "repoType": "github",
+  "commitConvention": "none"
 }

CONTRIBUTORS.md

@@ -87,6 +87,9 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
     <td align="center"><a href="https://genemecija.com"><img src="https://avatars2.githubusercontent.com/u/39816902?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gene Mecija</b></sub></a><br /><a href="https://github.com/cssnano/cssnano/issues?q=author%3Agenemecija" title="Bug reports">🐛</a> <a href="https://github.com/cssnano/cssnano/commits?author=genemecija" title="Code">💻</a> <a href="https://github.com/cssnano/cssnano/commits?author=genemecija" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://www.ludofischer.com"><img src="https://avatars1.githubusercontent.com/u/43557?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ludovico Fischer</b></sub></a><br /><a href="#maintenance-ludofischer" title="Maintenance">🚧</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/MapTo0"><img src="https://avatars.githubusercontent.com/u/5821279?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Martin</b></sub></a><br /><a href="https://github.com/cssnano/cssnano/commits?author=MapTo0" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

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

@@ -619,6 +619,19 @@ test('should not crash when node.raws.value is null (2)', () => {
   );
 });
 
+test(
+  'should not merge :host(tagname) with tagname',
+  processCSS(
+    ':host(tag){display:block}tag{display:block}',
+    ':host(tag){display:block}tag{display:block}'
+  )
+);
+
+test(
+  'should not merge unknown and known selector',
+  passthroughCSS('p {color: blue}:nonsense {color: blue}')
+);
+
 test(
   'should merge multiple media queries',
   processCSS(

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

@@ -1,10 +1,10 @@
 import browserslist from 'browserslist';
-import vendors from 'vendors';
 import { sameParent } from 'cssnano-utils';
-import ensureCompatibility from './lib/ensureCompatibility';
-
-/** @type {string[]} */
-const prefixes = vendors.map((v) => `-${v}-`);
+import {
+  ensureCompatibility,
+  sameVendor,
+  noVendor,
+} from './lib/ensureCompatibility';
 
 /**
  * @param {postcss.Declaration} a
@@ -52,36 +52,6 @@ function sameDeclarationsAndOrder(a, b) {
   return a.every((d, index) => declarationIsEqual(d, b[index]));
 }
 
-// Internet Explorer use :-ms-input-placeholder.
-// Microsoft Edge use ::-ms-input-placeholder.
-const findMsInputPlaceholder = (selector) =>
-  ~selector.search(/-ms-input-placeholder/i);
-
-/**
- * @param {string} selector
- * @return {string[]}
- */
-function filterPrefixes(selector) {
-  return prefixes.filter((prefix) => selector.indexOf(prefix) !== -1);
-}
-
-function sameVendor(selectorsA, selectorsB) {
-  let same = (selectors) => selectors.map(filterPrefixes).join();
-  let findMsVendor = (selectors) => selectors.find(findMsInputPlaceholder);
-  return (
-    same(selectorsA) === same(selectorsB) &&
-    !(findMsVendor(selectorsA) && findMsVendor(selectorsB))
-  );
-}
-
-/**
- * @param {string} selector
- * @return {boolean}
- */
-function noVendor(selector) {
-  return !filterPrefixes(selector).length;
-}
-
 /**
  * @param {postcss.Rule} ruleA
  * @param {postcss.Rule} ruleB

packages/postcss-merge-rules/src/lib/ensureCompatibility.js

@@ -1,5 +1,6 @@
 import { isSupported } from 'caniuse-api';
 import selectorParser from 'postcss-selector-parser';
+import vendors from 'vendors';
 
 const simpleSelectorRe = /^#?[-._a-z0-9 ]+$/i;
 
@@ -10,6 +11,39 @@ const cssFirstLetter = 'css-first-letter';
 const cssFirstLine = 'css-first-line';
 const cssInOutOfRange = 'css-in-out-of-range';
 
+/** @type {string[]} */
+const prefixes = vendors.map((v) => `-${v}-`);
+
+/**
+ * @param {string} selector
+ * @return {string[]}
+ */
+export function filterPrefixes(selector) {
+  return prefixes.filter((prefix) => selector.indexOf(prefix) !== -1);
+}
+
+// Internet Explorer use :-ms-input-placeholder.
+// Microsoft Edge use ::-ms-input-placeholder.
+const findMsInputPlaceholder = (selector) =>
+  ~selector.search(/-ms-input-placeholder/i);
+
+export function sameVendor(selectorsA, selectorsB) {
+  let same = (selectors) => selectors.map(filterPrefixes).join();
+  let findMsVendor = (selectors) => selectors.find(findMsInputPlaceholder);
+  return (
+    same(selectorsA) === same(selectorsB) &&
+    !(findMsVendor(selectorsA) && findMsVendor(selectorsB))
+  );
+}
+
+/**
+ * @param {string} selector
+ * @return {boolean}
+ */
+export function noVendor(selector) {
+  return !filterPrefixes(selector).length;
+}
+
 export const pseudoElements = {
   ':active': cssSel2,
   ':after': cssGencontent,
@@ -61,6 +95,10 @@ function isCssMixin(selector) {
   return selector[selector.length - 1] === ':';
 }
 
+function isHostPseudoClass(selector) {
+  return selector.includes(':host');
+}
+
 const isSupportedCache = {};
 
 // Move to util in future
@@ -76,15 +114,16 @@ function isSupportedCached(feature, browsers) {
   return result;
 }
 
-export default function ensureCompatibility(
-  selectors,
-  browsers,
-  compatibilityCache
-) {
+export function ensureCompatibility(selectors, browsers, compatibilityCache) {
   // Should not merge mixins
   if (selectors.some(isCssMixin)) {
     return false;
   }
+
+  // Should not merge :host selector https://github.com/angular/angular-cli/issues/18672
+  if (selectors.some(isHostPseudoClass)) {
+    return false;
+  }
   return selectors.every((selector) => {
     if (simpleSelectorRe.test(selector)) {
       return true;
@@ -98,6 +137,9 @@ export default function ensureCompatibility(
         const { type, value } = node;
         if (type === 'pseudo') {
           const entry = pseudoElements[value];
+          if (!entry && noVendor(value)) {
+            compatible = false;
+          }
           if (entry && compatible) {
             compatible = isSupportedCached(entry, browsers);
           }