Support for @container

[stijnvanderlaan]

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

[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/

[stijnvanderlaan]

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

[lachlanjc]

CSS Container Queries are now in 64% of global browser usage, including the latest Chrome, Chrome Android, Edge, Safari, & Safari iOS, so they’re no longer experimental! Here’s the stylis issue to track: thysultan/stylis#303

[lachlanjc]

Stylis has implemented these! We'll need to update to the latest to use. thysultan/stylis#304

[Andarist]

I've upgraded Stylis here: #2929 . A new version of Emotion will be released in a moment.

[tarjep]

After updating to latest I still can't get this to work. Anyone else experiencing the same?

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[tarjep]

Repro on codesandbox as requested: https://codesandbox.io/s/conainerqueryinemotions-oq7srn 😊

[Twiggeh]

@tarjep

Please check container-query targeting self

You cannot target the container with a container query as far as I am aware, so I would say that Emotion is working as expected here.

To resolve your issue you need to create a parent container like this: CodeSandbox

import "./styles.css";
import styled from "@emotion/styled";

const HotPinkContainer = styled.div`
  container-type: inline-size;
`;

const StyledHotPink = styled.div`
  padding: 8px;
  border: 1px solid #000;
  @container (min-width: 300px) {
    background-color: hotpink;
  }
`;

const HotPink = ({ children }) => {
  return (
    <HotPinkContainer>
      <StyledHotPink>{children}</StyledHotPink>
    </HotPinkContainer>
  );
};

export default function App() {
  return (
    <div className="App">
      <HotPink>
        kjfashdlfashdölfjasdölkfjasöldkjfaölsdkhfölasdjfölafjdsöl
      </HotPink>
    </div>
  );
}

[wallstead]

@tarjep I'm pretty sure your example is actually working as of today when I'm testing it (March 6th). I opened the code sandbox and when the min-width of the container is >= 200px the box becomes HotPink.

[avshyz-gs]

Hi, not sure why this issue has been closed as container queries are fully supported
https://caniuse.com/css-container-queries

[rpiosi]

@avshyz-gs Emotion supports them.