less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
16.99k stars 3.41k forks source link

In version 4.2.0, a container query in a mixin that uses a LESS variable doesn't use the right value when the mixin is called multiple times with different values #4252

Open caseytissue opened 7 months ago

caseytissue commented 7 months ago

To reproduce:

.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);

Current behavior:

In version 4.2.0, the above LESS compiles into 3 container queries that look like:

.wrapper {
  container-name: wrapper;
  container-type: size;
}
@container wrapper (height < 100) {
  a {
    max-height: 100;
  }
}
@container wrapper (height < 100) {
  a {
    max-height: 200;
  }
}
@container wrapper (height < 100) {
  a {
    max-height: 300;
  }
}

(notice how each container query uses the height passed from the first mixin call, not the subsequent mixin calls)

Expected behavior:

In version 4.2.0, the above LESS should compile into CSS with 3 container queries that look like:

.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;
  }
}

(notice how each container query uses a different height)

LESS version 4.1.3 outputs this expected CSS.

Environment information:

Additional Notes: This example is a very simplified example that I made for the purpose of showing the bug (so it doesn't make very much sense). I made a LESS-to-CSS playground example: https://lesscss.org/less-preview/#eyJjb2RlIjoiLndyYXBwZXIge1xuICBjb250YWluZXItbmFtZTogd3JhcHBlcjtcbiAgY29udGFpbmVyLXR5cGU6IHNpemU7XG59XG5cbi5teV9taXhpbihAaGVpZ2h0KSB7XG4gIEBjb250YWluZXIgd3JhcHBlciAoaGVpZ2h0IDwgQGhlaWdodCkge1xuICAgIGEge1xuICAgICAgbWF4LWhlaWdodDogQGhlaWdodDtcbiAgICB9XG4gIH1cbn1cblxuLm15X21peGluKDEwMCk7XG4ubXlfbWl4aW4oMjAwKTtcbi5teV9taXhpbigzMDApOyIsImFjdGl2ZVZlcnNpb24iOiI0LjIuMCIsIm1hdGgiOiJwYXJlbnMtZGl2aXNpb24iLCJzdHJpY3RVbml0cyI6ZmFsc2V9

In the playground, if you switch the version between 4.2.0 and 4.1.3, you can see that the compiled CSS is correct in 4.1.3 and wrong in 4.2.0.