CSS-in-JS theming for Lexical?

[andymerskin]

Hey there! Our project uses a CSS-in-JS system called Twin.Macro exclusively, which allows us to use a custom Tailwind configuration with all the goodness of Styled Components + some other features, for those who prefer that flavor of CSS. This means we don't really have access to our generated Tailwind utilities straight in className attributes due to the nature of Twin.Macro.

This also makes it difficult for us to use our utility classes for theming Lexical since its editor themes appear to only accept className strings for each element, and as far as I can tell, Twin doesn't provide a way to generate a className string from its own helper, example:

tw`text-h1 font-bold` // outputs a `style` object which could be passed to a `style` prop for instance

For reference, I've asked the folks over at Twin.Macro for advice on how they recommend styling/theming 3rd party libraries as well.

Twin.Macro aside, more generally, how have people approached theming Lexical in projects where CSS-in-JS is more enforced?