Styled Components and Waku

[dvd900]

I like css-in-js, specifically styled-components, but as I look around at my options for leveraging rsc's Next seems to be the only framework supporting turn-key style setup.

It seems as though this project is leaning towards tailwind as the defacto css library, is there intention to support other ways to style waku apps?

Here's some doc's explaining how to set things up: It refers to a cssCollector. IDK I'm confused!
https://styled-components.com/docs/advanced#server-side-rendering
https://vike.dev/css-in-js

[dai-shi]

Supporting css-in-js with RSC sounds challenging. I'm not sure how others are doing it.
Our priority is to support libraries listed in reactwg/server-components#6,
but if anyone wants to give it a shot, please feel free.

[tylersayshi]

Some other ideas that should work with RSC and should give you a close DX to styled-components.

https://panda-css.com/

https://vanilla-extract.style/

If you end up trying any of these, sharing feedback for how it goes, positive or negative would be really helpful! :)

[rmarscher]

The NextJS css-in-js docs page currently says

We're working with the React team on upstream APIs to handle CSS and JavaScript assets with support for React Server Components and streaming architecture.

Maybe React will add APIs to make css-in-js easier with RSC.

I see styled-components offers a streaming API - https://styled-components.com/docs/advanced#streaming-rendering.

Does this work inside the handleRequest part of defineEntries in a src/entries.tsx file?

if (input.type === 'custom') {
    // ...
    const sheet = new ServerStyleSheet();
    return sheet.interleaveWithNodeStream(
        renderHtml(entries, sheet.collectStyles(html), { rscPath, actionResult })
    );
}

[rmarscher]

That probably works if all of the styled-components are in client components. It's not going to work with renderRsc().