Support for @container

Then you add this:

const Body = styled.div`
  @container (max-width: 300px) {
    display: none;
  }
`

It transforms into:

@container (max-width: 300px){display:none;}

Which is incorrect, it should be something like:

@container (max-width: 300px){.css-w7dhq6{display:none;}}

[stijnvanderlaan]

It has landed in Chrome 105, and will be in de next Safari, for other browsers there is a polyfill available.

[Andarist]

As far as I know, container queries are still an experimental feature. We probably won’t commit to supporting it until it gets included in the spec. This would have to be implemented in the parser that we are using so it should be reported to that project: https://github.com/thysultan/stylis/