fix: parse CSS data-type tokens in attr() type() notation (#4371)

packages/less/lib/less/parser/parser.js

@@ -421,6 +421,23 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     }
                 },
 
+                //
+                // A CSS data type name, used by the `type()` notation of `attr()`
+                // and as a value component in custom properties, such as:
+                //
+                //     <number>     <length-percentage>     <custom-ident>
+                //
+                // It is emitted verbatim so the surrounding CSS function is
+                // preserved instead of throwing a parse error.
+                //
+                dataType: function () {
+                    const index = parserInput.i;
+                    const k = parserInput.$re(/^<[\w-]+>/);
+                    if (k) {
+                        return new(tree.Anonymous)(k, index + currentIndex);
+                    }
+                },
+
                 //
                 // A function call
                 //
@@ -1288,8 +1305,8 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 const entities = this.entities;
 
                 return this.comment() || entities.literal() || entities.variable() || entities.url() ||
-                    entities.property() || entities.call() || entities.keyword() || this.mixin.call(true) ||
-                    entities.javascript();
+                    entities.dataType() || entities.property() || entities.call() || entities.keyword() ||
+                    this.mixin.call(true) || entities.javascript();
             },
 
             //

packages/test-data/tests-unit/css-attr/css-attr.css

@@ -0,0 +1,12 @@
+img {
+  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
+}
+.fallback {
+  width: attr(data-width type(<length>), 0px);
+}
+.string {
+  content: attr(data-text type(<string>));
+}
+.bare {
+  --my-syntax: <length-percentage>;
+}

packages/test-data/tests-unit/css-attr/css-attr.less

@@ -0,0 +1,13 @@
+// CSS attr() with the type() notation and bare data-type tokens (#4371)
+img {
+  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
+}
+.fallback {
+  width: attr(data-width type(<length>), 0px);
+}
+.string {
+  content: attr(data-text type(<string>));
+}
+.bare {
+  --my-syntax: <length-percentage>;
+}