fix(postcss-discard-comments): not remove comment-like strings from s…

…electors (#1623)

* fix(postcss-discard-comments): not remove comment-like strings from selectors

* fix: spaces were being removed even if there was no replacement

* test: add test case

packages/postcss-discard-comments/package.json

@@ -23,6 +23,9 @@
     "url": "http://beneb.info"
   },
   "repository": "cssnano/cssnano",
+  "dependencies": {
+    "postcss-selector-parser": "^6.1.0"
+  },
   "bugs": {
     "url": "https://github.com/cssnano/cssnano/issues"
   },

packages/postcss-discard-comments/src/index.js

@@ -1,6 +1,7 @@
 'use strict';
 const CommentRemover = require('./lib/commentRemover');
 const commentParser = require('./lib/commentParser');
+const selectorParser = require('postcss-selector-parser');
 
 /** @typedef {object} Options
  *  @property {boolean=} removeAll
@@ -65,6 +66,45 @@ function pluginCreator(opts = {}) {
     return result;
   }
 
+  /**
+   * @param {string} source
+   * @param {(s: string) => string[]} space
+   * @return {string}
+   */
+  function replaceCommentsInSelector(source, space) {
+    const key = source + '@|@';
+
+    if (replacerCache.has(key)) {
+      return replacerCache.get(key);
+    }
+    const processed = selectorParser((ast) => {
+      ast.walk((node) => {
+        if (node.type === 'comment') {
+          const contents = node.value.slice(2, -2);
+          if (remover.canRemove(contents)) {
+            node.remove();
+          }
+        }
+        const rawSpaceAfter = replaceComments(node.rawSpaceAfter, space, '');
+        const rawSpaceBefore = replaceComments(node.rawSpaceBefore, space, '');
+        // If comments are not removed, the result of trim will be returned,
+        // so if we compare and there are no changes, skip it.
+        if (rawSpaceAfter !== node.rawSpaceAfter.trim()) {
+          node.rawSpaceAfter = rawSpaceAfter;
+        }
+        if (rawSpaceBefore !== node.rawSpaceBefore.trim()) {
+          node.rawSpaceBefore = rawSpaceBefore;
+        }
+      });
+    }).processSync(source);
+
+    const result = space(processed).join(' ');
+
+    replacerCache.set(key, result);
+
+    return result;
+  }
+
   return {
     postcssPlugin: 'postcss-discard-comments',
 
@@ -114,10 +154,9 @@ function pluginCreator(opts = {}) {
           node.raws.selector &&
           node.raws.selector.raw
         ) {
-          node.raws.selector.raw = replaceComments(
+          node.raws.selector.raw = replaceCommentsInSelector(
             node.raws.selector.raw,
-            list.space,
-            ''
+            list.space
           );
 
           return;

packages/postcss-discard-comments/test/index.js

@@ -167,6 +167,16 @@ test(
   passthroughCSS('h1{margin:20px! /*! test */ important}')
 );
 
+test(
+  'should keep special comments 14',
+  passthroughCSS('h1 /*!test comment*/, h2{color:#00f}')
+);
+
+test(
+  'should keep special comments 15',
+  passthroughCSS('h1 /*!test comment*/ span, h2{color:#00f}')
+);
+
 test(
   'should remove comments marked as @ but keep other',
   processCSS(
@@ -210,6 +220,30 @@ test(
   )
 );
 
+test(
+  'should remove only a comment',
+  processCSS(
+    '.a /*comment*/ [attr="/* not a comment */"]{color:#000}',
+    '.a [attr="/* not a comment */"]{color:#000}'
+  )
+);
+
+test(
+  'should remove only a comment 2',
+  processCSS(
+    '.a [attr="/* not a comment */"] /*comment*/, .b {color:#000}',
+    '.a [attr="/* not a comment */"], .b{color:#000}'
+  )
+);
+
+test(
+  'should remove only a comment 3',
+  processCSS(
+    ':not(/*comment*/ [attr="/* not a comment */"]){color:#000}',
+    ':not( [attr="/* not a comment */"]){color:#000}'
+  )
+);
+
 test(
   "should pass through when it doesn't find a comment",
   passthroughCSS('h1{color:#000;font-weight:700}')