From 288248dc5a9fefb2048f1b3509a4f4d7fc700ccd Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Tue, 14 Feb 2012 20:10:25 +0100
Subject: [PATCH 1/8] added @media bubbling (similar to SASS)

---
 lib/less/tree/directive.js | 7 +++++--
 test/css/media.css         | 5 +++++
 test/less/media.less       | 8 +++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/lib/less/tree/directive.js b/lib/less/tree/directive.js
index 3654acc2..d22f8ffb 100644
--- a/lib/less/tree/directive.js
+++ b/lib/less/tree/directive.js
@@ -1,11 +1,14 @@
 (function (tree) {
 
 tree.Directive = function (name, value, features) {
+    var selectors;
+
     this.name = name;
     this.features = features && new(tree.Value)(features);
 
     if (Array.isArray(value)) {
-        this.ruleset = new(tree.Ruleset)([], value);
+        selectors = name === '@media' ? [new(tree.Selector)([new(tree.Element)("", null, 0)])] : [];
+        this.ruleset = new(tree.Ruleset)(selectors, value);
         this.ruleset.allowImports = true;
     } else {
         this.value = value;
@@ -16,7 +19,7 @@ tree.Directive.prototype = {
         var features = this.features ? ' ' + this.features.toCSS(env) : '';
 
         if (this.ruleset) {
-            this.ruleset.root = true;
+            this.ruleset.root = ctx.length === 0 || (this.name !== '@media');
             return this.name + features + (env.compress ? '{' : ' {\n  ') +
                    this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n  ') +
                                (env.compress ? '}': '\n}\n');
diff --git a/test/css/media.css b/test/css/media.css
index 751b179d..0b3b8e3d 100644
--- a/test/css/media.css
+++ b/test/css/media.css
@@ -25,3 +25,8 @@
     max-width: 480px;
   }
 }
+@media print {
+  body {
+    padding: 20px;
+  }
+}
diff --git a/test/less/media.less b/test/less/media.less
index b26c18e0..98c8b54a 100644
--- a/test/less/media.less
+++ b/test/less/media.less
@@ -5,7 +5,7 @@
 
 @media print {
     .class {
-        color: blue;    
+        color: blue;
         .sub {
             width: @var;
         }
@@ -29,3 +29,9 @@
         max-width: 480px;
     }
 }
+
+body {
+  @media print {
+    padding: 20px;
+  }
+}

From 9fb9b557705e5234994a55b5ec33edb72d508457 Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Tue, 14 Feb 2012 20:24:09 +0100
Subject: [PATCH 2/8] added more complex test for @media bubbling

---
 test/css/media.css   | 3 +++
 test/less/media.less | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/test/css/media.css b/test/css/media.css
index 0b3b8e3d..01cc953e 100644
--- a/test/css/media.css
+++ b/test/css/media.css
@@ -29,4 +29,7 @@
   body {
     padding: 20px;
   }
+  body  header {
+    background-color: red;
+  }
 }
diff --git a/test/less/media.less b/test/less/media.less
index 98c8b54a..b23656ae 100644
--- a/test/less/media.less
+++ b/test/less/media.less
@@ -33,5 +33,9 @@
 body {
   @media print {
     padding: 20px;
+
+    header {
+      background-color: red;
+    }
   }
 }

From 378ddef61f618603b54dbb76d534d982d1fecbe9 Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Wed, 15 Feb 2012 17:17:48 +0100
Subject: [PATCH 3/8] fixed double-space

---
 lib/less/tree/directive.js | 2 +-
 test/css/media.css         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/less/tree/directive.js b/lib/less/tree/directive.js
index d22f8ffb..dd183824 100644
--- a/lib/less/tree/directive.js
+++ b/lib/less/tree/directive.js
@@ -7,7 +7,7 @@ tree.Directive = function (name, value, features) {
     this.features = features && new(tree.Value)(features);
 
     if (Array.isArray(value)) {
-        selectors = name === '@media' ? [new(tree.Selector)([new(tree.Element)("", null, 0)])] : [];
+        selectors = name === '@media' ? [new(tree.Selector)([new(tree.Element)('&', null, 0)])] : [];
         this.ruleset = new(tree.Ruleset)(selectors, value);
         this.ruleset.allowImports = true;
     } else {
diff --git a/test/css/media.css b/test/css/media.css
index 01cc953e..ee277bdc 100644
--- a/test/css/media.css
+++ b/test/css/media.css
@@ -29,7 +29,7 @@
   body {
     padding: 20px;
   }
-  body  header {
+  body header {
     background-color: red;
   }
 }

From 53b67e79fe70ea958d3f7170018de006baaf234d Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Thu, 16 Feb 2012 20:56:21 +0100
Subject: [PATCH 4/8] moved @media code to own file

---
 lib/less/index.js        |  3 ++-
 lib/less/parser.js       |  2 +-
 lib/less/tree/media.js   | 41 ++++++++++++++++++++++++++++++++++++++++
 lib/less/tree/ruleset.js |  2 +-
 4 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 lib/less/tree/media.js

diff --git a/lib/less/index.js b/lib/less/index.js
index 357339d4..f748a44e 100644
--- a/lib/less/index.js
+++ b/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);
 });
diff --git a/lib/less/parser.js b/lib/less/parser.js
index d0c55233..0a3aad4d 100644
--- a/lib/less/parser.js
+++ b/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);
                     }
                 }
             },
