CSS strategies for PureScript apps

#1

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!

3 Likes
#2

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. :smile:

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.

1 Like
#3

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

4 Likes
#4

Has this landscape changed? I’ve started messing with Purescript some days ago and I’m struggling to find a “standard” way of changing an element’s style via Purescript without using external libraries (I’d like to animate an element by changing it’s left and top style properties or through CSS’s transform). The way that looks easier is by defining a foreign function that gives access to the style property of an element object. Another alternative would be via the setAttribute function but this seems too much of a stretch.

It seems that Halogen has some helpers for dealing with CSS and purescript-react too, by the props function. If they are something like the CSS-in-JS approach, I’m interested. But for now I’d like to stick to the standard packages.

#5

I’m currently thinking about a system for css which isn’t based on inline css styles but on generating css based on given types. Something like sass but in a typed manner maybe also possible to do that in dhall. What do you think about that? With that you can do stuff like sass and be sure that you’ll always get valid output.

#6

@m3tti https://github.com/paulyoung/purescript-style can render stylesheets as well as inline CSS.

1 Like
#7

See https://github.com/paulyoung/purescript-style/blob/62b09a52778fa8923f8be376dc4b23ff2c168d69/test/Main.purs#L82

1 Like
#8

Quick heads up: there was also an issue opened on Real World Halogen which discusses CSS strategies for Halogen apps and relates to this discussion.

3 Likes