How are you guys able to build this lib properly with styled components and SSR?
vongohren opened this issue · 5 comments
Is your feature request related to a problem? Please describe.
Im trying to build a library like this, with styled components! Loaded with SSR.
Describe the solution you'd like
And insight to how to build something like this, in this repo: https://github.com/vongohren/fouc-example.
Describe alternatives you've considered
Its not relative, but looking at emotion-js and styled components as a base.
Hey @vongohren 👋
What solution are you using for SSR? Using styled-components with SSR is pretty simple on NextJS. Only additional setup is required: https://github.com/zeit/next.js/blob/canary/examples/with-orbit-components/pages/_document.js
@vepor Cool cool! Yeah that is the solution im trying to do. But I guess the problem is probably the "compilation" build time of the components. Im trying to use you guys as inspiration but not sure how it is done :(
The problem is that the css is not available in the _document.js compilation. There is no stylesheet available. You can see the reproducable example is using the same you pointed out. Then you can see that the styles are empty, and it is happening a FOUC.
So are you guys compiling the components? With webpack or something? Maybe it is loosing the styles in compilation? It is a bit relate to this: styled-components/styled-components#2322
But then I have this simple repo that produces this exactly.
@vepor I see that you guys are not compiling for the browser or node specific, just library target umb? Emotion and styled components are not that far from eachother, do you have any thoughts on the last comment from the maintaner here: emotion-js/emotion#1516
Sorry for later respond @vongohren. We compile our components (or code base) with some presents, respectively env and react (flow also, but that's optional). The umd bundle that is created by webpack is used just for usage in the browser, directly - on orbit.kiwi documentation page.
Even though, I would like to help you with usage of SSR together with styled-components, this problem is not connected to orbit-components directly. If you didn't find solution yet, I would try to create an issue in the styled-components repository directly, with described example and current setup. If you want, we can also discuss this more on our Discord.
@vepor thanks anyway :) I did get an example running here: https://github.com/vongohren/fouc-example
Which is working nicely in our app.
I did throw the question around and together all questions helped me solve this :P
But thanks