TLDR: The CSS-in-JS group has converged on a constant API.

Not so way back, a Fb engineer compiled an inventory of the accessible CSS-in-JS methodologies. It wasn’t brief:

aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, stylish, csjs, css-constructor, css-light, css-loader, css-ns, cssobj, cssx-loader, cxs, electron-css, emotion, es-css-modules, freestyler, glamor, glamorous, hiccup-css, hyperstyles, i-css, j2c, jsxstyle, linaria, nano-css, pre-style, radium, react-css-builder, react-css-components, react-css-modules, react-cssom, react-fela, react-free-style, react-inline-css, react-inline-style, react-inline, react-jss, react-look, react-native-web, react-statics-styles, react-styl, react-style, react-styleable, react-stylematic, react-theme, react-vstyle, reactcss, restyles, scope-styles, smart-css, stile-react-media-queries, stilr, stylable, style-it, styled-components, styled-jsx, styletron-react, styling, superstyle, typestyle, uranium

Such a fragmented ecosystem was removed from interesting. Which one do you have to choose, (if any)?

Contributing to Javascript fatigue — you want at most one. Additionally be happy to not be taught any.

GitHub stars are one helpful metric:

Nevertheless, GitHub stars say nothing a couple of challenge’s trajectory — maybe they had been amassed way back and the repo has since fallen out of favor or is not maintained. Glamor has loads of open points, and hasn’t seen a commit in over a yr. Its writer advises:

…it largely works, I am not going to do any main modifications… if you happen to want one thing extra fashionable, I might advocate emotion, it largely matches glamor’s api, and is actively maintained.

The equally named Glamorous was not too long ago deprecated with its writer additionally recommending customers change to Emotion:

The Fragmented, However Evolving State of CSS-in-JS 1

On the time, Emotion had some options that Styled Parts didn’t. Since then, Styled Parts has made some massive bulletins.

Styled Parts sells itself because the CSS-in-JS library for those who *like* CSS. Styled Parts gained reputation by using tagged template literals — permitting builders to *simply write CSS* in the identical syntax they already know, however inside JavaScript recordsdata. Whereas this has confirmed common, some builders favor to [write kinds as JavaScript objects. Emotion provided flexibility — builders might select how you can write their kinds. Styled Parts ultimately adopted swimsuit.

Emotion additionally gives a css prop, which Styled Parts didn’t have, till…

The rival CSS-in-JS libraries have stolen from one another till touchdown upon the identical characteristic set and the identical syntax — Emotion and Styled Parts have an nearly an identical API. What as soon as felt like a complete mess of competing methodologies and libraries now feels considerably secure. Even when CSS-in-JS hasn’t standardized on a dependency, it now has standardized a manner of doing issues — they’re simply applied in a different way:

Styled Parts is by far the most well-liked CSS-in-JS library, however Emotion has seen a speedy enhance in utilization.

Each are utilized by some main firms. Styled Parts are utilized by loads of giant firms, together with Bloomberg, Atlassian, Reddit, Goal, BBC Information, The Huffington Put up, Coinbase, Patreon, Vogue, Ticketmaster, Lego, InVision and Autodesk simply to call a couple of.

Emotion boasts fewer recognizable names, however has been not too long ago adopted by the New York Instances.

Whereas these libraries actually do appear to be hottest amongst React customers, they can be utilized with different frameworks. Whereas they appear to have converged on the identical options ultimately, it’s tough to say whether or not that is the end point of CSS-in-JS, or whether or not we’ll see a continued evolution from right here.