fix(issue#4343) add color operands (#4346)

* Add missing color operand support to resolve issue #4343.

Author: puckowski

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

@@ -2231,6 +2231,17 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 }
                 parserInput.restore();
             },
+            colorOperand: function () {
+                parserInput.save();
+                         
+                // hsl or rgb or lch operand
+                const match = parserInput.$re(/^[lchrgbs]\s+/);
+                if (match) {
+                    return new tree.Keyword(match[0]);
+                }
+
+                parserInput.restore();
+            },
             multiplication: function () {
                 let m;
                 let a;
@@ -2495,7 +2506,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                         entities.color() || entities.variable() ||
                         entities.property() || entities.call() ||
                         entities.quoted(true) || entities.colorKeyword() ||
-                        entities.mixinLookup();
+                        this.colorOperand() || entities.mixinLookup();
 
                 if (negate) {
                     o.parensInOp = true;

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

@@ -102,3 +102,39 @@
   --semi-transparent-dark-background: #001e00ee;
   --semi-transparent-dark-background-2: #001e00;
 }
+.color-oklch-sub {
+  background: oklch(from #0000FF calc(l - 0.1) c h);
+}
+.color-oklch-add {
+  background: oklch(from #0000FF calc(l + 0.1) c h);
+}
+.color-oklch-mult {
+  background: oklch(from #0000FF calc(l * 0.1) c h);
+}
+.color-oklch-div {
+  background: oklch(from #0000FF calc(l / 2) c h);
+}
+.color-hsl-sub {
+  background: hsl(from #0000FF calc(h - 1) s l);
+}
+.color-hsl-add {
+  background: hsl(from #0000FF calc(h + 1) s l);
+}
+.color-hsl-mult {
+  background: hsl(from #0000FF calc(h * 1) s l);
+}
+.color-hsl-div {
+  background: hsl(from #0000FF calc(h / 2) s l);
+}
+.color-rgb-sub {
+  background: rgb(from #0000FF calc(r - 1) g b);
+}
+.color-rgb-add {
+  background: rgb(from #0000FF calc(r + 1) g b);
+}
+.color-rgb-mult {
+  background: rgb(from #0000FF calc(r * 1) g b);
+}
+.color-rgb-div {
+  background: rgb(from #0000FF calc(r / 2) g b);
+}

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

@@ -114,3 +114,51 @@
   --semi-transparent-dark-background: #001e00ee;
   --semi-transparent-dark-background-2: rgba(0, 30, 0, 238); // invalid opacity will be capped
 }
+
+.color-oklch-sub {
+  background: oklch(from #0000FF calc(l - 0.1) c h); 
+}
+
+.color-oklch-add {
+  background: oklch(from #0000FF calc(l + 0.1) c h);
+}
+
+.color-oklch-mult {
+  background: oklch(from #0000FF calc(l * 0.1) c h);
+}
+
+.color-oklch-div {
+  background: oklch(from #0000FF calc(l / 2) c h);
+}
+
+.color-hsl-sub {
+  background: hsl(from #0000FF calc(h - 1) s l);
+}
+
+.color-hsl-add {
+  background: hsl(from #0000FF calc(h + 1) s l);
+}
+
+.color-hsl-mult {
+  background: hsl(from #0000FF calc(h * 1) s l);
+}
+
+.color-hsl-div {
+  background: hsl(from #0000FF calc(h / 2) s l);
+}
+
+.color-rgb-sub {
+  background: rgb(from #0000FF calc(r - 1) g b);
+}
+
+.color-rgb-add {
+  background: rgb(from #0000FF calc(r + 1) g b);
+}
+
+.color-rgb-mult {
+  background: rgb(from #0000FF calc(r * 1) g b);
+}
+
+.color-rgb-div {
+  background: rgb(from #0000FF calc(r / 2) g b);
+}