The best way to handle style sheets in Miso application or component library

[functora]

I would like to discuss the best way to handle style sheets in Miso application or component library. I think styles abstractions (whatever it is) should be:

• Composable with library/application Haskell code.
• Composable with each other.
• More or less typed (optional).

At the moment I see couple of options, but they all are kinda bad:

1. Using the standard external CSS file. The problems are:

• I don't see the right way to export it as a part of the library (these are no css-sources in cabal, unlike js-sources)
• CSS class names are just Text which should be the same across Haskell (class_) and CSS codebase. Hard to maintain and refactor. Prone to errors.

2. Using inline <style> tags next to every small component. I think kinda bad idea, and I'm not sure how to scope styles locally to component this way. Not sure it is possible or easy (not an expert in CSS).
3. Using style_ attribute functions and different variants of compositions of it. It's a bit better, but:

• Can not define styles for pseudo-elements (::hover, ::before, ::after etc)
• Can not define advanced CSS animations like @keyframes my-animation-name

4. Doing some smart CSS code generation from some Haskell style sheet source (.hs files), exporting class names (functions, utilities) used in Miso lib/app codebase, but having additional Setup step for the app/lib which doing corresponding CSS file code generation somehow.

• Kinda sounds hard to do (maybe not, idk).

If I did miss some documentation or cool advanced CSS examples in Miso, please let me know. Best regards!