CSS-in-JS Rendering Hooks

💥 Proposal: Hooks for CSS-in-JS Client and Server Rendering

• Guides / Styling and Layouts → Styling components with CSS-in-JS frameworks

So, the [v2] ☂️ Umbrella issue for v2 docs has the above open TODO (although the issue has been closed); and this is also currently mentioned in the docs as “welcoming PRs”.

I have some experience with the setup patterns for emotion (incl. v11) and styled-components here, and would like to help with this. As far as I can tell from the source, this would require additions to the Lifecycle APIs so that the serverEntry.js and clientEntry.ts files’ rendering functions could be modified. I would need some guidance on creating these hooks.

Anyone want to help me get started?

[exah]

Hey guys,

I found a super hacky way to collect styles for styled-components, and I do not recommend it to anyone, but it works 😃. Most likely, it breaks hydration and forcing react to re-render the whole tree. Sadly, I don’t know how to force the non-production build to check, but honestly, this is much better than FOUC.

I’m voting for public API, which will allow returning your element before passing it to renderToString from react-dom/server.

Hacky way

1. Create component for collecting styles from children:

import React from 'react'
import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'
import { StaticRouter, useLocation } from 'react-router-dom'
import { HelmetProvider } from 'react-helmet-async'
import { Context as DocusaurusContext } from '@docusaurus/core/lib/client/docusaurusContext'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'

function ServerStyle({ from: children }) {
  let style = null

  const location = useLocation()
  const context = useDocusaurusContext()
  const sheet = new ServerStyleSheet()

  try {
    renderToString(
      sheet.collectStyles(
        <HelmetProvider>
          <StaticRouter location={location}>
            <DocusaurusContext.Provider value={context}>
              {children}
            </DocusaurusContext.Provider>
          </StaticRouter>
        </HelmetProvider>,
      ),
    )
    style = sheet.getStyleElement()
  } catch (error) {
    console.error(error)
  } finally {
    sheet.seal()
  }

  return style
}

function ClientStyle() {
  return null
}

export default typeof window === 'undefined' ? ServerStyle : ClientStyle

1. And then render it in your Root:

// /src/theme/Root.js
import React from 'react'

import ServerStyle from './ServerStyle'

function Root({ children }) {
  return (
    <>
      <ServerStyle from={children} />
      {children}
    </>
  )
}

export default Root

UPD: Fixed DocusaurusContext imports UPD (2022-05-06): No longer works for v2.0.0-beta.16+ UPD (2022-06-10): Fixed for v2.0.0-beta.21+ thanks to @EmaSuriano!

[slorber]

@bennodev19 that’s something we want to work on but is not so simple. APIs are forever so we’d rather find a good abstraction for CSS-in-JS integration that will work for all the libs, not just SC. We could copy Gatsby’s abstraction but it’s also a good time to study what has worked well and not so well for Gatsby by studying all its CSS-in-JS plugins a bit.

You’d rather convert to css modules if you cannot wait because I don’t think we should rush on implementation without a careful design.