diff --git a/lib/less/index.js b/lib/less/index.js index 357339d4e..f748a44e5 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 d0c552337..0a3aad4df 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/directive.js b/lib/less/tree/directive.js index 3654acc28..27538332a 100644 --- a/lib/less/tree/directive.js +++ b/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,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 = 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 { @@ -25,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 a099efd91..c3b0b009e 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; } } }; diff --git a/lib/less/tree/media.js b/lib/less/tree/media.js new file mode 100644 index 000000000..2b7b26e58 --- /dev/null +++ b/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')); diff --git a/lib/less/tree/ruleset.js b/lib/less/tree/ruleset.js index ddfe2c563..cfa00d0a5 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) { diff --git a/test/css/media.css b/test/css/media.css index 751b179d9..bbfad74da 100644 --- a/test/css/media.css +++ b/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; + } +} diff --git a/test/less/media.less b/test/less/media.less index b26c18e0b..1196a5242 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,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(); +} \ No newline at end of file