Added automatic merging of media-query conditions

Author: NDMarcel

lib/less/tree/media.js

@@ -1,41 +1,113 @@
 (function (tree) {
 
 tree.Media = function (value, features) {
-    var selectors;
+    var el = new(tree.Element)('&', null, 0),
+        selectors = [new(tree.Selector)([el])];
 
-    this.features = features && new(tree.Value)(features);
-
-    if (Array.isArray(value)) {
-        selectors = [new(tree.Selector)([new(tree.Element)('&', null, 0)])];
-        this.ruleset = new(tree.Ruleset)(selectors, value);
-        this.ruleset.allowImports = true;
-    } else {
-        this.value = value;
-    }
+    this.features = new(tree.Value)(features);
+    this.ruleset = new(tree.Ruleset)(selectors, value);
+    this.ruleset.allowImports = true;
 };
 tree.Media.prototype = {
     toCSS: function (ctx, env) {
-        var features = this.features ? ' ' + this.features.toCSS(env) : '';
+        var features = this.features.toCSS(env);
 
-        if (this.ruleset) {
-            this.ruleset.root = (ctx.length === 0);
-            return '@media' + features + (env.compress ? '{' : ' {\n  ') +
-                   this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n  ') +
-                               (env.compress ? '}': '\n}\n');
-        } else {
-            return '@media ' + this.value.toCSS() + ';\n';
-        }
+        this.ruleset.root = (ctx.length === 0 || ctx[0].multiMedia);
+        return '@media ' + features + (env.compress ? '{' : ' {\n  ') +
+               this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n  ') +
+                           (env.compress ? '}': '\n}\n');
     },
     eval: function (env) {
-        this.features = this.features && this.features.eval(env);
+        if (!env.mediaBlocks) {
+          env.mediaBlocks = [];
+          env.mediaPath = [];
+        }
+
+        env.mediaBlocks.push(this);
+        env.mediaPath.push(this);
+
+        this.features = this.features.eval(env);
         env.frames.unshift(this);
-        this.ruleset = this.ruleset && this.ruleset.eval(env);
+        this.ruleset = this.ruleset.eval(env);
         env.frames.shift();
-        return this;
+
+        env.mediaPath.pop();
+
+        if (env.mediaPath.length === 0) {
+          return this.evalTop(env);
+        } else {
+          return this.evalNested(env);
+        }
     },
     variable: function (name) { return tree.Ruleset.prototype.variable.call(this.ruleset, name) },
     find: function () { return tree.Ruleset.prototype.find.apply(this.ruleset, arguments) },
-    rulesets: function () { return tree.Ruleset.prototype.rulesets.apply(this.ruleset) }
+    rulesets: function () { return tree.Ruleset.prototype.rulesets.apply(this.ruleset) },
+
+    evalTop: function (env) {
+      var result = this;
+
+      // Render all dependent Media blocks.
+      if (env.mediaBlocks.length > 1) {
+        var el = new(tree.Element)('&', null, 0);
+        var selectors = [new(tree.Selector)([el])];
+        result = new(tree.Ruleset)(selectors, env.mediaBlocks);
+        result.multiMedia = true;
+      }
+
+      delete env.mediaBlocks;
+      delete env.mediaPath;
+
+      return result;
+    },
+    evalNested: function (env) {
+      var i, value,
+          path = env.mediaPath.concat([this]);
+
+      // Extract the media-query conditions separated with `,` (OR).
+      for (i = 0; i < path.length; i++) {
+        value = path[i].features instanceof tree.Value ?
+                  path[i].features.value : path[i].features;
+        path[i] = Array.isArray(value) ? value : [value];
+      }
+
+      // Trace all permutations to generate the resulting media-query.
+      //
+      // (a, b and c) with nested (d, e) ->
+      //    a and d
+      //    a and e
+      //    b and c and d
+      //    b and c and e
+      this.features = new(tree.Value)(this.permute(path).map(function (path) {
+        path = path.map(function (fragment) {
+          return fragment.toCSS ? fragment : new(tree.Anonymous)(fragment);
+        });
+
+        for(i = path.length - 1; i > 0; i--) {
+          path.splice(i, 0, new(tree.Anonymous)("and"));
+        }
+
+        return new(tree.Expression)(path);
+      }));
+
+      // Fake a tree-node that doesn't output anything.
+      return new(tree.Ruleset)([], []);
+    },
+    permute: function (arr) {
+      if (arr.length == 0) {
+        return [];
+      } else if (arr.length == 1) {
+        return arr[0];
+      } else {
+        var result = [];
+        var rest = this.permute(arr.slice(1));
+        for (var i = 0; i < rest.length; i++) {
+          for (var j = 0; j < arr[0].length; j++) {
+            result.push([arr[0][j]].concat(rest[i]));
+          }
+        }
+        return result;
+      }
+    }
 };
 
 })(require('../tree'));

test/css/media.css

@@ -33,3 +33,18 @@
     background-color: red;
   }
 }
+@media print and (orientation: landscape) {
+  body {
+    margin-left: 20px;
+  }
+}
+@media a, b and c {
+  body {
+    width: 95%;
+  }
+}
+@media a and x, b and c and x, a and y, b and c and y {
+  body {
+    width: 100%;
+  }
+}

test/less/media.less

@@ -31,11 +31,25 @@
 }
 
 body {
-  @media print {
-    padding: 20px;
+    @media print {
+        padding: 20px;
 
-    header {
-      background-color: red;
+        header {
+            background-color: red;
+        }
+
+        @media (orientation:landscape) {
+            margin-left: 20px;
+        }
     }
-  }
 }
+
+body {
+    @media a, b and c {
+        width: 95%;
+
+        @media x, y {
+            width: 100%;
+        }
+    }
+}