Support container queries

[TokugawaTakeshi]

The browsers begins to support the query container feature. Below image is actual for September of 2022.

🌎 caniuse.com

Currently, if we write

.ToDosListPage

  font-size initial

  @container (min-width: 700px)

    background aliceblue

we'll get

.ToDosListPage {
  font-size: initial;
}

@container (min-width: 700px) {
  background: #f0f8ff;
}

I dare to hope you will not ignore this very waited feature.

[iChenLei]

MDN's @container example work as expected.

[TokugawaTakeshi]

Thank you for the answer.
You right, the pattern when @container going as parent works correctly.
However, could @container works as @media when it going not at root?

For example:

.MainLayout

  display grid


  @media screen and (min-width: 500px)

    grid-template-columns auto minmax(0, 1fr)


  @media screen and (max-width: 499px)

    grid-template-columns 0 minmax(0, 1fr)

will be compiled to:

.MainLayout {
  display: grid;
}
@media screen and (min-width: 500px) {
  .MainLayout {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media screen and (max-width: 499px) {
  .MainLayout {
    grid-template-columns: 0 minmax(0, 1fr);
  }
}

while

.MainLayout

  display grid


  @container (min-width: 500px)

    grid-template-columns auto minmax(0, 1fr)

to:

.MainLayout {
  display: grid;
}
@container (min-width: 500px) {
  grid-template-columns: auto minmax(0, 1fr);
}

Would you please to make Stylus output

.MainLayout {
  display: grid;
}
@container (min-width: 500px) {
  .MainLayout {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

instead?

[iChenLei]

OK, make sense.

[TokugawaTakeshi]

Thank you for the processing of my (and other query container users') request.