CSS strategies for PureScript apps

[ketch]

I’m a fan of the styled-components/emotion type of workflow, and am looking for something comparable.

I’ve found purescript-css and see it can output styling inline on the element, or to a file.
I don’t think the inlining all styles is a route I want to take, which leaves file output. It’d be great if someone could point towards an example project using this setup, specifically about how to consume the generated CSS file, deal with things like file version hashing, etc.

I’ve also come across purescript-styled-components, but not certain of it’s stability/usability levels just yet.

How do people usually go about handling styling for mid/large sized apps?

Thanks in advance!

[garyb]

How do people usually go about handling styling for mid/large sized apps?

It’s probably not the answer you’re looking for, but we just have the CSS separate and use the BEM model for naming and such.

purescript-css leaves a bit to be desired (partially my fault, since there’s a backlog of improvements that I’m accepting fairly slowly) so I’m not sure how great an experience you’d have with it compared with maintaining CSS separately anyway. It certainly doesn’t really offer much that is actually advantageous in terms of type safety and the like in its current form.

[paulyoung]

I haven’t worked on any of my CSS packages in a couple of months but I’m hoping to get back to some of it soon.

These are somewhat experimental but may be of interest to you anyway:

(Halogen) component styling: https://github.com/paulyoung/purescript-styled-components/blob/83d0e4f34c33375ebb78c1e0d32e34e734a7e1ff/examples/buttons/src/Example/Button.purs

Theme-based design systems: https://github.com/paulyoung/purescript-styled-system/blob/8cbdd35967bd2e12b00d028ca191837396f3b3e9/examples/purescript-styled-components/src/Example/Box.purs

CSS using row types: https://github.com/paulyoung/purescript-style/blob/9643b39b86fee771777e45d22f323433bad8ead0/test/Main.purs