Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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 this issue Dec 8, 2023 · 1 comment
Labels

Comments

@caseytissue
Copy link

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 version: 4.2.0
  • nodejs 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.

@caseytissue caseytissue added the bug label Dec 8, 2023
@puckowski
Copy link
Contributor

I am working on this issue. I have a working solution, but I need to improve it more and add tests,

puckowski added a commit to puckowski/less.js that referenced this issue Nov 30, 2024
* Refactor and clean up fix for issue less#4252.
matthew-dean pushed a commit that referenced this issue Dec 7, 2024
* 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.
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants