5 ms·

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 ab

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 https://typestyle.github.io

charrondev 9y ago
I’ve very glad you posted this. After trying and hating styled-components, this seems like exactly the solution I was looking for.
- cmbsw 9y ago
  What do you hate about styled-components?
  - choxi 9y ago
    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)
    - cmbsw 9y ago
      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/ 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.
      - choxi 9y ago
        Interesting. Totally possible that I just never learned the power of tagged template literals, I only tried styled-components for a couple weeks.
marksomnian 9y ago
Thank you, this seems excellent.
deusofnull 9y ago
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.

charrondev 9y ago

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

cmbsw 9y ago
What do you hate about styled-components?
- choxi 9y ago
  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)
  - cmbsw 9y ago
    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/ 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.
    - choxi 9y ago
      Interesting. Totally possible that I just never learned the power of tagged template literals, I only tried styled-components for a couple weeks.

marksomnian 9y ago

Thank you, this seems excellent.

deusofnull 9y ago

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.