Make getCssString work with custom theme

Is your feature request related to a problem? Please describe. I am trying to server-side render a custom theme, but it seems like getCssString only renders the default css vars.

Describe the solution you’d like Stitches could pick up on custom themes created just like it does with calls to the css function, and render that theme out as well. Then I could just make sure that I attach the correct classname to the body at SSR.

[jonathantneal]

To get a theme created with createTheme() to render into getCssText then it needs to be referenced somehow.

import { createStitches } from 'https://cdn.skypack.dev/@stitches/core'

let { getCssText, createTheme } = createStitches({
	theme: {
		colors: {
			blue100: '#0000ff',
		},
	},
})

let altTheme = createTheme({
	colors: {
		blue100: '#3333ff',
	},
})

getCssText() // will not contain altTheme

// either of these
altTheme.toString()
altTheme.className

getCssText() // will now contain the CSS for altTheme

It works this way to prevent unused CSS from being compiled.

[AndrewPrifer]

Oh I completely missed your answer @jonathantneal, thanks a ton!

@peduarte I would never have expected this to be the solution to what I see as quite a normal use case, the behavior here doesn’t really seem “intentional” haha. Although my problem specifically is solved, do you think this use case could be better supported, through documentation, and (ideally, I think) a more explicit API?