michelebertoli/css-in-js

React: CSS in JS techniques comparison

CSS in JS

React: CSS in JS techniques comparison.

Usage

Inside each package folder, run:

npm i
npm run build && open index.html

Features

How to read the table

More ticks doesn't mean "better", it depends on your needs. For example, if a package supports the css file extraction you can run the autoprefixing at build time.

Package	Version	Automatic Vendor Prefixing	Pseudo Classes	Media Queries	Styles As Object Literals	Extract CSS File	Package Stats
aphrodite 2.2.2 4,175	1.2.3	✓	✓	✓	✓	✓	63/133 358,386
babel-plugin-css-in-js 1.5.1 259	1.2.2	✓	✓	✓	✓	✓	6/12 408
babel-plugin-pre-style 1.5.1 259	1.0.9-alpha		✓	✓	✓	✓	6/12 408
bloody-react-styled 0.0.5 35	3.0.0		✓	✓			1/2 12
classy 1.4.10 22	0.3.0		✓	✓	✓		0/0 88
csjs 1.1.0 516	1.0.0		✓	✓			22/25 1,827
css-constructor 0.1.7 90	0.1.1	✓	✓	✓			4/2 65
css-light 1.1.0 2	1.1.0		✓	✓	✓	✓	1/0 54
css-loader 0.28.11 2,770	0.15.6		✓	✓		✓	59/496 7,442,704
css-ns 1.2.1 107	1.0.0		✓	✓		✓	1/1 313
cssobj 1.3.6 221	0.2.21	✓	✓	✓	✓		2/12 205
cssx 5.2.1 998	3.8.0	✓	✓	✓		✓	10/14 314
cxs 6.2.0 896	6.2.0		✓	✓	✓	✓	18/20 2,940
electron-css 0.6.0 2	0.6.0		✓	✓	✓		0/0 135
emotion 9.2.4 4,101	6.0.3	✓	✓	✓	✓	✓	73/306 260,249
es-css-modules 1.2.4 151	1.2.3		✓	✓		✓	1/2 116
freestyler 3.1.0 121	1.5.0	✓	✓	✓	✓		12/0 212
glamor 2.20.40 3,196	2.1.0	✓	✓	✓	✓	✓	79/206 842,621
glamorous 4.13.1 3,607	4.12.5	✓	✓	✓	✓	✓	1/183 795,853
hyperstyles 3.3.1 52	3.3.0		✓	✓		✓	0/3 51
i-css 1.2.0 2	1.0.4	✓	✓	✓	✓		0/0 52
j2c 0.11.3 155	0.10.0		✓	✓	✓	✓	8/24 613
jsxstyle 2.1.3 1,804	2.1.1		✓	✓	✓	✓	12/75 3,174
linaria 0.5.0 351	0.5.0	✓	✓	✓	✓	✓	21/62 349
nano-css 2.0.2 51	0.1.0	✓	✓	✓	✓	✓	15/3 682
pre-style 1.0.9-alpha 30	1.0.9-alpha		✓	✓		✓	4/3 16
radium 0.24.0 6,372	0.13.5	✓	✓	✓	✓		84/475 857,067
react-css-builder 0.2.0 20	0.2.0				✓		0/0 5
react-css-components 1.0.1 701	0.6.9		✓	✓		✓	5/9 40
react-css-modules 4.7.3 4,641	3.0.2		✓	✓		✓	47/152 172,299
react-cssom 1.0.0 54	1.0.0		✓	✓		✓	0/0 5
react-fela 6.1.8 1,402	2.1.0	✓	✓	✓	✓	✓	18/274 24,191
react-free-style 7.0.2 119	0.6.0		✓	✓	✓	✓	0/19 154
react-inline-css 2.3.1 165	1.2.0		✓	✓			6/12 10,718
react-inline-style 0.1.0 45	0.1.0	✓	✓	✓	✓		1/0 4
react-inline 0.8.2 452	0.6.3	✓	✓	✓	✓	✓	3/0 121
react-jss 8.6.0 928	2.0.5	✓	✓	✓	✓	✓	17/180 431,995
react-look 1.0.1 598	0.6.1	✓	✓	✓	✓		14/0 77
react-native-web 0.8.6 9,653	0.0.11	✓			✓	✓	21/739 51,794
react-statics-styles 3.1.0 25	3.0.2		✓		✓	✓	0/0 12
react-styl 0.0.3 42	0.0.1		✓	✓			0/0 62
react-style 0.5.5 1,687	0.5.5			✓	✓	✓	34/65 1,500
react-styleable 3.3.0 197	1.4.0		✓	✓		✓	1/5 1,087
react-stylematic 1.1.0 19	1.0.1	✓	✓	✓	✓	✓	1/0 1,957
react-theme 0.1.4 65	0.1.4				✓		0/0 483
react-vstyle 0.1.0 19	0.1.0	✓	✓	✓	✓	✓	0/0 6
reactcss 1.2.3 1,498	0.3.2	✓			✓		4/43 545,864
restyles 2.0.1 47	2.0.1	✓	✓	✓	✓		1/1 17
scope-styles 0.6.0 23	0.6.0		✓	✓	✓	✓	7/6 1,354
smart-css 1.1.1 73	1.1.1		✓	✓	✓		4/3 12
stile 3.1.0 19 ___________________________ react-media-queries 2.0.1 65	2.0.0	✓		✓	✓		1/3 21 ____________ 1/2 22
stilr 1.3.0 236	1.1.0		✓	✓	✓	✓	5/18 148
stylable 5.4.9 728	5.0.2		✓	✓		✓	62/114 9,275
style-it 2.0.0 92	1.2.9		✓	✓			1/25 2,686
styled-components 3.3.3 17,306	3.2.6	✓	✓	✓			104/1092 1,085,338
styled-jsx 2.2.7 3,275	0.0.7	✓	✓	✓		✓	21/284 186,617
styletron-react 3.0.4 2,485	2.1.2	✓	✓	✓	✓	✓	59/82 5,709
styling 0.4.1 130	0.2.0		✓		✓	✓	5/2 49
superstyle 1.0.0-1 31	1.0.0-1				✓		0/1 5
@thi.ng/hiccup-css 0.2.3 170	0.2.0	✓	✓	✓	✓	✓	5/14 537
typestyle 2.0.1 1,919	0.22.3		✓	✓	✓	✓	15/151 23,530
uranium 0.1.0 117	0.1.2			✓	✓		3/6 6

