Skip to content

Conversation

puckowski
Copy link
Contributor

What:

Fixes issue #4252 where a container query created via mixin would reuse previously evaluated variables leading to incorrect CSS output.

Why:

This should be valid Less.js:

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

Currently we produce:

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

Checklist:

  • Documentation
  • Added/updated unit tests
  • Code complete

New Less.js output is:

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

* Fixes a container query mixin reference issue and adds container query
  test.
* Refactor and clean up fix for issue less#4252.
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Nov 30, 2024
@puckowski
Copy link
Contributor Author

I submitted a few PRs. I expect rebase(s) will be needed in order to merge all of them, so let me know when a rebase is needed.

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Dec 7, 2024
@matthew-dean matthew-dean merged commit e4fdbe3 into less:master Dec 7, 2024
6 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lgtm This PR has been approved by a maintainer size:M This PR changes 30-99 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants