UI libraries based on styled-components

🗣 Feature Discussions Needs Research
1

— Roadmap Card

Description

Some UI libraries, like Grommet, are based on styled-components instead of emotion.

Supporting styled-components only by itself doesn’t make much sense because all the features are included in Emotion. So we are only talking about supporting styled-components to support the UI libraries that use styled-components instead of emotion.

User Stories

As a theme developer
I want to use UI libraries that work with styled-components instead of emotion
so that I can do my work faster

Possible solution

I’ve been taking a look and the babel macro support of styled-components and it doesn’t cover server-side rendering, only the features offered by the babel plugin. And it also looks like styled-components, in contrast to emotion, still requires you to add JavaScript commands to your server for SSR: https://styled-components.com/docs/advanced#server-side-rendering.

We have some possibilities here:

  1. Add support for styled-components SSR
    I don’t think this makes much sense because we will increase the bundle size of Frontity unnecessarily.
  2. Translate the styled-components API to emotion
    This makes more sense but we still need to figure out how we are going to deal with Theming in Frontity to translate the ThemeProvider and withTheme parts.
  3. Don’t support styled-components UI libraries at all :man_shrugging: