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.

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

Download details:

Author: MicheleBertoli
Source: https://github.com/MicheleBertoli/css-in-js

License: MIT license

#css #javascript