From 69f2010467f6eaf5e476f9c6d1af0a2362670d4b Mon Sep 17 00:00:00 2001
From: Daniel Puckowski <puckowski.d@gmail.com>
Date: Fri, 29 Nov 2024 12:58:33 -0500
Subject: [PATCH] fix(issue:4252) container query mixin reference

* Fixes a container query mixin reference issue and adds container query
  test.
---
 .../less/src/less/tree/query-in-parens.js     | 40 ++++++++++++++++++-
 packages/test-data/css/_main/container.css    | 19 +++++++++
 packages/test-data/less/_main/container.less  | 17 ++++++++
 3 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/packages/less/src/less/tree/query-in-parens.js b/packages/less/src/less/tree/query-in-parens.js
index 64727c084..892063a51 100644
--- a/packages/less/src/less/tree/query-in-parens.js
+++ b/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,39 @@ QueryInParens.prototype = Object.assign(new Node(), {
 
     eval(context) {
         this.lvalue = this.lvalue.eval(context);
-        this.mvalue = this.mvalue.eval(context);
+        
+        let hasVariable = false;
+        let rule;
+
+        for (let i = 0; (rule = context.frames[i]); i++) {
+            if (rule.type === 'Ruleset') {
+                rule.rules.filter(function (r) {
+                    if ((r instanceof Declaration) && r.variable) {
+                        hasVariable = true;
+                    }
+                });
+                
+                if (hasVariable) {
+                    break;
+                }
+            }
+        }
+
+        if (!this.mvalueCopy) {
+            this.mvalueCopy = copy(this.mvalue);
+        }
+
+        if (hasVariable) {
+            this.mvalue = this.mvalueCopy;
+        }
+        
+        if (hasVariable) {
+            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 +67,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 + ' ');
diff --git a/packages/test-data/css/_main/container.css b/packages/test-data/css/_main/container.css
index 0c155507a..f6f31639e 100644
--- a/packages/test-data/css/_main/container.css
+++ b/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;
+  }
+}
diff --git a/packages/test-data/less/_main/container.less b/packages/test-data/less/_main/container.less
index b44c7ecea..c8f8a7807 100644
--- a/packages/test-data/less/_main/container.less
+++ b/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);