-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for @container #2876
Comments
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/ |
It has landed in Chrome 105, and will be in de next Safari, for other browsers there is a polyfill available. |
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 |
Stylis has implemented these! We'll need to update to the latest to use. thysultan/stylis#304 |
I've upgraded Stylis here: #2929 . A new version of Emotion will be released in a moment. |
After updating to latest I still can't get this to work. Anyone else experiencing the same? |
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. |
Repro on codesandbox as requested: https://codesandbox.io/s/conainerqueryinemotions-oq7srn 😊 |
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>
);
} |
@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. |
Hi, not sure why this issue has been closed as container queries are fully supported |
@avshyz-gs Emotion supports them. |
Then you add this:
It transforms into:
Which is incorrect, it should be something like:
The text was updated successfully, but these errors were encountered: