Fix duplicated global style blocks

[andy-hook]

The upgrade to styled-components v5 was causing duplicate global style blocks to be rendered in the head. They seemed to originate from <Main/> in aragon/ui. For now I think it's best to pin it to v4.

@delfipolito this should resolve the issue we discussed with HMR reloads.

[sohkai]

Looks good; cc @bpierre perhaps we should set the peer dependency range on aragonUI to be ^4 instead of >= 4?

[sohkai]

Perhaps we can still leave this with a ^ for the 4.x range

[bpierre]

Looks good; cc @bpierre perhaps we should set the peer dependency range on aragonUI to be ^4 instead of >= 4?

We could do that yes, but I suspect it will break apps already already using aragonUI with styled-components v5.

I would like to understand the issue as aragonUI should work with v5. @andy-hook could you tell me how to reproduce? It seems to work fine with the devbox or the client. 🤔

Edit: in any case, it’s probably a good idea to use >= 4 < 6 in case v6 breaks compatibility.

[andy-hook]

Looks good; cc @bpierre perhaps we should set the peer dependency range on aragonUI to be ^4 instead of >= 4?

We could do that yes, but I suspect it will break apps already already using aragonUI with styled-components v5.

I would like to understand the issue as aragonUI should work with v5. @andy-hook could you tell me how to reproduce? It seems to work fine with the devbox or the client. 🤔

Edit: in any case, it’s probably a good idea to use >= 4 < 6 in case v6 breaks compatibility.

I think I've identified the issue with fresh eyes today. See styled-components/styled-components#3008

Edit: You can repro in the client by wrapping the root in <React.StrictMode> with v5 styled-components

Knowing this, a better fix in this project might be to nest <React.StrictMode/> inside of <Main/> and keep v5 for the performance improvements. What do you think?