Can Theme-UI be statically extracted somehow?

[hugomn]

Theme UI is for me by far the best UI library I've used. But one point I'm strongly considering for my recent applications is having a static extract of my CSS, with zero or low run-time.

Is it something the library creators are considering or is there already any approach or similar library doing this? I've recently used treat for reference.

Thanks in advance!

[hasparus]

Hi! Theme UI is built on top of Emotion, and AFAIK it can't be statically extracted.

• JSX pragma transforms sx props into className at runtime.
• Similarly, themes are passed through React context.

@compiled/css-in-js has statically extracted CSS prop. If you knew the theme statically, it would possible to write a TS transform / babel plugin to compile sx prop into css prop and then run @compiled/css-in-js, but this is honestly a big undertaking.

It would look kind of like this: https://github.com/atlassian-labs/compiled-css-in-js/blob/master/packages/ts-transform/src/utils/object-literal-to-css.tsx

[hugomn]

Thanks, @hasparus! That answers everything I need. I guess static generation should be considered in the roadmap for next versions, as it can definitely be a bottleneck for big applications. Thanks a lot!

[uptonking]

Calico seems to be the solution for statically generate css from predefined theme object.
Calico is based on treat and react-treat, inspired by styled-system and theme-ui.
Here is the demo of generating css

[hasparus]

@uptonking Thanks! Calico looks really impressive.