Using container queries as breakpoints

[nassimbenkirane]

Would there be an easy way to use container queries instead of media queries for native breakpoints ?

Currently we can do :

  conditions: {
    containerSm: '@container (min-width: token(breakpoints.sm))',
    containerMd: '@container (min-width: token(breakpoints.md))',
    containerLg: '@container (min-width: token(breakpoints.lg))'
  },

and then we can use it in the code :

<styled.div
  bg={{
       base: 'red',
       _containerSm: 'blue'
  }}>
  FooBar
</styled.div>

It would be even better if we could highjack the default break points to use container queries, so we would be able to use all the nice shortcuts like :

// using shortcuts like mdToLg
<styled.div bg={{base: 'red', mdToLg: 'blue'}}>
    FooBar
</styled.div>
// using array syntax
<styled.div bg={['red', 'blue']}>FooBar</styled.div>

Is this already possible ? Would it make sense to make it possible ?

[nassimbenkirane]

An example using container queries to use existing breakpoints in a specific div
https://play.panda-css.com/mRnyYmjCvx

[anubra266]

@nassimbenkirane I don't really understand your question. What exactly are you trying to do