CSS Container Queries (@content): Stylus adds "&&" where we should get "and"

[Scriptura]

Hello, I noticed a bug with CSS Container Queries (@content): Stylus adds "&&" where we should get "and".

To reproduce:

@container grid-auto (min-width: 25em) and (max-width: 50em)
  .grid-auto
    --n: 2

Current behavior:

@container grid-auto (min-width: 25em) && (max-width: 50em) {
  .grid-auto {
    --n: 2;
  }
}

Expected behavior:

@container grid-auto (min-width: 25em) and (max-width: 50em) {
  .grid-auto {
    --n: 2;
  }
}

The bug reproduced on a pen: @container: bug with stylus lang

• stylus version : 0.59.0 (and 0.54.8 for the CodePen online)
• nodejs version : 17.4.0

Thank you for your attention.

[Scriptura]

In the meantime I've found a much more elegant (and much less restrictive) workaround than @css{}:

@container grid-auto (25em > width > 50em)
  .grid-auto
    --n: 2

No support for Boolean comparisons with Container Queries under Stylus, so workaround with Media Query Range. Browser support is mediocre for these funds but ultimately better than container queries.

On the other hand, Stylus variables remain prohibited.

[thecodechef]

You could just wrap it in @css literal block like so:

@css {
  @container grid-auto (min-width: 25em) and (max-width: 50em)
    .grid-auto
      --n: 2
}

this works for me.

@Scriptura

[Scriptura]

@thecodechef Are you sure you read my previous comment?

I've found a much more elegant (and much less restrictive) workaround than @css{}

This wasn't about finding a workaround - since I found two that I've posted here - this is about reporting a bug. The workarounds that I have published are to make people wait while waiting for a patch.

Thanks anyway.

[thecodechef]

I missed the @css{} part sorry