This list has been auto-updated (?) on August 8, 2018

Testimonials

"Wow, this totally makes my week!" - Dan Abramov

"nice compilation of css-in-js techniques" - TJ Holowaychuk

SurviveJS / Styling React by Juho Vepsäläinen

The Case for CSS Modules by Mark Dalgleish

First Class Styles by Mark Dalgleish

Styling React.JS applications by Max Stoiber

Contributing

If your package is not listed here, feel free to add it.

1. Create a new folder named package-name in the root folder.
2. Implement the red button example using the package.
3. Add a new entry to data.json.
4. Rename ReadmeSrc/.env_example to ReadmeSrc/.env and set a Github access token to retrieve data from Github.
5. Re-generate the data with: cd ReadmeSrc && yarn && yarn update-data && yarn generate-readme.

css-in-js's Issues

"Extract CSS File" seems misleading

First of all, thank you so much for your work in compiling this table! It's an awesome reference.

Now, my question: How do you determine whether a library supports CSS file extraction (under the "Extract CSS File" column)? As an example, aphrodite has a checkmark under that column, but this issue suggests that this is explicitly not a feature of the library. Other libraries that have that checkmark in the table, such as glamorous, don't suggest any way of accomplishing this.

Either I'm misunderstanding what that column means, in which case it might be a good idea to describe it in the readme, or some of these values are incorrect. If it's the latter, I would be more than happy to go through them and compile a list of which of these libraries actually advertise this as a feature.

Thanks!

Please see my css in js loader for webpack

https://github.com/irom-io/cess-loader

Syntax for this loader already supported by WebStorm.

Should "jss" and "j2c" be included?

jss
j2c

Add i-css

Please, add my new package for using css in js.
https://github.com/irom-io/i-css

Add css-modules?

Not sure if css-modules counts
https://github.com/css-modules/css-modules

jss autoprefixer

its actually included, using plugin https://github.com/jsstyles/jss-vendor-prefixer

Link to benchmark

https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md

Use autoupdating npm shields instead of static text for version numbers

In the version column if we had these:

Instead of static text, it would decrease the burden to update and also be a more accurate living reflection of what version these packages are on. Cheers

Thank you for doing this.

Appreciate you having done a lot of research into the latest wiz-bang frameworks. This is super useful.

Use `x` to represent `support`, there will be some ambiguity.

May be ✔️/√ or ✅?

Rename Autoprefixer Included

Most of projects doesn't contain Autoprefixer itself, but v use some other tool.

Maybe we should write column name more clear, like "Vendor Prefixes"?

Abandoned libraries

The following libraries that are in your list appear to have been abandoned by their authors. I don't know if you'd prefer to remove them from the repo (I can make a PR if you'd like) or if you want to keep them listed for historic value.

• react-inline - The repo has been archived by its owner.
• react-look - The repo has been archived by its owner and an explicit "deprecated" message has been added in its README and its description on Github suggesting people use Fela and react-fela (already listed in this project) instead.
• react-style - The author has added messages to the README file and the Github repo description warning that the code is "UNMAINTAINED".

Column request: Uses CSS syntax

At least some of the listed libraries use CSS syntax, rather than or as well as object literals (styled-components, styled-jsx, etc.), some only permit objects. It would be nice if this was also part of the table, since that is a significant factor for those who for example have to port existing CSS, or use third-party components that do not style themselves.

`last update` column in css-in-js table

Currently, projects are sorted alphabetically.
It would be really nice to instead have them sorted by last update

Maybe there are services/bots that could be set to update that table on major or maybe even minor version updates... not sure... but i'm coming back to css-in-js in irregular intervals to check if there is a new cool project :-)

Maybe there are already easy ways to figure out what to check, but i don't find it trivial to see what changed.

Add React Styleable

This one seems is interesting, as it let's you write styles externally in CSS/SASS but you get the CSS classNames as strictly-interfaced props via a Higher-Order Component. This means that changing used styles externally by mistake, will trigger "undefined" errors when using them in React.

Take a look: https://github.com/pluralsight/react-styleable

Add Uranium -- universal media queries in React Native and React

Just released this guy :) https://github.com/tuckerconnelly/uranium

