Hacker News Reader

Comment by look_lookatme | Hacker News Reader

By far the most elegant solution I've found for this is TypeStyle [0]. Composable typed JS objects-as-CSS are a revelation and lend themselves to the kind of abstraction/extraction that most devs do everyday.

In contrast, inline parsed CSS such as styled-components seems nuts to me.

[0] https://typestyle.github.io

View on HN

I’ve very glad you posted this. After trying and hating styled-components, this seems like exactly the solution I was looking for.

What do you hate about styled-components?

Not the op, but the big thing is that the styles are just strings instead of a JS object so you lose a lot of the modularity and composability benefits of writing it "in" JavaScript.

The syntax was also awkward to me at first:

  const StyledLink = styled(Link)`
    color: palevioletred;
    font-weight: bold;
  `;

I thought in JS you couldn't invoke a function without the parenthesis, but apparently you can if you interpolate the string with backticks first? I've done a lot of JS development and I've never seen that before, so while it's nice that it's cleaner it just got in my way of understanding what's going on. I'd rather just do:

  const StyledLink = styled(Link)({
    color: "palevioltred", 
    fontWeight: "bold" 
  })

It looks basically the same but is immediately intuitive and much more powerful since the styles are objects instead of a string.

(Edited for some formatting)

Styled components uses tagged template literals so they aren't just strings and are very flexible. This blog post is a great explanation http://mxstbr.blog/2016/11/styled-components-magic-explained.... For example

const Button = styled.button` font-weight: {props => props.active ? 'bold' : 'none'} `; <Button active > This will be bold </Button>

I've found it to be very handy.

Interesting. Totally possible that I just never learned the power of tagged template literals, I only tried styled-components for a couple weeks.

Can this be used in a react component's <style jsx>? That would seem to eliminate the "copy paste" problem the author of the OP mentions, as well as allow for great DRY practice. JSX + TypeStyle sounds like a really maintainable, reusable solution.

Thank you, this seems excellent.

Reply on news.ycombinator.com