better support for attributes. Allow interpolation inside attributes. Fixes less#1229

Author: lukeapage

lib/less/parser.js

@@ -1140,16 +1140,15 @@ less.Parser = function Parser(env) {
 
                 if (! $('[')) return;
 
-                if (key = $(/^(?:[_A-Za-z0-9-]|\\.)+/) || $(this.entities.quoted)) {
-                    if ((op = $(/^[|~*$^]?=/)) &&
-                        (val = $(this.entities.quoted) || $(/^[\w-]+/))) {
-                        attr = [key, op, val.toCSS ? val.toCSS() : val].join('');
-                    } else { attr = key }
+                key = expect(/^(?:[_A-Za-z0-9-\*]*\|)?(?:[_A-Za-z0-9-]|\\.)+/);
+
+                if ((op = $(/^[|~*$^]?=/))) {
+                    val = $(this.entities.quoted) || $(/^[\w-]+/);
                 }
 
-                if (! $(']')) return;
+                expect(']');
 
-                if (attr) { return "[" + attr + "]" }
+                return new(tree.Attribute)(key, op, val);
             },
 
             //

lib/less/tree/element.js

@@ -34,6 +34,32 @@ tree.Element.prototype = {
     }
 };
 
+tree.Attribute = function (key, op, value) {
+    this.key = key;
+    this.op = op;
+    this.value = value;
+};
+tree.Attribute.prototype = {
+    type: "Attribute",
+    accept: function (visitor) {
+        this.value = visitor.visit(this.value);
+    },
+    eval: function (env) {
+        return new(tree.Attribute)(this.key,
+            this.op, (this.value && this.value.eval) ? this.value.eval(env) : this.value);
+    },
+    toCSS: function (env) {
+        var value = this.key;
+
+        if (this.op) {
+            value += this.op;
+            value += (this.value.toCSS ? this.value.toCSS(env) : this.value);
+        }
+
+        return '[' + value + ']';
+    }
+};
+
 tree.Combinator = function (value) {
     if (value === ' ') {
         this.value = ' ';

test/css/selectors.css

@@ -128,3 +128,11 @@ p a span {
 .test:nth-child(odd):not(:nth-child(3)) {
   color: #ff0000;
 }
+[prop],
+[prop="value3"],
+[prop*="val3"],
+[|prop~="val3"],
+[*|prop$="val3"],
+[ns|prop^="val3"] {
+  attributes: yes;
+}

test/less/selectors.less

@@ -129,4 +129,12 @@ a {
   &:nth-child(odd):not(:nth-child(3)) {
     color: #ff0000;
   }
+}
+[prop],
+[prop="value@{num}"],
+[prop*="val@{num}"],
+[|prop~="val@{num}"],
+[*|prop$="val@{num}"],
+[ns|prop^="val@{num}"] {
+  attributes: yes;
 }