Styled-component vs jss vs emotion for React

Question

I'm trying to understand the best choice (as a CTO) between

• jss
• emotion
• styled-component.

I will try not to make the question "too wide" or "off-topic", because it's a very subjective topic. I'll try to answer (here) the question myself if no-one answers the whole, and I'll ask very closed questions :

• How the three of them can "compile to" (external css, <style> tag, style= attributes) ?
• How the three of them can integrate smoothly with CRA (without too much tweaks and without ejecting) ?
• What about the OpenSource POV (age, community, plugins, backing) ?
• What about the performance ?

Please I don't want this question closed, so I don't want some code-style opinions, and I want to avoid subjectives POVs.

Claus

This is the first time I heard of jss and emotion. Style-component seems to be gaining popularity though – Donell

For the record JSS has been adopted by materialUI – Bitartrate

@Bitartrate and has been deprecated in v5. I'm confused as to why, I loved JSS and the way material-ui used it allowed me to target internals of components without knowing their DOM structure. I loved it. I'm sure there must be a reason, though. – Chichi

@Adam I would love to know if you ever find out why. I also loved it and was really disappointed when they deprecated it. I don't understand why these other libraries are more popular, but I agree, there must be a reason. – Daemon

@Tyler, this is well detailed in their blog post introducing V5 – Bitartrate

Answer 1

A very short answer (there is much more to it in general)

1. CSS Template strings

SC parses template strings with CSS for at runtime. Emotion has a babel plugin to prepare those parsed things in a format that can render final CSS at runtime faster. JSS currently only supports basic template strings and otherwise uses objects (there are plans to add better support for template strings)

2. Updating style rules

SC and Emotion generate new CSS rules when you update dynamic styles, JSS will update existing rules (note you can see updated rules in styles tab of dev tools, but not in the style tag): reproduction

3. Dependency on React

SC is react only. Emotion has a syntax that can be used without react (css``). JSS has separate packages: jss (core, no react), react-jss (HOC injecting classes), styled-jss (SC like API).

4. Plugins

Currently only JSS supports plugins.

5. Static extraction

   Currently only Emotion supports full static extraction. JSS is working on it too. You can get static extraction with JSS today if you put styles into separate files (something.styles.js) and extract them using a webpack plugin (no dynamic values though).

6. Performance

http://necolas.github.io/react-native-web/benchmarks/

7. All of them generate actual CSS using a style tag.

Telephonist

AFAIK, if you're writing a lib then styled-components should be listed as peerDependencies, do you know if this is the case for styled-jss as well? – Georgiannageorgianne

Answer 2

As the above answer I haven't heard of jss and emotion either. Probably because they're not that common in combination with React. I have myself used regular CSS, inline styleing, CSS modules and now the latest Styled Components.

I like Styled components as it's easy to work with. So answer to (some of) your questions is.

1. See image. This is how it compiles to with Styled Components. It creates unique classes.
2. Don't need to eject. Just import it from npm and use
3. Think it becoming more and more popular and the community seems to like it. There are always different opinion and there's also many that don't like to mix styling and JS code in the components.
4. Really haven't checked performance but it seems fast. =)

Kunlun

Just want to mention that in 1) the class names can be made to look much better using the babel-plugin for styled-components, and you can even use this plugin without ejecting from cra using babel macros. Just include styled-components/macro instead. – Angrist