Fixes #754 - treats empty rule as unmergeable.

Firefox and Chrome just ignore such rules while IE ignores empty rule and interprets the rest correctly. This means it could be used as a IE hack.
clean-css · Apr 9, 2016 · 4c988ce · 4c988ce
1 parent c0d4f4a
commit 4c988ce
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 3 deletions.
diff --git a/History.md b/History.md
@@ -2,6 +2,7 @@
 ==================
 
 * Fixed issue [#734](https://github.com/jakubpawlowicz/clean-css/issues/734) - `--root` option edge case.
+* Fixed issue [#758](https://github.com/jakubpawlowicz/clean-css/issues/758) - treats empty rule as unmergeable.
 
 [3.4.11 / 2016-04-01](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.10...v3.4.11)
 ==================

diff --git a/lib/utils/compatibility.js b/lib/utils/compatibility.js
@@ -22,7 +22,7 @@ var DEFAULTS = {
     selectors: {
       adjacentSpace: false, // div+ nav Android stock browser hack
       ie7Hack: false, // *+html hack
-      special: /(\-moz\-|\-ms\-|\-o\-|\-webkit\-|:dir\([a-z-]*\)|:first(?![a-z-])|:fullscreen|:left|:read-only|:read-write|:right|:placeholder|:host|::content|\/deep\/|::shadow)/ // special selectors which prevent merging
+      special: /(\-moz\-|\-ms\-|\-o\-|\-webkit\-|:dir\([a-z-]*\)|:first(?![a-z-])|:fullscreen|:left|:read-only|:read-write|:right|:placeholder|:host|::content|\/deep\/|::shadow|^,)/ // special selectors which prevent merging
     },
     units: {
       ch: true,
@@ -58,7 +58,7 @@ var DEFAULTS = {
     selectors: {
       adjacentSpace: false,
       ie7Hack: false,
-      special: /(\-moz\-|\-ms\-|\-o\-|\-webkit\-|:root|:nth|:first\-of|:last|:only|:empty|:target|:checked|::selection|:enabled|:disabled|:not|:placeholder|:host|::content|\/deep\/|::shadow)/
+      special: /(\-moz\-|\-ms\-|\-o\-|\-webkit\-|:root|:nth|:first\-of|:last|:only|:empty|:target|:checked|::selection|:enabled|:disabled|:not|:placeholder|:host|::content|\/deep\/|::shadow|^,)/
     },
     units: {
       ch: false,
@@ -94,7 +94,7 @@ var DEFAULTS = {
     selectors: {
       adjacentSpace: false,
       ie7Hack: true,
-      special: /(\-moz\-|\-ms\-|\-o\-|\-webkit\-|:focus|:before|:after|:root|:nth|:first\-of|:last|:only|:empty|:target|:checked|::selection|:enabled|:disabled|:not|:placeholder|:host|::content|\/deep\/|::shadow)/
+      special: /(\-moz\-|\-ms\-|\-o\-|\-webkit\-|:focus|:before|:after|:root|:nth|:first\-of|:last|:only|:empty|:target|:checked|::selection|:enabled|:disabled|:not|:placeholder|:host|::content|\/deep\/|::shadow|^,)/
     },
     units: {
       ch: false,

diff --git a/test/selectors/merge-adjacent-test.js b/test/selectors/merge-adjacent-test.js
@@ -67,6 +67,14 @@ vows.describe('remove duplicates')
       'two rules with latter with suffix properties': [
         'a{display:none}a{display:none;visibility:hidden}',
         'a{display:none;visibility:hidden}'
+      ],
+      'no rule after comma': [
+        'h1{color:#000},h2{color:#000}',
+        'h1{color:#000},h2{color:#000}'
+      ],
+      'no rule after comma with comma last': [
+        'h1{color:#000}h2,{color:#000}',
+        'h1{color:#000},h2{color:#000}'
       ]
     })
   )

diff --git a/test/selectors/merge-non-adjacent-by-body-test.js b/test/selectors/merge-non-adjacent-by-body-test.js
@@ -27,6 +27,10 @@ vows.describe('merge non djacent by body')
       'of element selectors with an empty class selector in between': [
         'p{color:red}.a{}div{color:red}',
         'div,p{color:red}'
+      ],
+      'no rule after comma': [
+        'h1{color:#000}div{color:red},h2{color:#000}',
+        'h1{color:#000}div{color:red},h2{color:#000}'
       ]
     })
   )

diff --git a/test/selectors/restructure-test.js b/test/selectors/restructure-test.js
@@ -155,6 +155,10 @@ vows.describe('restructure')
       'with different vendor prefixed value group': [
         'a{-moz-box-sizing:content-box;box-sizing:content-box}div{color:red}p{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}',
         'a{-moz-box-sizing:content-box;box-sizing:content-box}div{color:red}p{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}'
+      ],
+      'no rule after comma': [
+        'h1{color:#000}div{color:red},h2{color:#000;display:block}',
+        'h1{color:#000}div{color:red},h2{color:#000;display:block}'
       ]
     })
   )