Container queries support #1143

Activity

1. jonmumm commented on Jun 3, 2023

   

   jonmumm

   on Jun 3, 2023

   More actions

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

   👍React with 👍1Reacted by José Maria Pereira
2. wbobeirne commented on Jun 19, 2023

   

   wbobeirne

   on Jun 19, 2023

   More actions

   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.

   👍React with 👍2Reacted by Filip Malinowski and David Figueroa