fix(issue:4252) container query mixin reference

* Fixes a container query mixin reference issue and adds container query test.
puckowski · Nov 29, 2024 · 69f2010 · 69f2010
1 parent 773e157
commit 69f2010
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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);