Container queries support
gokulsgr opened this issue · comments
Could you please add support for container queries like we have for media queries?
media: {
bp1: "(min-width: 520px)";
bp2: "(min-width: 900px)";
bp3: "(min-width: 1200px)";
bp4: "(min-width: 1800px)";
motion: "(prefers-reduced-motion)";
hover: "(any-hover: hover)";
dark: "(prefers-color-scheme: dark)";
light: "(prefers-color-scheme: light)";
}
Any known workarounds to be able to use container queries in stitches at all?
You can use container queries like other @
queries by just including it as a key, e.g.
css({
"@supports (display: grid)": {
// styles
},
"@container (min-width: 700px)" {
// styles
}
})
However, one problem I'm seeing is that https://github.com/stitchesjs/stitches/blob/2876c6fe835c4d499e87a8e53a5c586395e40358/packages/core/src/convert/toResolvedMediaQueryRanges.js is trying to manipulate the values, so sometimes you end up with an invalid query. For instance, the following input gets the following output:
css({
'@container (max-width < 200px)': {
color: 'red',
},
})
@container (max-max-width:199.9375px){color:red}
but you can still get usable queries if you choose values that work well with this rewriter. However, it'd be nice if it were updated to account for valid @container
queries.