Allow variable interpolation in attributes everywhere that is sensible

Author: lukeapage

lib/less/parser.js

@@ -1140,10 +1140,12 @@ less.Parser = function Parser(env) {
 
                 if (! $('[')) return;
 
-                key = expect(/^(?:[_A-Za-z0-9-\*]*\|)?(?:[_A-Za-z0-9-]|\\.)+/);
+                if (!(key = $(this.entities.variableCurly))) {
+                    key = expect(/^(?:[_A-Za-z0-9-\*]*\|)?(?:[_A-Za-z0-9-]|\\.)+/);
+                }
 
                 if ((op = $(/^[|~*$^]?=/))) {
-                    val = $(this.entities.quoted) || $(/^[\w-]+/);
+                    val = $(this.entities.quoted) || $(/^[\w-]+/) || $(this.entities.variableCurly);
                 }
 
                 expect(']');

lib/less/tree/element.js

@@ -45,11 +45,11 @@ tree.Attribute.prototype = {
         this.value = visitor.visit(this.value);
     },
     eval: function (env) {
-        return new(tree.Attribute)(this.key,
+        return new(tree.Attribute)(this.key.eval ? this.key.eval(env) : this.key,
             this.op, (this.value && this.value.eval) ? this.value.eval(env) : this.value);
     },
     toCSS: function (env) {
-        var value = this.key;
+        var value = this.key.toCSS ? this.key.toCSS(env) : this.key;
 
         if (this.op) {
             value += this.op;

test/css/selectors.css

@@ -133,6 +133,9 @@ p a span {
 [prop*="val3"],
 [|prop~="val3"],
 [*|prop$="val3"],
-[ns|prop^="val3"] {
+[ns|prop^="val3"],
+[3^="val3"],
+[3=3],
+[3] {
   attributes: yes;
 }

test/less/selectors.less

@@ -135,6 +135,9 @@ a {
 [prop*="val@{num}"],
 [|prop~="val@{num}"],
 [*|prop$="val@{num}"],
-[ns|prop^="val@{num}"] {
+[ns|prop^="val@{num}"],
+[@{num}^="val@{num}"],
+[@{num}=@{num}],
+[@{num}] {
   attributes: yes;
 }