giulioambrogi / 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 4175	1.2.3	✓	✓	✓	✓	✓	63/133 358386
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 1827
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 2770	0.15.6		✓	✓		✓	59/496 7442704
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 2940
electron-css 0.6.0 2	0.6.0		✓	✓	✓		0/0 135
emotion 9.2.4 4101	6.0.3	✓	✓	✓	✓	✓	73/306 260249
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 3196	2.1.0	✓	✓	✓	✓	✓	79/206 842621
glamorous 4.13.1 3607	4.12.5	✓	✓	✓	✓	✓	1/183 795853
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 1804	2.1.1		✓	✓	✓	✓	12/75 3174
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 6372	0.13.5	✓	✓	✓	✓		84/475 857067
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 4641	3.0.2		✓	✓		✓	47/152 172299
react-cssom 1.0.0 54	1.0.0		✓	✓		✓	0/0 5
react-fela 6.1.8 1402	2.1.0	✓	✓	✓	✓	✓	18/274 24191
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 10718
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 431995
react-look 1.0.1 598	0.6.1	✓	✓	✓	✓		14/0 77
react-native-web 0.8.6 9653	0.0.11	✓			✓	✓	21/739 51794
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 1687	0.5.5			✓	✓	✓	34/65 1500
react-styleable 3.3.0 197	1.4.0		✓	✓		✓	1/5 1087
react-stylematic 1.1.0 19	1.0.1	✓	✓	✓	✓	✓	1/0 1957
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 1498	0.3.2	✓			✓		4/43 545864
restyles 2.0.1 47	2.0.1	✓	✓	✓	✓		1/1 17
scope-styles 0.6.0 23	0.6.0		✓	✓	✓	✓	7/6 1354
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 9275
style-it 2.0.0 92	1.2.9		✓	✓			1/25 2686
styled-components 3.3.3 17306	3.2.6	✓	✓	✓			104/1092 1085338
styled-jsx 2.2.7 3275	0.0.7	✓	✓	✓		✓	21/284 186617
styletron-react 3.0.4 2485	2.1.2	✓	✓	✓	✓	✓	59/82 5709
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 1919	0.22.3		✓	✓	✓	✓	15/151 23530
uranium 0.1.0 117	0.1.2			✓	✓		3/6 6

This list has been auto-updated (?) on June 29, 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.