React: CSS in JS techniques comparison.

Inside each package folder, run:

 npm i npm run build && open index.html

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 two hundred and fifty-nine	1.2.2	✓	✓	✓	✓	✓	6/12 four hundred and eight
babel-plugin-pre-style 1.5.1 two hundred and fifty-nine	1.0.9-alpha		✓	✓	✓	✓	6/12 four hundred and eight
bloody-react-styled 0.0.5 thirty-five	3.0.0		✓	✓			1/2 twelve
classy 1.4.10 twenty-two	0.3.0		✓	✓	✓		0/0 eighty-eight
csjs 1.1.0 five hundred and sixteen	1.0.0		✓	✓			22/25 1,827
css-constructor 0.1.7 ninety	0.1.1	✓	✓	✓			4/2 sixty-five
css-light 1.1.0 two	1.1.0		✓	✓	✓	✓	1/0 fifty-four
css-loader 0.28.11 2,770	0.15.6		✓	✓		✓	59/496 7,442,704
css-ns 1.2.1 one hundred and seven	1.0.0		✓	✓		✓	1/1 three hundred and thirteen
cssobj 1.3.6 two hundred and twenty-one	0.2.21	✓	✓	✓	✓		2/12 two hundred and five
cssx 5.2.1 nine hundred and ninety-eight	3.8.0	✓	✓	✓		✓	10/14 three hundred and fourteen
cxs 6.2.0 eight hundred and ninety-six	6.2.0		✓	✓	✓	✓	18/20 2,940
electron-css 0.6.0 two	0.6.0		✓	✓	✓		0/0 one hundred and thirty-five
emotion 9.2.4 4,101	6.0.3	✓	✓	✓	✓	✓	73/306 260,249
es-css-modules 1.2.4 one hundred and fifty-one	1.2.3		✓	✓		✓	1/2 one hundred and sixteen
freestyler 3.1.0 one hundred and twenty-one	1.5.0	✓	✓	✓	✓		12/0 two hundred and twelve
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 fifty-two	3.3.0		✓	✓		✓	0/3 fifty-one
i-css 1.2.0 two	1.0.4	✓	✓	✓	✓		0/0 fifty-two
j2c 0.11.3 one hundred and fifty-five	0.10.0		✓	✓	✓	✓	8/24 six hundred and thirteen
jsxstyle 2.1.3 1,804	2.1.1		✓	✓	✓	✓	12/75 3,174
linaria 0.5.0 three hundred and fifty-one	0.5.0	✓	✓	✓	✓	✓	21/62 three hundred and forty-nine
nano-css 2.0.2 fifty-one	0.1.0	✓	✓	✓	✓	✓	15/3 six hundred and eighty-two
pre-style 1.0.9-alpha thirty	1.0.9-alpha		✓	✓		✓	4/3 sixteen
radium 0.24.0 6,372	0.13.5	✓	✓	✓	✓		84/475 857,067
react-css-builder 0.2.0 twenty	0.2.0				✓		0/0 five
react-css-components 1.0.1 seven hundred and one	0.6.9		✓	✓		✓	5/9 forty
react-css-modules 4.7.3 4,641	3.0.2		✓	✓		✓	47/152 172,299
react-cssom 1.0.0 fifty-four	1.0.0		✓	✓		✓	0/0 five
react-fela 6.1.8 1,402	2.1.0	✓	✓	✓	✓	✓	18/274 24,191
react-free-style 7.0.2 one hundred and nineteen	0.6.0		✓	✓	✓	✓	0/19 one hundred and fifty-four
react-inline-css 2.3.1 one hundred and sixty-five	1.2.0		✓	✓			6/12 10,718
react-inline-style 0.1.0 forty-five	0.1.0	✓	✓	✓	✓		1/0 four
react-inline 0.8.2 four hundred and fifty-two	0.6.3	✓	✓	✓	✓	✓	3/0 one hundred and twenty-one
react-jss 8.6.0 nine hundred and twenty-eight	2.0.5	✓	✓	✓	✓	✓	17/180 431,995
react-look 1.0.1 five hundred and ninety-eight	0.6.1	✓	✓	✓	✓		14/0 seventy-seven
react-native-web 0.8.6 9,653	0.0.11	✓			✓	✓	21/739 51,794
react-statics-styles 3.1.0 twenty-five	3.0.2		✓		✓	✓	0/0 twelve
react-styl 0.0.3 forty-two	0.0.1		✓	✓			0/0 sixty-two
react-style 0.5.5 1,687	0.5.5			✓	✓	✓	34/65 1,500
react-styleable 3.3.0 one hundred and ninety-seven	1.4.0		✓	✓		✓	1/5 1,087
react-stylematic 1.1.0 nineteen	1.0.1	✓	✓	✓	✓	✓	1/0 1,957
react-theme 0.1.4 sixty-five	0.1.4				✓		0/0 four hundred and eighty-three
react-vstyle 0.1.0 nineteen	0.1.0	✓	✓	✓	✓	✓	0/0 six
reactcss 1.2.3 1,498	0.3.2	✓			✓		4/43 545,864
restyles 2.0.1 forty-seven	2.0.1	✓	✓	✓	✓		1/1 seventeen
scope-styles 0.6.0 twenty-three	0.6.0		✓	✓	✓	✓	7/6 1,354
smart-css 1.1.1 seventy-three	1.1.1		✓	✓	✓		4/3 twelve
stile 3.1.0 nineteen ___________________________ react-media-queries 2.0.1 sixty-five	2.0.0	✓		✓	✓		1/3 twenty-one ____________ 1/2 twenty-two
stilr 1.3.0 two hundred and thirty-six	1.1.0		✓	✓	✓	✓	5/18 one hundred and forty-eight
stylable 5.4.9 seven hundred and twenty-eight	5.0.2		✓	✓		✓	62/114 9,275
style-it 2.0.0 ninety-two	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 one hundred and thirty	0.2.0		✓		✓	✓	5/2 forty-nine
superstyle 1.0.0-1 thirty-one	1.0.0-1				✓		0/1 five
@thi.ng/hiccup-css 0.2.3 one hundred and seventy	0.2.0	✓	✓	✓	✓	✓	5/14 five hundred and thirty-seven
typestyle 2.0.1 1,919	0.22.3		✓	✓	✓	✓	15/151 23,530
uranium 0.1.0 one hundred and seventeen	0.1.2			✓	✓		3/6 six

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

"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

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 .