From: Alex Lam S.L <alexlamsl@gmail.com>
Date: Sun, 8 Jan 2017 10:36:26 +0000 (+0100)
Subject: See #842 - removes HTML comments from selectors.
X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?a=commitdiff_plain;h=e59a5aa025f24577c02d5af3c46e10dc58fa9469;p=clean-css.git

See #842 - removes HTML comments from selectors.

Kudos to @alexlamsl for the fix.

Why:

* Apparently anything wrapped between HTML comments still gets
  processed by browsers.
---

diff --git a/lib/optimizer/tidy-rules.js b/lib/optimizer/tidy-rules.js
index a57fec7d..9b6c725b 100644
--- a/lib/optimizer/tidy-rules.js
+++ b/lib/optimizer/tidy-rules.js
@@ -1,6 +1,7 @@
 var Marker = require('../tokenizer/marker');
 var formatPosition = require('../utils/format-position');
 
+var HTML_COMMENT_PATTERN = /^(?:(?:<!--|-->)\s*)+/;
 var RELATION_PATTERN = /[>\+~]/;
 var WHITESPACE_PATTERN = /\s/;
 
@@ -142,10 +143,17 @@ function tidyRules(rules, removeUnsupported, adjacentSpace, beautify, warnings)
   var list = [];
   var repeated = [];
 
+  function removeHTMLComment(rule, match) {
+    warnings.push('HTML comment \'' + match + '\' at ' + formatPosition(rule[2][0]) + '. Removing.');
+    return '';
+  }
+
   for (var i = 0, l = rules.length; i < l; i++) {
     var rule = rules[i];
     var reduced = rule[1];
 
+    reduced = reduced.replace(HTML_COMMENT_PATTERN, removeHTMLComment.bind(null, rule));
+
     if (hasInvalidCharacters(reduced)) {
       warnings.push('Invalid selector \'' + rule[1] + '\' at ' + formatPosition(rule[2][0]) + '. Ignoring.');
       continue;
diff --git a/test/optimizer/basic-test.js b/test/optimizer/basic-test.js
index 654d9aee..bf6b79a1 100644
--- a/test/optimizer/basic-test.js
+++ b/test/optimizer/basic-test.js
@@ -121,6 +121,10 @@ vows.describe('simple optimizations')
         'body;{body}',
         ''
       ],
+      'html comments': [
+        '<!-- a{color:red} --> p{color:red} <!--div{color:red}--> ',
+        'a{color:red}p{color:red}div{color:red}'
+      ],
       'missing semicolon and brace in the middle': [
         'body{color:red a{color:blue;}',
         ''