Integration#

CSS in JS#

Use the getStyleCollector option to specify an SSR/SSG style collector. Currently only supports styled-components.

import { ViteReactSSG } from 'vite-react-ssg'
import getStyledComponentsCollector from 'vite-react-ssg/style-collectors/styled-components'
import { routes } from './App.js'
import './index.css'

export const createRoot = ViteReactSSG(
  { routes },
  () => { },
  { getStyleCollector: getStyledComponentsCollector }
)

You can provide your own by looking at the implementation of any of the existing collectors.

Critical CSS#

Vite SSG has built-in support for generating Critical CSS inlined in the HTML via the critters package. Install it with:

npm i -D critters

Critical CSS generation will automatically be enabled for you.

To configure critters, pass its options into ssgOptions.crittersOptions in vite.config.ts:

// vite.config.ts
export default defineConfig({
  ssgOptions: {
    crittersOptions: {
      // E.g., change the preload strategy
      preload: 'media',
      // Other options: https://github.com/GoogleChromeLabs/critters#usage
    },
  },
})