Prototyping responsiveness with Primer React is impossible due to the lack of docs and/or presets

[maximedegreve]

Description

All the docs below talk about the sx prop however internally we have communicated to avoid this:

• https://primer.style/product/getting-started/react/
• https://primer.style/product/getting-started/react/core-concepts/
• https://primer.style/product/getting-started/react/theming/

This leaves us with CSS modules but those don't support breakpoint vars out the box. On dotcom and storybook we have solved this by introducing a postcss-preset however this is not documented and exported and therefore can't be used. This makes the adoption of responsiveness in Primer prototypes almost impossible as it requires a lot of reading and fiddling to mimic this functionality:

• https://github.com/primer/react/blob/main/packages/postcss-preset-primer/src/index.js

Steps to reproduce

1. Create a React app (with Vite)
2. Follow the instructions in the getting started docs
3. Try to make anything responsiveness using @media vars.

Perhaps we could do some user testing too to see how easy it is for someone internally to adopt Primer outside dotcom.

Version

All

Browser

No response

[lesliecdubs]

Related: https://github.com/primer/react-template/pull/228 (note: media queries aren't working)

[joshblack]

I think @jonrohan and @langermank were looking to update some of this content over in: https://github.com/github/primer-docs/pull/452, not sure if they are tackling responsiveness directly but it would be covering the shift to CSS Modules if I understand right.

[vibishraj001]

like a more formal version

[hellojanehere]

hey @joshblack @jonrohan @langermank ! how is this looking at the moment?

[jonrohan]

I haven't done anything here more than what we had in that linked PR https://github.com/github/primer-docs/pull/452