3 ms·

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 re

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.

thegreatpeter 6y ago
styled-ppx by @davesnx is a great option https://github.com/davesnx/styled-ppx https://github.com/davesnx/styled-ppx At Draftbit we've been using https://tailwindcss.com https://tailwindcss.com with @dylanirlbeck's https://github.com/dylanirlbeck/tailwind-ppx 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)
tsnobip 6y ago
I guess this lib would be the closest alternative in a safe statically typed way : https://github.com/davesnx/styled-ppx https://github.com/davesnx/styled-ppx There's also a nice lib for tailwind : https://github.com/dylanirlbeck/tailwind-ppx https://github.com/dylanirlbeck/tailwind-ppx
- davesnx 6y ago
  Thanks, let me know if you are using it!
wwewe 6y ago
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.
- chrisweekly 6y ago
  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.
  - thegreatpeter 6y ago
    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.
  - davesnx 6y ago
    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.
marcagba 6y ago
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://twitter.com/davesnx/status/1249772395658960897?s=20 https://github.com/ahrefs/bs-emotion https://github.com/ahrefs/bs-emotion seems to be more mature. styled-ppx is built on top of it (seen within styled-ppx readme)
JasoonS 6y ago
Hey, I recommend sticking to bs-css (https://github.com/reasonml-labs/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.
- davesnx 6y ago
  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.

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.

thegreatpeter 6y ago

styled-ppx by @davesnx is a great option https://github.com/davesnx/styled-ppx https://github.com/davesnx/styled-ppx At Draftbit we've been using https://tailwindcss.com https://tailwindcss.com with @dylanirlbeck's https://github.com/dylanirlbeck/tailwind-ppx 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)

tsnobip 6y ago

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

davesnx 6y ago
Thanks, let me know if you are using it!

wwewe 6y ago

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.

chrisweekly 6y ago
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.
- thegreatpeter 6y ago
  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.
- davesnx 6y ago
  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.

marcagba 6y ago

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://twitter.com/davesnx/status/1249772395658960897?s=20 https://github.com/ahrefs/bs-emotion https://github.com/ahrefs/bs-emotion seems to be more mature. styled-ppx is built on top of it (seen within styled-ppx readme)

JasoonS 6y ago

Hey, I recommend sticking to bs-css (https://github.com/reasonml-labs/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.

davesnx 6y ago
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.