diff --git a/lib/less/tree/media.js b/lib/less/tree/media.js
new file mode 100644
index 00000000..4350c576
--- /dev/null
+++ b/lib/less/tree/media.js
@@ -0,0 +1,41 @@
+(function (tree) {
+
+tree.Media = function (value, features) {
+    var selectors;
+
+    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;
+    }
+};
+tree.Media.prototype = {
+    toCSS: function (ctx, env) {
+        var features = this.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';
+        }
+    },
+    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();
+        return this;
+    },
+    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) }
+};
+
+})(require('../tree'));
diff --git a/lib/less/tree/ruleset.js b/lib/less/tree/ruleset.js
index ddfe2c56..cfa00d0a 100644
--- a/lib/less/tree/ruleset.js
+++ b/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) {

From 80e8b42e9af7da6f6afdd4719e5cd92d41238207 Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Fri, 17 Feb 2012 01:19:46 +0100
Subject: [PATCH 5/8] remove @media code from tree.Directive

---
 lib/less/tree/directive.js | 13 +++----------
 lib/less/tree/import.js    |  2 +-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/lib/less/tree/directive.js b/lib/less/tree/directive.js
index dd183824..27538332 100644
--- a/lib/less/tree/directive.js
+++ b/lib/less/tree/directive.js
@@ -1,14 +1,10 @@
 (function (tree) {
 
 tree.Directive = function (name, value, features) {
-    var selectors;
-
     this.name = name;
-    this.features = features && new(tree.Value)(features);
 
     if (Array.isArray(value)) {
-        selectors = name === '@media' ? [new(tree.Selector)([new(tree.Element)('&', null, 0)])] : [];
-        this.ruleset = new(tree.Ruleset)(selectors, value);
+        this.ruleset = new(tree.Ruleset)([], value);
         this.ruleset.allowImports = true;
     } else {
         this.value = value;
@@ -16,11 +12,9 @@ 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 = ctx.length === 0 || (this.name !== '@media');
-            return this.name + features + (env.compress ? '{' : ' {\n  ') +
+            this.ruleset.root = true;
+            return this.name + (env.compress ? '{' : ' {\n  ') +
                    this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n  ') +
                                (env.compress ? '}': '\n}\n');
         } else {
@@ -28,7 +22,6 @@ tree.Directive.prototype = {
         }
     },
     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();
diff --git a/lib/less/tree/import.js b/lib/less/tree/import.js
index a099efd9..c3b0b009 100644
--- a/lib/less/tree/import.js
+++ b/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;
         }
     }
 };

From 936ab7d52e2c4a3786e678e05cf62d258e28c470 Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Fri, 17 Feb 2012 01:39:03 +0100
Subject: [PATCH 6/8] Added automatic merging of media-query conditions

---
 lib/less/tree/media.js | 118 +++++++++++++++++++++++++++++++++--------
 test/css/media.css     |  15 ++++++
 test/less/media.less   |  24 +++++++--
 3 files changed, 129 insertions(+), 28 deletions(-)

diff --git a/lib/less/tree/media.js b/lib/less/tree/media.js
index 4350c576..e86ec5b2 100644
--- a/lib/less/tree/media.js
+++ b/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'));
diff --git a/test/css/media.css b/test/css/media.css
index ee277bdc..a591017e 100644
--- a/test/css/media.css
+++ b/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%;
+  }
+}
diff --git a/test/less/media.less b/test/less/media.less
index b23656ae..6a3749b7 100644
--- a/test/less/media.less
+++ b/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%;
+        }
+    }
+}
\ No newline at end of file

