How to add css-in-js library when using a Vike extension

[edmelly-pg]

I want to make use of vike-react, but I also wish to set up styled-components. If vike-react is handling the onRenderHtml() hook (here), is there any way of collecting styles (with, e.g., ServerStyleSheet) and injecting them, or do I have to switch to manual integration?

Thanks!

[brillout]

The plan is to have vike-react provide hooks enabling such integration. We can then also implement vike-react-styled-components.

Let me know if you'd be up for a PR; the vike-react source code is quite small & digestible. If not then you'll have to wait a little (maybe like 1-2 weeks) until I'm done with I'm the high priorities I'm currently working on.

[edmelly-pg]

Thanks for your quick response. I managed to add styled-components to vike-react locally, but:

• It's hard-coded (i.e. import and logic added to onRenderHtml). I am struggling to see how to make this work as a new hook/how to allow for a generic CSS-in-JS approach to cover multiple libraries.

• Only when config.stream is false. If stream is true, then renderToStream from react-streaming/server is used instead of renderToString, so I think implementing the streaming rendering API with sheet.interleaveWithNodeStream() needs to happen there.

[brillout]

I think, but correct me if I'm wrong, a solution would be that vike-react creates two new custom hooks: on{Before,After}RenderHtml(). Then the user-land and/or vike-style-components would use these two hooks to implement the integration.

[Pixelatex]

@brillout has this fix landed yet? Currently attempting to get styled-comp working with vike-react