/css-in-js

React: CSS in JS techniques comparison

Primary LanguageJavaScriptMIT LicenseMIT

Build Status

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