Styled Components and Waku #1211

dvd900 · 2025-02-04T22:18:48Z

dvd900
Feb 4, 2025

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 · 2025-02-05T03:47:50Z

dai-shi
Feb 5, 2025
Maintainer

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.

0 replies

tylersayshi · 2025-02-07T04:49:06Z

tylersayshi
Feb 7, 2025
Collaborator

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! :)

0 replies

rmarscher · 2025-02-07T05:55:21Z

rmarscher
Feb 7, 2025
Collaborator

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 })
    );
}

2 replies

rmarscher Feb 7, 2025
Collaborator

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

nihgwu Oct 29, 2025

I tried this, doesn't work as SC is trying to access createContext but not available in this env

nihgwu · 2025-10-26T20:01:20Z

nihgwu
Oct 26, 2025

Stumbled on this as well, anyone solved this? Next.js offers useServerInsertedHTML https://nextjs.org/docs/app/guides/css-in-js#configuring-css-in-js-in-app
I tried @rmarscher 's idea, but I'm using createPages, seems I have to hack waku's source code, and I did, but facing other issues [vite] Internal server error: o.createContext is not a function

0 replies

nihgwu · 2025-10-29T12:43:53Z

nihgwu
Oct 29, 2025

Made it work without hacking waku
btw @dai-shi why is this topic closed?

'use client'

import { useState } from 'react'

import isPropValid from '@emotion/is-prop-valid'
import {
  IStyleSheetManager,
  ServerStyleSheet,
  StyleSheetManager,
} from 'styled-components'

const shouldForwardProp = (propName: string, target: any) => {
  if (typeof target === 'string') {
    return isPropValid(propName)
  }
  return true
}

export const StyleSheetProvider = (props: IStyleSheetManager) => {
  // TODO: we also only do it for build otherwise we will see hydration mismatch in dev
  // the condition won't change in real world
  /* eslint-disable react-hooks/rules-of-hooks */
  if (import.meta.env.SSR && import.meta.env.PROD) {
    const [sheet] = useState(() => new ServerStyleSheet())

    return (
      <>
        <StyleSheetManager
          sheet={sheet.instance}
          shouldForwardProp={shouldForwardProp}
          {...props}
        />
        <StyleCollector sheet={sheet} />
      </>
    )
  }

  return <StyleSheetManager shouldForwardProp={shouldForwardProp} {...props} />
}

const StyleCollector = ({ sheet }: { sheet: ServerStyleSheet }) => {
  const styles = sheet.getStyleElement()
  sheet.instance.clearTag()
  return styles
}

import React from 'react'

import { StyleSheetProvider } from '../providers/StyleSheetProvider'

export const RootLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <html lang='en'>
      <head />
      <body>
        <StyleSheetProvider>{children}</StyleSheetProvider>
      </body>
    </html>
  )
}

1 reply

nihgwu Dec 14, 2025

JFYI, the above solution doesn't work properly

dai-shi · 2025-10-29T13:43:55Z

dai-shi
Oct 29, 2025
Maintainer

btw @dai-shi why is this topic closed?

#1211 (comment) Basically, I think traditional css-in-js doesn't work. But, the reason it's closed is probably stale discussions.

1 reply

nihgwu Oct 29, 2025

We are moving away from SC, but it will take time, so for now we still need to support it
can we expose similar thing as Next.js does

dai-shi · 2025-12-08T09:48:37Z

dai-shi
Dec 8, 2025
Maintainer

@nihgwu Could you please explain the very high level overview for the solution?

14 replies

dai-shi Dec 15, 2025
Maintainer

@nihgwu I just updated #1845 and it should work for PRD (SSG) too.
Could you check the behavior if that's expected? I only wrote one test case in the spec. Let me know if we could add more.

I agree that it would be nice to have a way to intercept/extend something in "ssr" environment. But that's going to be a far bigger issue and not only for css-in-js. I'll take time for that. Meanwhile, globalThis is the hacky workaround.

dai-shi Dec 15, 2025
Maintainer

I'd suggest to use the callback pattern so the solution is not coupled with SC

Do you mean like useServerInsertedHTML? That could be library agnostic, which is nice for a reusable library.
I'm trying to use interleaveWithNodeStream directly and because we have no ways to patch renderHtml in SSR environment, I did a lot of hacks for now.

Does your approach work without touching waku?

nihgwu Dec 15, 2025

No, I don't use useServerInsertedHTML now, this is my current solution

