fix(issue#4356): parenthesis in media query (#4427)

* Fix issue #4356 issue with parenthesis in media query.
* Add tests for issue #4356.

Co-authored-by: Matthew Dean <matthew-dean@users.noreply.github.com>

Author: puckowski

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

@@ -1891,6 +1891,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                             spacing = true;
                         }
                     } else if (parserInput.$char('(')) {
+                        let closed = false;
                         p = this.property();
                         parserInput.save();
                         if (!p && syntaxOptions.queryInParens && parserInput.$re(/^[0-9a-z-]*\s*([<>]=|<=|>=|[<>]|=)/)) {
@@ -1904,9 +1905,20 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                             }
                         } else {
                             parserInput.restore();
+                            parserInput.save();
                             e = this.value();
+                            if (e && parserInput.$char(')')) {
+                                closed = true;
+                                parserInput.forget();
+                            } else {
+                                parserInput.restore();
+                                e = this.mediaFeature(syntaxOptions);
+                            }
+                        }
+                        if (!closed && parserInput.$char(')')) {
+                            closed = true;
                         }
-                        if (parserInput.$char(')')) {
+                        if (closed) {
                             if (p && !e) {
                                 nodes.push(new (tree.Paren)(new (tree.QueryInParens)(p.op, p.lvalue, p.rvalue, rangeP ? rangeP.op : null, rangeP ? rangeP.rvalue : null, p._index)));
                                 e = p;

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

@@ -274,3 +274,8 @@
     color: red;
   }
 }
+@media ((color) and (hover)), all {
+  body {
+    background: green;
+  }
+}

packages/test-data/tests-unit/media/media.less

@@ -302,3 +302,9 @@
         color: red;
     }
 }
+
+@media ((color) and (hover)), all {
+  body {
+    background: green;
+  }
+}