styled-jsx

styled-jsx is a CSS in JS tool that is supported by default in Next.js. Next.js manages server side hydration of styles as well as transpilation, so to work with Vite we'll need to do this manually.

Example:

To use Vike with styled-jsx:

  1. Install:
npm install styled-jsx
  1. Add styled-jsx to vite.config.js:
// vite.config.js
 
import react from '@vitejs/plugin-react'
import vike from 'vike/plugin'
 
export default {
  plugins: [react({ babel: { plugins: ['styled-jsx/babel'] } }), vike()]
}
  1. Collect the styles during server-side rendering and attach to the DOM as <head> tags.
// /renderer/+onRenderHtml.js
 
export { onRenderHtml }
 
import React from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import { escapeInject, dangerouslySkipEscape } from 'vike/server'
import { PageLayout } from './PageLayout'
import { createStyleRegistry, StyleRegistry } from 'styled-jsx'
 
const registry = createStyleRegistry()
 
async function onRenderHtml(pageContext) {
  // flush styles to support the possibility of concurrent rendering
  registry.flush()
 
  const { Page } = pageContext
  // include the styleregistry in the app render to inject the styles
  const viewHtml = dangerouslySkipEscape(
    renderToString(
      <StyleRegistry registry={registry}>
        <PageLayout>
          <Page />
        </PageLayout>
      </StyleRegistry>
    )
  )
 
  // extract the styles to add as head tags to the server markup
  const headTags = renderToStaticMarkup(<>{registry.styles()}</>)
 
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        ${dangerouslySkipEscape(headTags)}
      </head>
      <body>
        <div id="page-view">${viewHtml}</div>
      </body>
    </html>`
}