CSS Tools

In principle, you can use Vike with any CSS/styling tool. For example:

Feel free to reach out if you run into an issue for integrating a tool.

Collect styles upon SSR

If you use a CSS-in-JS tool, then you need to make sure to avoid FOUC (flash of unstyled content).

You avoid FOUC by collecting the page's styles upon SSR and add the collected styles to the HTML. (So that the browser loads the styles early.)

With vike-{react,vue,solid}

You cannot (yet) collect and inject styles when using vike-react/vike-vue/vike-solid. Adding support for this is work-in-progress, see #141 - CSS-in-JS with SSR.

Without vike-{react,vue,solid}

You can collect and inject the page's styles inside your onRenderHtml() hook.

React example:

// /renderer/+onRenderHtml.jsx
 
import ReactDOMServer from 'react-dom/server'
import React from 'react'
import { escapeInject, dangerouslySkipEscape } from 'vike/server'
import { CssCollector } from 'some-css-in-js-tool'
 
export { onRenderHtml }
 
async function onRenderHtml(pageContext) {
  const { Page } = pageContext
  const page = <Page />
 
  const collect = new CssCollector()
 
  const pageHtml = ReactDOMServer.renderToString(collect(page))
 
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <style>${dangerouslySkipEscape(collect.getCSS())}</style>
      </head>
      <body>
        <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`
}

Eamples: