Support for css variables

[alexanderbnelson]

Curious if it's possible to create support for CSS variables. One of the more obvious use-cases for Satori is of course dynamically generating favicons and OG images. Being able to access colour theme variables defined in a globals.css would open up a lot of possibilities for theming.

[pm0u]

We have a tailwind theme that due to mode switching (outside of tailwind implementation) uses CSS variables for all values. Without css var support, we are effectively unable to use tailwind at all.

[kalnode]

A potential messy, not-ideal workaround is to resign to having some crucial CSS variables' raw values live in a global JSON object. For your app's regular operation, you'd bind these values (on mount) to your relevant theme CSS variables. For your Satori ogimages, you'd import that global object and pass the raw values into the template styles. If one day Satori supports CSS variables in this context, then you'd probably want to remove this workaround.

[shuding]

Satori doesn't get rendered in the browser with other global CSS rules, it's a scoped system.

One workaround is to implement this but require the variables to be provided to Satori on the top level. But the benefit is too small (for example the Tailwind case won't work).