Container queries support

[gokulsgr]

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

[jonmumm]

Any known workarounds to be able to use container queries in stitches at all?

[wbobeirne]

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.