Discovery findings: using styled-components

[zarahzachz]

I did some discovery in replacing our current styles solution (node-sass) with a CSS-in-JS solution. Since the Storybook Design System guide recommended styled-components as their CSS-in-JS solution, I explored that.

Tl;dr I found it pretty annoying writing CSS-in-JS, which I'll detail more below.

Pros

Using our design tokens in our styles was fairly straight-forward

• To use design tokens, just import the tokens needed into the component file
• There was no need to convert the design token to another type of style variable (scss or css property)

In theory, styles could be more simply written

• By associating prop values with a design token, you could lean on JS to show the correct style when a certain prop is defined
• However, I struggled to get this association working - I'm chalking this up to user error

There was baked-in support for nesting

• Other style solutions seemed to require additional plugins to access style nesting features, but styled-components had this out the gate

Cons

Styles are tightly scoped to the component

• Results in an "inline styles" effect - difficult for teams to overwrite styles if needed
• Difficult to debug in the browser

Bad DX (I consider this more of a slight con)

• Lack of stylelinting made formatting a pain
• No autocomplete tooling to assist in filling out style properties (had to rely on memory of what CSS rules are available and what order they should be written in)
• There are probably VS Code extensions I could find to make this part better, but I didn't

Not all Sass features supported

• While nesting is supported, using the & feature to quickly created variations of styles (for state purposes) wasn't
• Difficult to reuse styles in the form of mixins, extends, or includes

Folding styles into the component logic made file length a little unwieldily

Direction on ideal theming support is not entirely understood

• styled-components have a ThemeProvider (a Context provider) that's supposed to support theming
• I had a difficult time understanding how this could be used for a design system where each component exists in its own space
• It seemed like each component would need to be wrapped in a ThemeProvider to accommodate different styles (based on how our tokens are currently set up)
  • Would this open the gates for different themed components being used together?

Utility classes (and other shared CSS) can't be supported

• styled-components does offer a global styles solution to share resets, font-faces, etc.
• Can't create/support utility classes using this solution
• Would need to explore another library to create/support utility classes

Summary

I think if I were working on a non-design system project and didn't need to support multiple themes, styled-components would probably work. But given the complexity of our product, adopting styled-components at this time doesn't feel like a wise use of time/effort.