Master fix 4252 (#4295)

* fix(issue:4252) container query mixin reference

* Fixes a container query mixin reference issue and adds container query
  test.

* refactor: clean up fix for issue 4252

* Refactor and clean up fix for issue #4252.

Author: puckowski

packages/less/src/less/tree/query-in-parens.js

@@ -1,3 +1,5 @@
+import { copy } from 'copy-anything';
+import Declaration from './declaration';
 import Node from './node';
 
 const QueryInParens = function (op, l, m, op2, r, i) {
@@ -7,6 +9,7 @@ const QueryInParens = function (op, l, m, op2, r, i) {
     this.op2 = op2 ? op2.trim() : null;
     this.rvalue = r;
     this._index = i;
+    this.mvalues = [];
 };
 
 QueryInParens.prototype = Object.assign(new Node(), {
@@ -22,7 +25,38 @@ QueryInParens.prototype = Object.assign(new Node(), {
 
     eval(context) {
         this.lvalue = this.lvalue.eval(context);
-        this.mvalue = this.mvalue.eval(context);
+        
+        let variableDeclaration;
+        let rule;
+
+        for (let i = 0; (rule = context.frames[i]); i++) {
+            if (rule.type === 'Ruleset') {
+                variableDeclaration = rule.rules.find(function (r) {
+                    if ((r instanceof Declaration) && r.variable) {
+                        return true;
+                    }
+
+                    return false;
+                });
+                
+                if (variableDeclaration) {
+                    break;
+                }
+            }
+        }
+
+        if (!this.mvalueCopy) {
+            this.mvalueCopy = copy(this.mvalue);
+        }
+        
+        if (variableDeclaration) {
+            this.mvalue = this.mvalueCopy;
+            this.mvalue = this.mvalue.eval(context);
+            this.mvalues.push(this.mvalue);
+        } else {
+            this.mvalue = this.mvalue.eval(context);
+        }
+
         if (this.rvalue) {
             this.rvalue = this.rvalue.eval(context);
         }
@@ -32,6 +66,9 @@ QueryInParens.prototype = Object.assign(new Node(), {
     genCSS(context, output) {
         this.lvalue.genCSS(context, output);
         output.add(' ' + this.op + ' ');
+        if (this.mvalues.length > 0) {
+            this.mvalue = this.mvalues.shift();
+        }
         this.mvalue.genCSS(context, output);
         if (this.rvalue) {
             output.add(' ' + this.op2 + ' ');

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

@@ -146,3 +146,22 @@
     margin: 0.5em 0 0 0;
   }
 }
+.wrapper {
+  container-name: wrapper;
+  container-type: size;
+}
+@container wrapper (height < 100) {
+  a {
+    max-height: 100;
+  }
+}
+@container wrapper (height < 200) {
+  a {
+    max-height: 200;
+  }
+}
+@container wrapper (height < 300) {
+  a {
+    max-height: 300;
+  }
+}

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

@@ -178,3 +178,20 @@
         }
     } 
 }
+
+.wrapper {
+    container-name: wrapper;
+    container-type: size;
+}
+  
+.my_mixin(@height) {
+    @container wrapper (height < @height) {
+        a {
+            max-height: @height;
+        }
+    }
+}
+  
+.my_mixin(100);
+.my_mixin(200);
+.my_mixin(300);