nihgwu Dec 15, 2025

I'm trying to use interleaveWithNodeStream directly and because we have no ways to patch renderHtml in SSR environment, I did a lot of hacks for now.
I guess if you use my approach (I've posted source code of almost everything) you don't have those issues
and using interleaveWithNodeStream is not good as you need to convert to Node steam and convert back, which is not efficient and only works for SC, last piece I didn't share is stream utils

dai-shi Dec 15, 2025
Maintainer

If you have a solution without touching waku, please open a new PR to #1845. (Or, I can merge it first so that you can target main. I would like to keep the e2e test.)

nihgwu · 2025-12-15T13:09:11Z

nihgwu
Dec 15, 2025

I'm preparing the PR from my approach without hacking SSR entry

1 reply

nihgwu Dec 15, 2025

#1847

nihgwu · 2025-12-16T09:25:12Z

nihgwu
Dec 16, 2025

@dai-shi What's your vision to support it from Waku side? Either expose insertServerHTML or a low level API to inject SSR streaming, like via adapter's second param transformStream, it could be tricky because of invoking SSR from RSC env if it's done incorrectly from product side

8 replies

dai-shi Dec 17, 2025
Maintainer

If it looks generally good, I can merge #1853 actually and you can take time working on it.

hi-ogawa Dec 17, 2025
Collaborator

I think viteRsc.loadModule is mentioned at some point, but this could be integrated in this way #1854. This is just as a reference, so please feel free to close.

nihgwu Dec 17, 2025

@hi-ogawa hah, that's exactly how I did it in. my own project to avoid the duplication #1211 (reply in thread)

nihgwu Dec 17, 2025

btw @hi-ogawa I can't use import.meta.viteRsc.loadModule in handleBuild, I read source code of vite-rsc, it will be replaced to a static string in build phase, but it refers to nothing, the imported module is undefined, not sure if it's expected, I saw the resolveId to resolve it to actual module, but it doesn't work for me, didn't dig into it, maybe you can just run waku build of your branch

maybe it works for you because you lazy load the ssr module, I loaded it right in handleBuild

dai-shi Dec 17, 2025
Maintainer

I think viteRsc.loadModule is mentioned at some point, but this could be integrated in this way #1854. This is just as a reference, so please feel free to close.

Oh, I forgot about that. I'll think about that approach too. Thanks for the hint.

I can't use import.meta.viteRsc.loadModule in handleBuild

Ah, that's unfortunate. Let's look for a workaround. I'll try writing a vite plugin.

dai-shi · 2025-12-19T04:23:03Z

dai-shi
Dec 19, 2025
Maintainer

Hope #1858 works.

0 replies

Uh oh!

Styled Components and Waku #1211

Uh oh!

Replies: 10 comments · 27 replies

Uh oh!

dai-shi Feb 5, 2025 Maintainer

Uh oh!

tylersayshi Feb 7, 2025 Collaborator

Uh oh!

rmarscher Feb 7, 2025 Collaborator

Uh oh!

rmarscher Feb 7, 2025 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dai-shi Oct 29, 2025 Maintainer

Uh oh!

Uh oh!

dai-shi Dec 8, 2025 Maintainer

Uh oh!

dai-shi Dec 15, 2025 Maintainer

Uh oh!

Uh oh!

dai-shi Dec 15, 2025 Maintainer

Uh oh!

Uh oh!

Uh oh!

dai-shi Dec 15, 2025 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dai-shi Dec 17, 2025 Maintainer

Uh oh!

hi-ogawa Dec 17, 2025 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dai-shi Dec 17, 2025 Maintainer

Uh oh!

dai-shi Dec 19, 2025 Maintainer

Replies: 10 comments 27 replies

dai-shi
Feb 5, 2025
Maintainer

tylersayshi
Feb 7, 2025
Collaborator

rmarscher
Feb 7, 2025
Collaborator

rmarscher Feb 7, 2025
Collaborator

dai-shi
Oct 29, 2025
Maintainer

dai-shi
Dec 8, 2025
Maintainer

dai-shi Dec 15, 2025
Maintainer

dai-shi Dec 15, 2025
Maintainer

dai-shi Dec 15, 2025
Maintainer

dai-shi Dec 17, 2025
Maintainer

hi-ogawa Dec 17, 2025
Collaborator

dai-shi Dec 17, 2025
Maintainer

dai-shi
Dec 19, 2025
Maintainer