Styling solutions ReasonReact? (as of Aug ’18)

reasonreact
#1

Hi folks! What’s the latest on styling solutions for ReasonReact? Do binding for some css-in-js solutions exist? Do they have a decent editor support (styled-components plugins are hard to beat but who knows)? Or, if someone wants a great editor support, with Emmet and hints and checks, at that point she’s better off with something more traditional like less/sass?

#2

I’d go with bs-css, loving it.
Youre just writing reason so no special plugin needed.
I’d hope in the future there are more options for different backends (styled-components, emotion etc).
Ideally this would be a drop in replacement.
Check out bs-css-core too…not hard to implement your own if you wanted to and throw in styled-components as long as it supports a similar interface

#3

Thanks! I’ve also found bs-typed-glamor, seems legit too.

That said, I was all for using emotion instead of styled-components for my current project, because I’ve reasoned that for complicated cases, generating JS objects is easier than using string interpolation. And it may well be the case, but most of the time strings are easier to read, and editor support for styled-components is awesome. It has frigging Emmet! That kinda comfort is hard to let go :grinning:

#4

That looks nice!
I tend to agree but i have faith in this ecosystem to pull through with a whole new set of unknown creature comforts :smile:
Eg strongly typed ‘everything’ such as measurement units with polymorphic variants: `px(25.5), `rem(2.)

#5

I agree, typing units would be pretty nice in some cases.

#6

I personally like bs-fela

#7

In my select package, I provide classes for people to use since I just have straight css/scss for my personal stuff.

When I use styles, I don’t use anything other than the ReactDOMRe.Style.make and ReactDOMRe.Style.combine.

#8

Well, I’m considering using something like less (both less and sass are fine, it’s just that less syntax is more concise in some cases) for my project, but I guess it depends on the kind of project: like whether or not I’m OK with an hierarchy of utility classes that have nothing to do with my hierarchy of components. The upside of that approach is that it practically guarantees you a style guide (and you can use tools like Atomic Docs). But refactoring would require more discipline, I guess.

As for Style.make, it has about the same cons as the rest of css-in-reason solutions, namely, the syntax is not as readable and the IDEs won’t help you as much. Not that it’s a showstopper, just one more point to overthink :slight_smile:

#9

Since none of you mentioned https://github.com/astrada/ppx_bs_css

It’s a terrific project that needs a lot more attentions

#10

Yeah, that looks closest to styled-components. But that means it would require equally terrific editor plugins to shine. Which… might happen one day if ReasonML itself becomes really popular.

#11

Do you know if there any good sample projects that use these technologies (ppx_bs_css and bs-css)?

#12

I don’t know @hoichi, how difficult is it to add editor support for a custom ppx?
Might be simpler than we know… (I hope it could be done sooner than one day when ReasonML becomes really popular :slight_smile: )

#13

There is an example setup here that use esy for compiling ppx_bs_css https://github.com/jchavarri/ppx_bs_css_example

Sketch.sh used to use ppx_bs_css but for the sake of contributors (installing esy and all that crazy stuff) I removed it.

You really just need a css syntax highlighter. The code is typed check at compile time, you can’t have invalid code.

#14

I have zero XP with editor plugins, but I do remember how they couldn’t highlight anything in string templates or in Vue source files in JetBrains IDEs because the infrastructure for having one syntax in the middle of another syntax just didn’t exist.

So I’m not really sure it’s an easy problem.

Besides, you don’t just need a syntax highlighter. Ideally, you need code completion (Emmet!), linting, and seeing your errors as you type is so much nicer.

Not that you absolutely have to have it all to be productive. I mean, Elm developers claim you don’t need source maps to debug Elm code, so a lot of things probably not as crucial as we think they are. But they still kinda matter for adoption.

#15

I’ve been using bs-css and its awesome! I love that its typed and its just functions.