Skip to content
New issue

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

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

Already on GitHub? Sign in 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants