Hacker News Reader

Comment by cosmosocean | Hacker News Reader

Hey there, is there a `styled-components` library for Reason?

I'm really considering ReasonML for my app, however I'm not a big fan of the styling in reason react.

Hey, I recommend sticking to bs-css (https://github.com/reasonml-labs/bs-css). Not because I don't think styled-ppx is super cool or amazing, but because it's so cutting edge your 99% chance going to run into an edge case that isn't well accounted for yet (I had a number of issues when I tried it). bs-css is battle tested today, so if you're goal is stability, I recommend it first.

Hey JasoonS, I might agree with you, styled-ppx isn't feature complete, would you mind explaining which edge cases aren't accounted?

I'm doing great progress on it and don't want to miss something that is crucial for you.

styled-ppx by @davesnx is a great option https://github.com/davesnx/styled-ppx

At Draftbit we've been using https://tailwindcss.com with @dylanirlbeck's https://github.com/dylanirlbeck/tailwind-ppx with great success!

We also use `bs-emotion` (which on the styled-components vs. emotion api side is the same)

styled-ppx is young but looks promising. Here a twitter thread about it by the author: https://twitter.com/davesnx/status/1249772395658960897?s=20

https://github.com/ahrefs/bs-emotion seems to be more mature. styled-ppx is built on top of it (seen within styled-ppx readme)

I guess this lib would be the closest alternative in a safe statically typed way : https://github.com/davesnx/styled-ppx There's also a nice lib for tailwind : https://github.com/dylanirlbeck/tailwind-ppx

Thanks, let me know if you are using it!

The approach I've been taking is to use ReasonML to model the domain of my application as well as high level components. ReasonML code remains unaware of the styling of the "lower-level" components for the most part, which I write in typescript with styled-components or emotion.

Is there any reason to prefer styled-components over emotion? I did a deep dive on this a few months ago, and found that Emotion supports the same API as SC, while also offering benefits like the `sx` prop, not to mention SSR for "free". It also had a reputation for being faster, but I didn't bother to benchmark it.

I'm bias as a contributor but Emotion does offer those perks "for free". Emotion has had a track record of quality engineering - Kye pioneered the babel plugin idea in its early days.

SC and the styled API from emotion are identical syntactic-wise and performance-wise. SC used to suffer from performance and big bundle size but these last 2 versions are very balanced. The same way as the sx prop from Emotion it's the css prop from styled-components.

Just to clarify and sell a little my ppx, styled-ppx supports the css prop as well, many people prefer that over the component api.

Reply on news.ycombinator.com