Open caseytissue opened 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:
less
nodejs
operating system
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.
To reproduce:
Current behavior:
In version 4.2.0, the above LESS compiles into 3 container queries that look like:
(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:
(notice how each container query uses a different height)
LESS version 4.1.3 outputs this expected CSS.
Environment information:
less
version: 4.2.0nodejs
version: unsure (but I don't think nodejs version matters)operating system
: Mac (but I don't think OS matters)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.