This method should only be used on the server.

This advanced API is pretty similar to renderToMarkup as it also helps to render the renderer on the server.
Instead of returning a single string of HTML containing style elements, it returns a list of so called style sheets. Each style sheet contains everything we need to be able to render actual style elements on the server.

Check the renderToMarkup output in order to correctly create custom

elements that can be rehydrated.


rendererRendererThe renderer providing the styles which are rendered to a list of sheet data.


(Object[]): List of style sheet objects


Every style sheet object has the following shape:

type Sheet = {
type: string,
css: string,
media?: string,
support?: boolean,
rehydration: number,


import { renderToSheetList } from 'fela-dom'
import { createRenderer } from 'fela'
const renderer = createRenderer()
const rule = ({ fontSize }) => ({
fontSize: fontSize,
color: 'blue',
'@supports (display: flex)': {
color: 'green',
'@media (min-width: 300px)': {
color: 'red',
renderer.renderRule(rule, { fontSize: '12px' })
const sheetList = renderToSheetList(renderer)

The following list would be returned:

"type": "STATIC",
"css": "html,body{box-sizing:border-box;margin:0}",
"rehydration": 4
"type": "RULE",
"css": ".a{font-size:12px}.b{color:blue}",
"rehydration": 4
"type": "RULE",
"css": ".c{color:green}",
"support": true,
"rehydration": 4
"type": "RULE",
"css": ".d{color:red}",
"media": "(min-width: 300px)",
"rehydration": 4