Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Property accessors for Less for Issue #2433 #2654

Closed
wants to merge 3 commits into from
Closed

Property accessors for Less for Issue #2433 #2654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d59321f
Property accessors for Less
matthew-dean Aug 5, 2015
50d12ea
Property merging for accessors
matthew-dean Aug 23, 2015
8bf4232
All tests passing
matthew-dean Nov 27, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 37 additions & 14 deletions lib/less/parser/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,15 +435,15 @@ var Parser = function Parser(context, imports, fileInfo) {
return;
}

value = this.quoted() || this.variable() ||
value = this.quoted() || this.variable() || this.property() ||
parserInput.$re(/^(?:(?:\\[\(\)'"])|[^\(\)'"])+/) || "";

parserInput.autoCommentAbsorb = true;

expectChar(')');

return new(tree.URL)((value.value != null || value instanceof tree.Variable) ?
value : new(tree.Anonymous)(value), index, fileInfo);
return new(tree.URL)((value.value != null || value instanceof tree.Variable || value instanceof tree.Property) ?
value : new(tree.Anonymous)(value), index, fileInfo);
},

//
Expand All @@ -470,6 +470,27 @@ var Parser = function Parser(context, imports, fileInfo) {
return new(tree.Variable)("@" + curly[1], index, fileInfo);
}
},
//
// A Property accessor, such as `$color`, in
//
// background-color: $color
//
property: function () {
var name, index = parserInput.i;

if (parserInput.currentChar() === '$' && (name = parserInput.$re(/^\$[\w-]+/))) {
return new(tree.Property)(name, index, fileInfo);
}
},

// A property entity useing the protective {} e.g. @{prop}
propertyCurly: function () {
var curly, index = parserInput.i;

if (parserInput.currentChar() === '$' && (curly = parserInput.$re(/^\$\{([\w-]+)\}/))) {
return new(tree.Property)("$" + curly[1], index, fileInfo);
}
},

//
// A Hexadecimal color
Expand Down Expand Up @@ -706,7 +727,7 @@ var Parser = function Parser(context, imports, fileInfo) {
.push({ variadic: true });
break;
}
arg = entities.variable() || entities.literal() || entities.keyword();
arg = entities.variable() || entities.property() || entities.literal() || entities.keyword();
}

if (!arg) {
Expand All @@ -729,7 +750,7 @@ var Parser = function Parser(context, imports, fileInfo) {
val = arg;
}

if (val && val instanceof tree.Variable) {
if (val && (val instanceof tree.Variable || val instanceof tree.Property)) {
if (parserInput.$char(':')) {
if (expressions.length > 0) {
if (isSemiColonSeparated) {
Expand Down Expand Up @@ -875,7 +896,7 @@ var Parser = function Parser(context, imports, fileInfo) {
var entities = this.entities;

return this.comment() || entities.literal() || entities.variable() || entities.url() ||
entities.call() || entities.keyword() || entities.javascript();
entities.property() || entities.call() || entities.keyword() || entities.javascript();
},

//
Expand Down Expand Up @@ -1143,7 +1164,8 @@ var Parser = function Parser(context, imports, fileInfo) {

// prefer to try to parse first if its a variable or we are compressing
// but always fallback on the other one
var tryValueFirst = !tryAnonymous && (context.compress || isVariable);
// For property accessors, always evaluate
var tryValueFirst = !tryAnonymous; //&& (context.compress || isVariable)

if (tryValueFirst) {
value = this.value();
Expand Down Expand Up @@ -1177,7 +1199,7 @@ var Parser = function Parser(context, imports, fileInfo) {
}
},
anonymousValue: function () {
var match = parserInput.$re(/^([^@+\/'"*`(;{}-]*);/);
var match = parserInput.$re(/^([^@\$+\/'"*`(;{}-]*);/);
if (match) {
return new(tree.Anonymous)(match[1]);
}
Expand Down Expand Up @@ -1650,13 +1672,13 @@ var Parser = function Parser(context, imports, fileInfo) {
operand: function () {
var entities = this.entities, negate;

if (parserInput.peek(/^-[@\(]/)) {
if (parserInput.peek(/^-[@\$\(]/)) {
negate = parserInput.$char('-');
}

var o = this.sub() || entities.dimension() ||
entities.color() || entities.variable() ||
entities.call();
entities.property() || entities.call();

if (negate) {
o.parensInOp = true;
Expand Down Expand Up @@ -1727,7 +1749,7 @@ var Parser = function Parser(context, imports, fileInfo) {

match(/^(\*?)/);
while (true) {
if (!match(/^((?:[\w-]+)|(?:@\{[\w-]+\}))/)) {
if (!match(/^((?:[\w-]+)|(?:[@\$]\{[\w-]+\}))/)) {
break;
}
}
Expand All @@ -1743,10 +1765,11 @@ var Parser = function Parser(context, imports, fileInfo) {
}
for (k = 0; k < name.length; k++) {
s = name[k];
name[k] = (s.charAt(0) !== '@') ?
name[k] = (s.charAt(0) !== '@' && s.charAt(0) !== '$') ?
new(tree.Keyword)(s) :
new(tree.Variable)('@' + s.slice(2, -1),
index[k], fileInfo);
(s.charAt(0) === '@' ?
new(tree.Variable)('@' + s.slice(2, -1), index[k], fileInfo) :
new(tree.Property)('$' + s.slice(2, -1), index[k], fileInfo));
}
return name;
}
Expand Down
1 change: 1 addition & 0 deletions lib/less/tree/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tree.Dimension = require('./dimension');
tree.Unit = require('./unit');
tree.Keyword = require('./keyword');
tree.Variable = require('./variable');
tree.Property = require('./property');
tree.Ruleset = require('./ruleset');
tree.Element = require('./element');
tree.Attribute = require('./attribute');
Expand Down
69 changes: 69 additions & 0 deletions lib/less/tree/property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
var Node = require("./node"),
Rule = require("./rule");

var Property = function (name, index, currentFileInfo) {
this.name = name;
this.index = index;
this.currentFileInfo = currentFileInfo || {};
};
Property.prototype = new Node();
Property.prototype.type = "Property";
Property.prototype.eval = function (context) {
var property, name = this.name;
// Not sure if there's a shorter reference, but require seemed to delete prototype of Rule (different context?)
var mergeRules = context.pluginManager.less.visitors.ToCSSVisitor.prototype._mergeRules;

if (this.evaluating) {
throw { type: 'Name',
message: "Recursive property reference for " + name,
filename: this.currentFileInfo.filename,
index: this.index };
}

this.evaluating = true;

property = this.find(context.frames, function (frame) {

var v, vArr = frame.property(name);
if (vArr) {
for (var i = 0; i < vArr.length; i++) {
v = vArr[i];

vArr[i] = new Rule (v.name,
v.value,
v.important,
v.merge,
v.index,
v.currentFileInfo,
v.inline,
v.variable
);
}
mergeRules(vArr);

v = vArr[vArr.length - 1];
if (v.important) {
var importantScope = context.importantScope[context.importantScope.length - 1];
importantScope.important = v.important;
}
return v.value.eval(context);
}
});
if (property) {
this.evaluating = false;
return property;
} else {
throw { type: 'Name',
message: "Property " + name + " is undefined",
filename: this.currentFileInfo.filename,
index: this.index };
}
};
Property.prototype.find = function (obj, fun) {
for (var i = 0, r; i < obj.length; i++) {
r = fun.call(obj, obj[i]);
if (r) { return r; }
}
return null;
};
module.exports = Property;
12 changes: 9 additions & 3 deletions lib/less/tree/quoted.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var Node = require("./node"),
JsEvalNode = require("./js-eval-node"),
Variable = require("./variable");
Variable = require("./variable"),
Property = require("./property");

var Quoted = function (str, content, escaped, index, currentFileInfo) {
this.escaped = (escaped == null) ? true : escaped;
Expand Down Expand Up @@ -28,10 +29,14 @@ Quoted.prototype.eval = function (context) {
var javascriptReplacement = function (_, exp) {
return String(that.evaluateJavaScript(exp, context));
};
var interpolationReplacement = function (_, name) {
var variableReplacement = function (_, name) {
var v = new Variable('@' + name, that.index, that.currentFileInfo).eval(context, true);
return (v instanceof Quoted) ? v.value : v.toCSS();
};
var propertyReplacement = function (_, name) {
var v = new Property('$' + name, that.index, that.currentFileInfo).eval(context, true);
return (v instanceof Quoted) ? v.value : v.toCSS();
};
function iterativeReplace(value, regexp, replacementFnc) {
var evaluatedValue = value;
do {
Expand All @@ -41,7 +46,8 @@ Quoted.prototype.eval = function (context) {
return evaluatedValue;
}
value = iterativeReplace(value, /`([^`]+)`/g, javascriptReplacement);
value = iterativeReplace(value, /@\{([\w-]+)\}/g, interpolationReplacement);
value = iterativeReplace(value, /@\{([\w-]+)\}/g, variableReplacement);
value = iterativeReplace(value, /\$\{([\w-]+)\}/g, propertyReplacement);
return new Quoted(this.quote + value + this.quote, value, this.escaped, this.index, this.currentFileInfo);
};
Quoted.prototype.compare = function (other) {
Expand Down
26 changes: 25 additions & 1 deletion lib/less/tree/ruleset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ var Node = require("./node"),
contexts = require("../contexts"),
globalFunctionRegistry = require("../functions/function-registry"),
defaultFunc = require("../functions/default"),
getDebugInfo = require("./debug-info");
getDebugInfo = require("./debug-info"),
Keyword = require("./keyword");

var Ruleset = function (selectors, rules, strictImports) {
this.selectors = selectors;
Expand Down Expand Up @@ -227,6 +228,7 @@ Ruleset.prototype.matchCondition = function (args, context) {
Ruleset.prototype.resetCache = function () {
this._rulesets = null;
this._variables = null;
this._properties = null;
this._lookups = {};
};
Ruleset.prototype.variables = function () {
Expand All @@ -251,9 +253,31 @@ Ruleset.prototype.variables = function () {
}
return this._variables;
};
Ruleset.prototype.properties = function () {
if (!this._properties) {
this._properties = !this.rules ? {} : this.rules.reduce(function (hash, r) {
if (r instanceof Rule && r.variable !== true) {
var name = (r.name.length === 1) && (r.name[0] instanceof Keyword) ?
r.name[0].value : r.name;
// Properties don't overwrite as they can merge
if (!hash['$' + name]) {
hash['$' + name] = [ r ];
}
else {
hash['$' + name].push(r);
}
}
return hash;
}, {});
}
return this._properties;
};
Ruleset.prototype.variable = function (name) {
return this.variables()[name];
};
Ruleset.prototype.property = function (name) {
return this.properties()[name];
};
Ruleset.prototype.rulesets = function () {
if (!this.rules) { return []; }

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-jasmine": "^0.8.2",
"grunt-contrib-jasmine": "^0.9.2",
"grunt-contrib-jshint": "^0.11.0",
"grunt-contrib-uglify": "^0.8.0",
"grunt-jscs": "^1.6.0",
Expand Down
4 changes: 2 additions & 2 deletions test/css/colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
#yelow #short {
color: #fea;
color: #ffeeaa;
}
#yelow #long {
color: #ffeeaa;
Expand All @@ -11,7 +11,7 @@
color: #1affeeaa;
}
#blue #short {
color: #00f;
color: #0000ff;
}
#blue #long {
color: #0000ff;
Expand Down
2 changes: 1 addition & 1 deletion test/css/comments.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
/* */
/* */
#div {
color: #A33;
color: #aa3333;
}
/* } */
/*by block */
Expand Down
8 changes: 4 additions & 4 deletions test/css/css.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ div#id {
}
a:hover,
a:link {
color: #999;
color: #999999;
}
p,
p:first-child {
Expand All @@ -53,7 +53,7 @@ p + h1 {
font-size: 2.2em;
}
#shorthands {
border: 1px solid #000;
border: 1px solid #000000;
font: 12px/16px Arial;
font: 100%/16px Arial;
margin: 1px 0;
Expand All @@ -69,7 +69,7 @@ p + h1 {
.misc {
-moz-border-radius: 2px;
display: -moz-inline-stack;
width: .1em;
width: 0.1em;
background-color: #009998;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
margin: ;
Expand All @@ -81,7 +81,7 @@ p + h1 {
}
#important {
color: red !important;
width: 100%!important;
width: 100% !important;
height: 20px ! important;
}
@font-face {
Expand Down
4 changes: 2 additions & 2 deletions test/css/extend-nest.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
.sidebar2 .box,
.type1 .sidebar3 .box,
.type2.sidebar4 .box {
background: #FFF;
border: 1px solid #000;
background: #ffffff;
border: 1px solid #000000;
margin: 10px 0;
}
.sidebar2 {
Expand Down
4 changes: 2 additions & 2 deletions test/css/extend-selector.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.error,
.badError {
border: 1px #f00;
background: #fdd;
border: 1px #ff0000;
background: #ffdddd;
}
.error.intrusion,
.badError.intrusion {
Expand Down
4 changes: 2 additions & 2 deletions test/css/extend.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.error,
.badError {
border: 1px #f00;
background: #fdd;
border: 1px #ff0000;
background: #ffdddd;
}
.error.intrusion,
.badError.intrusion {
Expand Down
Loading