supporting global styles directly in `otion`

[cusxio]

I'm trying out otion in a gatsby project, and I'm aware that otion currently does not support global styles.

https://github.com/kripod/otion/tree/master/packages/otion#global-styles

However, by not supporting global styles makes using otion kinda awkward, as you need to rely on your build tool, i.e gatsby, to prefix the global styles. So you need to configure those things in two areas.

Please let me know if I'm wrong, and that there's a better way to add global styles!

[kripod]

While otion inlines scoped CSS during SSR for better per-page performance, global CSS should be referenced from a <link> tag, so that they may persist in the cache during page changes. Global styles are suitable for application-wide styling (e.g. normalization and/or reset), while inlining the scoped rules generated by otion accounts for faster page transitions due to the inlined per-page styles.

Thank you for the suggestion! I hope the rationale behind intentionally delegating global CSS to other solutions is a bit clearer now. The goal is maintaining the low bundle footprint while also encouraging performance-focused development patterns.

[cusxio]

Thank you for the reply!

I hope the rationale behind intentionally delegating global CSS to other solutions is a bit clearer now.

Yea it is. I just realized that I was too accustom to the way emotion or styled-components work and that global css can technically be cached indefinitely i.e. Cache-Control: immutable.

The goal is maintaining the low bundle footprint

This is certainly what draws me towards it!

[kripod]

I've added this information to the readme so that it's available for future reference. Thank you for the question again! 🙌