Container queries support about stitches HOT 2 OPEN

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

from stitches.

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.

from stitches.