Responsive style, different behavior between Develop and Production

[alexis-regnaud]

Describe the bug
I have a weird behavior. I use responsive array (Example : <div sx={{ height: ["20px", "50px", "100px"] }} />)
When I am in a development mode all works well, I see the 100px when I am in the large screen. But when I compile in a production mode I see the "20px" in the large screen case. That always happen in the first page loading, when I load for the first time the page, but if I come from another page I see the correct height ("100px").

I have tried to figure out from where provide the problem but I didn't success. The weird thing is some responsive style works (I see the good case), but in the same time any others don't work....

Expected behavior
Seems like at the first app load theme UI responsive not work in a perfect way. I would like success to fix that one :/

Additional context
I use Theme-ui, Gatsby and Nnetlify

[alexis-regnaud]

Not 100% sure but seems like it's related to both useResponsiveValue and useBreakpointIndex function

[alexis-regnaud]

I think its fix by this one : #948
Is the v0.4 stable enough to be used in a production environment ?

[jxnblk]

The RC for v0.4 should be okay for production environments. The biggest potential for breaking changes in that release should only really affect TypeScript users, so be sure to chime in to the TS umbrella issue if you encounter any problems when using the library in TypeScript

[alexis-regnaud]

Ok thanks for your answer !