Reactgo: Styled Components

[ZeroCho]

ReactGo is now Homo neanderthalensis, and ReactGo should be Homo sapiens

[choonkending]

LOL @ZeroCho .

Do you mean https://github.com/styled-components/styled-components? I went for a meetup awhile ago and was fascinated. However, I'm not sure whether it works well in server-side rendering.

[GGAlanSmithee]

@choonkending I am using it for ssr, and it's working fine. There were some issues with the Babel plugin, but if might be sorted now. Could be better to wait for v2 for more stable ssr and ++performance. Maybe @mxstbr could provide some info on current ssr status.

Also, see

• https://github.com/styled-components/styled-components/issues/453
• https://github.com/styled-components/styled-components/pull/434
• https://github.com/styled-components/styled-components/blob/v2/example/ssr.js

[mxstbr]

Note: That image is to be taken with a grain of salt, neither of the creators of styled-components made it and it's not very… logical. 😉

I use styled-components with SSR in production at https://daybook.co (that's based on Next.js) and it's working perfectly fine. The Babel plugin is still in beta while we're figuring out the kinks, but one doesn't need to use it for SSR with v1!

[choonkending]

Thanks for that @mxstbr!

I _have_ been slowly transitioning to making layout or style components with css modules in other projects, and styled-components feels like logical transition for me.

(I really liked styled-components-magic-explained and react-children-deepdive btw! )

[choonkending]

I think we do have to consider revisiting how we handle our css in reactGo. It's been bothering me for a while.

Reason:

• We use a couple of different libraries/tools that seem to share similar responsibilities
  
  
  
  • css-modules (to eliminate class name conflicts and allow you to write locally scoped css). I think this removes the need for BEM. 👍
  
  
  • postcss
    
    
    
    
    
    • postcss-imports -> allow you to import files
    
    
    
    • postcss-cssnext
      
      
      
      
      
      
      
      • writing future css
      
      
      
      
      • declaring vars. Prior to this we could compose classNames from css modules for code-re-use. And after that we had a postcss-simple-vars dependency which handled this.
      
      
      
      
      • i personally haven't been using the newer syntax that much, and am wondering whether people find much value in it. It might just be a lack of familiarity.
      
      
      
      
    
    
    
  
  

Before we introduce styled-components 💅 (if we decide to), I would like to have a think/understanding of what each tool's responsibility is. Im just conscious of adding new tools and increasing the number of dependencies we have to support.

[pedronasser]

I'm currently using styled-components on my personal "reactGo" (created on top of dvajs with SSR). Works pretty well and fits perfectly in this project. I'm just using css loaders for importing third-party css.
@mxstbr Thank you very much for that awesome project.

[choonkending]

I have been trying out styled components as a spike for reactGo.

Pros:

• 👍 Able to create style rules dynamically. You can derive them from props in Javascript. This will be really handy if you wish to do transitions or animations.
• 👍 Configuration is abstracted away from us. We do not have to worry about webpack configurations for styled components.
• 👍 Encapsulated styling. No conflicts for className.

Cons:

• 👎 Coupled to React.
  
  
  
  • 🤔 This is not really a huge disadvantage, given that reactGo has "react" in its name. However, it is good to keep in mind that your styling will have to be ported if your switch from React.
  
  
• 👎 Additional transformations for css will not be available to your styled components (if you have postcss)
  
  
  
  • 🤔 Styled components have styles automatically prefixed. Any other transformation can arguably be performed within JS (which to me is a 👍 because we don't need to delegate that transformation to another build tool.)
  
  

I am pretty sold on styled-components. Here is what I have done so far https://github.com/reactGo/reactGo/compare/master...choonkending:styled-components

I will slowly port the components across and see how we go from there.

[mxstbr]

👌 Let me know if you have any questions!