Merge pull request #634 from sirlantis/patch-media

Add @media bubbling/nesting/merging

Author: Alexis Sellier

lib/less/index.js

@@ -82,7 +82,8 @@ var less = {
  'selector',   'quoted',     'expression', 'rule',
  'call',       'url',        'alpha',      'import',
  'mixin',      'comment',    'anonymous',  'value',
- 'javascript', 'assignment', 'condition',  'paren'
+ 'javascript', 'assignment', 'condition',  'paren',
+ 'media'
 ].forEach(function (n) {
     require('./tree/' + n);
 });

lib/less/parser.js

@@ -1089,7 +1089,7 @@ less.Parser = function Parser(env) {
                     features = $(this.mediaFeatures);
 
                     if (rules = $(this.block)) {
-                        return new(tree.Directive)('@media', rules, features);
+                        return new(tree.Media)(rules, features);
                     }
                 }
             },

lib/less/tree/directive.js

@@ -2,7 +2,6 @@
 
 tree.Directive = function (name, value, features) {
     this.name = name;
-    this.features = features && new(tree.Value)(features);
 
     if (Array.isArray(value)) {
         this.ruleset = new(tree.Ruleset)([], value);
@@ -13,19 +12,16 @@ tree.Directive = function (name, value, features) {
 };
 tree.Directive.prototype = {
     toCSS: function (ctx, env) {
-        var features = this.features ? ' ' + this.features.toCSS(env) : '';
-
         if (this.ruleset) {
             this.ruleset.root = true;
-            return this.name + features + (env.compress ? '{' : ' {\n  ') +
+            return this.name + (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';
         }
     },
     eval: function (env) {
-        this.features = this.features && this.features.eval(env);
         env.frames.unshift(this);
         this.ruleset = this.ruleset && this.ruleset.eval(env);
         env.frames.shift();

lib/less/tree/import.js

@@ -71,7 +71,7 @@ tree.Import.prototype = {
                                 [i, 1].concat(ruleset.rules[i].eval(env)));
                 }
             }
-            return this.features ? new(tree.Directive)('@media', ruleset.rules, this.features.value) : ruleset.rules;
+            return this.features ? new(tree.Media)(ruleset.rules, this.features.value) : ruleset.rules;
         }
     }
 };

lib/less/tree/media.js

@@ -0,0 +1,114 @@
+(function (tree) {
+
+tree.Media = function (value, features) {
+    var el = new(tree.Element)('&', null, 0),
+        selectors = [new(tree.Selector)([el])];
+
+    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.toCSS(env);
+
+        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) {
+        if (!env.mediaBlocks) {
+            env.mediaBlocks = [];
+            env.mediaPath = [];
+        }
+        
+        var blockIndex = env.mediaBlocks.length;
+        env.mediaPath.push(this);
+        env.mediaBlocks.push(this);
+
+        var media = new(tree.Media)([], []);
+        media.features = this.features.eval(env);
+        
+        env.frames.unshift(this.ruleset);
+        media.ruleset = this.ruleset.eval(env);
+        env.frames.shift();
+        
+        env.mediaBlocks[blockIndex] = media;
+        env.mediaPath.pop();
+
+        return env.mediaPath.length === 0 ? media.evalTop(env) :
+                    media.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) },
+
+    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'));

lib/less/tree/ruleset.js

@@ -130,7 +130,7 @@ tree.Ruleset.prototype = {
         for (var i = 0; i < this.rules.length; i++) {
             rule = this.rules[i];
 
-            if (rule.rules || (rule instanceof tree.Directive)) {
+            if (rule.rules || (rule instanceof tree.Directive) || (rule instanceof tree.Media)) {
                 rulesets.push(rule.toCSS(paths, env));
             } else if (rule instanceof tree.Comment) {
                 if (!rule.silent) {

test/css/media.css

@@ -25,3 +25,52 @@
     max-width: 480px;
   }
 }
+@media print {
+  body {
+    padding: 20px;
+  }
+  body header {
+    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%;
+  }
+}
+.a {
+  background: black;
+}
+@media handheld {
+  .a {
+    background: white;
+  }
+}
+@media handheld and (max-width: 100px) {
+  .a {
+    background: red;
+  }
+}
+.b {
+  background: black;
+}
+@media handheld {
+  .b {
+    background: white;
+  }
+}
+@media handheld and (max-width: 200px) {
+  .b {
+    background: red;
+  }
+}

test/less/media.less

@@ -5,7 +5,7 @@
 
 @media print {
     .class {
-        color: blue;    
+        color: blue;
         .sub {
             width: @var;
         }
@@ -29,3 +29,47 @@
         max-width: 480px;
     }
 }
+
+body {
+    @media print {
+        padding: 20px;
+
+        header {
+            background-color: red;
+        }
+
+        @media (orientation:landscape) {
+            margin-left: 20px;
+        }
+    }
+}
+
+body {
+    @media a, b and c {
+        width: 95%;
+
+        @media x, y {
+            width: 100%;
+        }
+    }
+}
+
+.mediaMixin(@fallback: 200px) {
+    background: black;
+
+    @media handheld {
+        background: white;
+
+        @media (max-width: @fallback) {
+            background: red;
+        }
+    }
+}
+
+.a {
+  .mediaMixin(100px);
+}
+
+.b {
+  .mediaMixin();
+}