Adding attribute selector with variable concatenation feature

Author: chencaize

packages/less/src/less/parser/parser.js

@@ -1448,8 +1448,18 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 //
                 let cif;
 
-                if (!(key = entities.variableCurly())) {
-                    key = expect(/^(?:[_A-Za-z0-9-*]*\|)?(?:[_A-Za-z0-9-]|\\.)+/);
+                let keys;
+                while((key = entities.variableCurly()) || (key = parserInput.$re(/^(?:[_A-Za-z0-9-*]*\|)?(?:[_A-Za-z0-9-]|\\.)+/))){
+                    if(keys){
+                        keys.push(key);
+                    }else{
+                        keys = [key];
+                    }
+                    key = null
+                }
+
+                if(keys.length == 0){
+                    error('unexpected token');
                 }
 
                 op = parserInput.$re(/^[|~*$^]?=/);
@@ -1462,7 +1472,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
 
                 expectChar(']');
 
-                return new(tree.Attribute)(key, op, val, cif);
+                return new(tree.Attribute)(keys, op, val, cif);
             },
 
             //

packages/less/src/less/tree/attribute.js

@@ -11,8 +11,12 @@ Attribute.prototype = Object.assign(new Node(), {
     type: 'Attribute',
 
     eval(context) {
+        let key = [];
+        for(let i=0;i<this.key.length;++i){
+            key.push(this.key[i].eval?this.key[i].eval(context):this.key[i]);
+        }
         return new Attribute(
-            this.key.eval ? this.key.eval(context) : this.key,
+            key,
             this.op,
             (this.value && this.value.eval) ? this.value.eval(context) : this.value,
             this.cif
@@ -24,7 +28,10 @@ Attribute.prototype = Object.assign(new Node(), {
     },
 
     toCSS(context) {
-        let value = this.key.toCSS ? this.key.toCSS(context) : this.key;
+        let value = '';
+        for(let i=0;i<this.key.length;++i){
+            value += this.key[i].toCSS ? this.key[i].toCSS(context) : this.key[i];
+        }
 
         if (this.op) {
             value += this.op;

packages/less/src/less/visitors/extend-visitor.js

@@ -375,9 +375,17 @@ class ProcessExtendsVisitor {
             return elementValue1 === elementValue2;
         }
         if (elementValue1 instanceof tree.Attribute) {
-            if (elementValue1.op !== elementValue2.op || elementValue1.key !== elementValue2.key) {
+            if (elementValue1.op !== elementValue2.op) {
                 return false;
             }
+            if (elementValue1.key.length !== elementValue2.key.length) {
+                return false;
+            }
+            for(let i=0;i<elementValue1.key.length;++i){
+                if(elementValue1.key[i] !== elementValue2.key[i]){
+                    return false;
+                }
+            }
             if (!elementValue1.value || !elementValue2.value) {
                 if (elementValue1.value || elementValue2.value) {
                     return false;

packages/test-data/css/_main/selectors.css

@@ -143,6 +143,11 @@ p a span {
 [p] {
   attributes: yes;
 }
+[p-attr^="val3"],
+[p-attr=3],
+[p-attr] {
+  attributes: yes;
+}
 /**
  * https://www.w3.org/TR/selectors-4/#attribute-case
  */

packages/test-data/less/_main/selectors.less

@@ -146,6 +146,11 @@ a {
 [@{prop}] {
   attributes: yes;
 }
+[@{prop}-attr^="val@{num}"],
+[@{prop}-attr=@{num}],
+[@{prop}-attr] {
+  attributes: yes;
+}
 
 /**
  * https://www.w3.org/TR/selectors-4/#attribute-case