From 081c26dc9ad19f558abbe8b7955209eeeffcacc3 Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Fri, 17 Feb 2012 01:42:22 +0100
Subject: [PATCH 7/8] adjusted indent-whitespace to 4 spaces

---
 lib/less/tree/media.js | 112 ++++++++++++++++++++---------------------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/lib/less/tree/media.js b/lib/less/tree/media.js
index e86ec5b2..4b5d44db 100644
--- a/lib/less/tree/media.js
+++ b/lib/less/tree/media.js
@@ -19,8 +19,8 @@ tree.Media.prototype = {
     },
     eval: function (env) {
         if (!env.mediaBlocks) {
-          env.mediaBlocks = [];
-          env.mediaPath = [];
+            env.mediaBlocks = [];
+            env.mediaPath = [];
         }
 
         env.mediaBlocks.push(this);
@@ -34,9 +34,9 @@ tree.Media.prototype = {
         env.mediaPath.pop();
 
         if (env.mediaPath.length === 0) {
-          return this.evalTop(env);
+            return this.evalTop(env);
         } else {
-          return this.evalNested(env);
+            return this.evalNested(env);
         }
     },
     variable: function (name) { return tree.Ruleset.prototype.variable.call(this.ruleset, name) },
@@ -44,68 +44,68 @@ tree.Media.prototype = {
     rulesets: function () { return tree.Ruleset.prototype.rulesets.apply(this.ruleset) },
 
     evalTop: function (env) {
-      var result = this;
+        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"));
+        // 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;
         }
 
-        return new(tree.Expression)(path);
-      }));
+        delete env.mediaBlocks;
+        delete env.mediaPath;
 
-      // Fake a tree-node that doesn't output anything.
-      return new(tree.Ruleset)([], []);
+        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 [];
+          return [];
       } else if (arr.length == 1) {
-        return arr[0];
+          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]));
+          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;
+          return result;
       }
     }
 };

From 1ba622dd8dc8a44f072a9e5a89bf19986313d2cd Mon Sep 17 00:00:00 2001
From: Marcel Jackwerth <marcel@northdocks.com>
Date: Fri, 17 Feb 2012 11:57:31 +0100
Subject: [PATCH 8/8] fixed a bug when using @media with mixins

---
 lib/less/tree/media.js | 27 ++++++++++++++-------------
 test/css/media.css     | 26 ++++++++++++++++++++++++++
 test/less/media.less   | 20 ++++++++++++++++++++
 3 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/lib/less/tree/media.js b/lib/less/tree/media.js
index 4b5d44db..2b7b26e5 100644
--- a/lib/less/tree/media.js
+++ b/lib/less/tree/media.js
@@ -22,22 +22,23 @@ tree.Media.prototype = {
             env.mediaBlocks = [];
             env.mediaPath = [];
         }
-
-        env.mediaBlocks.push(this);
+        
+        var blockIndex = env.mediaBlocks.length;
         env.mediaPath.push(this);
+        env.mediaBlocks.push(this);
 
-        this.features = this.features.eval(env);
-        env.frames.unshift(this);
-        this.ruleset = this.ruleset.eval(env);
+        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();
 
-        if (env.mediaPath.length === 0) {
-            return this.evalTop(env);
-        } else {
-            return this.evalNested(env);
-        }
+        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) },
@@ -93,9 +94,9 @@ tree.Media.prototype = {
         return new(tree.Ruleset)([], []);
     },
     permute: function (arr) {
-      if (arr.length == 0) {
+      if (arr.length === 0) {
           return [];
-      } else if (arr.length == 1) {
+      } else if (arr.length === 1) {
           return arr[0];
       } else {
           var result = [];
diff --git a/test/css/media.css b/test/css/media.css
index a591017e..bbfad74d 100644
--- a/test/css/media.css
+++ b/test/css/media.css
@@ -48,3 +48,29 @@
     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;
+  }
+}
diff --git a/test/less/media.less b/test/less/media.less
index 6a3749b7..1196a524 100644
--- a/test/less/media.less
+++ b/test/less/media.less
@@ -52,4 +52,24 @@ body {
             width: 100%;
         }
     }
+}
+
+.mediaMixin(@fallback: 200px) {
+    background: black;
+
+    @media handheld {
+        background: white;
+
+        @media (max-width: @fallback) {
+            background: red;
+        }
+    }
+}
+
+.a {
+  .mediaMixin(100px);
+}
+
+.b {
+  .mediaMixin();
 }
\ No newline at end of file