Benefit is that it works in both React Native and React, and works with server-side rendering

I would like to include some more features

• @Keyframes support
• @font-face support
• extensibility/plugins api
• fallbacks
• framework agnostic (not just react)
• rendering technics:
  • generates CSS and inserts style element
  • uses inline styles
  • mixed mode: inline styles, CSS, reacts event system for :hover and co (radium)

Also I would add below a description for each feature.

Format numbers in README

We recently added more data to the README, such as GitHub stars and monthly downloads for each package.
However, we are not formatting the numbers and this makes the information hard to read.

This is for first-contributors only - feel free to ping me if you need help.

Add react-cssom

https://github.com/mbasso/react-cssom

Avoid globals

css-in-js/babel-plugin-css-in-js/button.js

Line 4 in bfdc913

const styles = cssInJS({

it's a global? @martinandert

Blog post on measuring performances between CSS-in-JS libraries on the server.

Hey @MicheleBertoli, I wrote a blog post on the repo I saw you already starred. Maybe something for the testimonials? 😄

Post: https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea#.igooociw6
Repo: github.com/hellofresh/css-in-js-perf-tests

How on earth are we going to pick the right library if we can choose from 80 candidates?

Best way to update renamed/deprecated projects?

Hey Michele, I found 2 projects that are breaking the update-data script:

• js-next/react-style - deprecated
• /rtsao/styletron - styletron/styletron

Should I sent 2 different PRs?

Thanks!

Thoughts on CSS Blocks?

https://css-blocks.com/

could we have this added too?

Add restyles

https://github.com/tkh44/restyles

Request for adding stars in the data sheet

Feature request

This is a great effort, more like a booklet of awesome frameworks.

I was trying add the GitHub stars per project in the last column, but for some reason I wasn't able to do it. Most badges require some JS script to be embedded, I even tried the shields.io badges, but wasn't successful.

If this is in your charter, may I help putting this together? Unless we head to github pages, or a separate website, anyway doing this?

Thanks.

Use NPM Badge for version

Would it be possible to use the NPM badge for version? This would ensure version reported is latest and also provide another link to documentation.

Roadmap

(personal vision)

Everybody would agree that MicheleBertoli's comparison table is the widest (number of libraries being compared), but not the deepest (number of features being compared). I want to fix this.

First stage

The first stage is to implement a website for comparison table because it is hard to show and maintain a big number of features in markdown table.

So I did a basic website, which presents the same data as current readme. But as of now

• it lives in a separate branch,
• information is duplicated in JSON file and Readme
• is hosted with the help of GH pages
• and deployment process is manual

Obviously, we need to automate website deployment. We can use CI to push updates or something like Netlify.

1. #76 Any preferences or suggestions?

Information should not be duplicated in JSON file and Readme.

2. #79 We can generate Readme from JSON or remove the table from Readme and use website table only.

I have this idea that every feature should be proved with code example, so every change in the table will be accompanied by PR to master branch. Hence the question:

3. #78 should we move the website to master branch or at least JSON-file? So we can have one PR instead of two?

Second stage

It is important to define features precisely. I tried to do this here. CSS-in-JS is so new and fast-moving field, so it is hard to track everything and unprecise definitions make life harder. For example, Radium supports :hover, but this is not actual CSS pseudo class, but faked with JS listeners, so it will not work with disabled JS (no progressive enhancement). Disclaimer: I haven't checked what it does right now, maybe this changed.

As soon as we come up with proper definitions, we will need to come up with a code example for at least one library to show how it suppose to work. After this we can add a new feature to the table and mark our one new example as "positive" (or green color) every other library in the table will get "unknown" state (or gray color) until somebody will provide "code proof" of "positive" or "negative" result. Example of icons: #80

Improvements

4. We can make life a bit easier by implementing screenshot testing, to make sure every example looks the same.

5. We can implement benchmarks. Examples: 1, 2, 3, 4

6. Calculate footprint of CSS-in-JS solution with something, like size-limit

Other comparison tables

• oliviertassinari/a-journey-toward-better-style
• joeshub/css-in-react
• FormidableLabs/radium
• styled-components/comparison

proposal - include in the table one more column 'server side render'

split it into 2 parts - opportunity server side render and get critical css from server code