At-rule declarations may go missing are or incorrectly merged under certain nesting conditions

[puckowski]

@jpattishall-ebay raised an issue in #4267 (comment) where they noted @media and @container are not properly nesting in some cases.

Currently I see in 4.2.1 Playground I see this:

@media only screen and (min-width: 768px) {
  @container (min-width: 500px) {
    .primary-content {
      font-size: 1rem;
    }
  }
}

results in:

@container only screen and (min-width: 768px) and (min-width: 500px) {
  .primary-content {
    font-size: 1rem;
  }
}

But I see 4.1.3 produced the expected output:

@media only screen and (min-width: 768px) {
  @container (min-width: 500px) {
    .primary-content {
      font-size: 1rem;
    }
  }
}

[puckowski]

I believe I have a fix for this issue, I will try to prepare a PR to this repo by Friday 12/20/24. I need a little more time to test.

[puckowski]

PR #4302 should resolve this issue.

[puckowski]

If anyone needs a workaround for this issue in the short term you may be able to use https://github.com/puckowski/less.js/releases/tag/4.2.1.5

The fork release is Less.js 4.2.1 with fixes for:
#4301
#4252
#3737
#4258
#4264
#4268
#4267
#3777
#4224

Supports @starting-style and @scope at-rules.