search

garronej / tss-react

✨ Dynamic CSS-in-TS solution, based on Emotion
https://tss-react.dev
MIT License
608 stars 37 forks source link

nextjs head order on revalidated pages #20

Closed janus-reith closed 3 years ago

janus-reith commented 3 years ago

On material ui v4, there was a critical bug when used with nexjs and revalidated pages: https://github.com/mui-org/material-ui/issues/25307

It would lead to page layouts breaking in random ways due to orders of tags in head changing. Fixing it was out of scope for MUI v4, and as @oliviertassinari pointed out there, the same issue was unlikely to appear in emotion since that uses prop cascading.

I'm wondering now if these issues are likely to come back when using tss-react: What I was currently trying to solve with some of the the other issues I opened, is basically the makeStyles-defined classes having more priority than the MUI ones, although following the emotion cascading logic, it would be the opposite (Outside some component using the tss version of makeStyles first, then inside/after the MUI component defining its own styles)

So far, making the makeStyles-classes have more priority only worked by using two emotion caches, and essentialy relying on the order of elements in HEAD if I get things correctly

I will prepare a sandbox like the one in the issue above to see if I can observe the same behavior.

garronej commented 3 years ago

Thank you very much for the efforts you are putting into tss-react! I am sorry I wasn't able to work on the multiple issues you discovered.
I don't think it's relevant here but I mention it anyway, there is a working setup with mui v4 and nextjs here that you can run by doing: 

git clone https://github.com/garronej/tss-react && cd tss-react
yarn
yarn build
yarn start_muiV4
janus-reith commented 3 years ago

Thank you very much for the efforts you are putting into tss-react!

Sure, thank you for actually making this! I'm happy to help, let me know if I can support in some way.