Issue less#122: Updated directive class to support parsing variables in media queries. Added unit test.

Author: razialx

lib/less/parser.js

@@ -972,7 +972,14 @@ less.Parser = function Parser(env) {
 
                 if (value = $(this['import'])) {
                     return value;
-                } else if (name = $(/^@media|@page/) || $(/^@(?:-webkit-|-moz-)?keyframes/)) {
+                } else if (name = $(/^@media/)) {
+                    var nodes = [], n;
+                    while(n = $(this.entity) || $(/^[\(|\)|:]/)) {
+                        nodes.push( (typeof n == 'string'? new tree.Keyword(n):n));
+                    }
+                    rules = $(this.block);
+                    return new(tree.Directive)(name, rules, nodes);
+                } else if (name = $(/^@page/) || $(/^@(?:-webkit-|-moz-)?keyframes/)) {
                     types = ($(/^[^{]+/) || '').trim();
                     if (rules = $(this.block)) {
                         return new(tree.Directive)(name + " " + types, rules);

lib/less/tree/directive.js

@@ -1,25 +1,39 @@
 (function (tree) {
 
-tree.Directive = function (name, value) {
+tree.Directive = function (name, value, nodes) {
     this.name = name;
     if (Array.isArray(value)) {
         this.ruleset = new(tree.Ruleset)([], value);
     } else {
         this.value = value;
     }
+    this.nodes = (typeof(nodes) != 'undefined' ? nodes : null);
 };
 tree.Directive.prototype = {
     toCSS: function (ctx, env) {
+        var node_css = '';
+        if(this.nodes) {
+            for(var n in this.nodes) {
+                node_css += ' ' + this.nodes[n].toCSS(ctx, env) ;
+            }
+            /* Remove extra spaces in query synax so unit tests pass */
+            node_css = node_css.replace(/\(\s+([^\s]+)\s+:\s+([^\s]+)\s\)/g,'($1:$2)');
+        }
         if (this.ruleset) {
             this.ruleset.root = true;
-            return this.name + (env.compress ? '{' : ' {\n  ') +
+            return this.name + node_css +(env.compress ? '{' : ' {\n  ') +
                    this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n  ') +
                                (env.compress ? '}': '\n}\n');
         } else {
-            return this.name + ' ' + this.value.toCSS() + ';\n';
+            return this.name + node_css + ' ' + this.value.toCSS() + ';\n';
         }
     },
     eval: function (env) {
+        if(this.nodes) {
+            for(var i = 0; i < this.nodes.length; i++) {
+                this.nodes[i] = this.nodes[i].eval(env);
+            }
+        }
         env.frames.unshift(this);
         this.ruleset = this.ruleset && this.ruleset.eval(env);
         env.frames.shift();

test/css/media.css

@@ -19,3 +19,8 @@
     float: none;
   }
 }
+@media screen and (min-width:42) {
+  div {
+    color: #222;
+  }
+}

test/less/media.less

@@ -23,3 +23,6 @@
 @media all and (orientation:portrait) {
     aside { float: none; }
 }
+@media screen and (min-width: @var) {
+    div { color: #222; }
+}