Fixes #833 - moving `@media` queries.

Why:

* So it's not about `!important` modifier but `@` sign which were
  incorrectly treated as a special marker starting a block.
* The solution is somewhat hacky - checking if a preceding character
  is not a special marker - but an improved tokenizer will be there
  soon (-ish).

diff --git a/History.md b/History.md
index ea5d0b0..ad27987 100644 (file)
--- a/History.md
+++ b/History.md
@@ -3,6 +3,11 @@
 
 * Requires Node.js 4.0+ to run.
 
+[3.4.21 / 2016-xx-xx](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.20...3.4)
+==================
+
+* Fixed issue [#833](https://github.com/jakubpawlowicz/clean-css/issues/833) - moving `@media` queries.
+
 [3.4.20 / 2016-09-26](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.19...v3.4.20)
 ==================
 

diff --git a/lib/tokenizer/tokenize.js b/lib/tokenizer/tokenize.js
index 449a3cb..b262c49 100644 (file)
--- a/lib/tokenizer/tokenize.js
+++ b/lib/tokenizer/tokenize.js
@@ -81,6 +81,10 @@ function whatsNext(context) {
   var nextBodyStart = chunk.indexOf('{', context.cursor);
   var nextBodyEnd = chunk.indexOf('}', context.cursor);
 
+  if (nextSpecial > -1 && context.cursor > 0 && !/\s|\{|\}|\/|_|,|;/.test(chunk.substring(nextSpecial - 1, nextSpecial))) {
+    nextSpecial = -1;
+  }
+
   if (nextEscape > -1 && /\S/.test(chunk.substring(context.cursor, nextEscape)))
     nextEscape = -1;
 

diff --git a/test/selectors/merge-media-queries-test.js b/test/selectors/merge-media-queries-test.js
index 734baaa..98e4676 100644 (file)
--- a/test/selectors/merge-media-queries-test.js
+++ b/test/selectors/merge-media-queries-test.js
@@ -83,6 +83,10 @@ vows.describe('merge media queries')
       'backward of two with overriding shorthand in between': [
         '@media screen{a{font-size:10px}}@media (min-width:1024px){.one{font:13px Helvetica}}@media screen{div{display:block}}',
         '@media screen{a{font-size:10px}div{display:block}}@media (min-width:1024px){.one{font:13px Helvetica}}'
+      ],
+      'with at sign in rule name': [
+        '@media screen{.one{margin-left:-16px}}.two{margin-left:0}.three{width:50%!important}.four{width:25%!important}@media screen{.three\\\@m{width:50%!important}.four\\\@m{width:25%!important}}',
+        '@media screen{.one{margin-left:-16px}}.two{margin-left:0}.three{width:50%!important}.four{width:25%!important}@media screen{.three\\\@m{width:50%!important}.four\\\@m{width:25%!important}}'
       ]
     })
   )