github/less.js
1
1
Fork 0
mirror of https://github.com/less/less.js.git synced 2026-02-05 20:44:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #634 from sirlantis/patch-media

Browse Source 
Add @media bubbling/nesting/merging
This commit is contained in:
Alexis Sellier
2012-02-28 07:45:34 -08:00
parent ab5343098c 1ba622dd8d
commit 2723c4ecdc
8 changed files with 214 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
lib/less/index.js
View File

@@ -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);
});

2
lib/less/parser.js
View File

@@ -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);
}
}
},

6
lib/less/tree/directive.js
View File

@@ -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();

2
lib/less/tree/import.js
View File

@@ -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;
}
}
};

114
lib/less/tree/media.js Normal file
View File

@@ -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'));

2
lib/less/tree/ruleset.js
View File

@@ -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) {

49
test/css/media.css
View File

@@ -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;
}
}

46
test/less/media.less
View File

@@ -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();
}