JavaScript HTML CSS Makefile
Switch branches/tags
Nothing to show
Clone or download
giulioambrogi and MicheleBertoli Added function that formats integers as comma separated integers (#99)
* Added function that formats integers as comma separated integers

* Generated new README.md
Latest commit 9e89eac Aug 9, 2018
Permalink
Failed to load latest commit information.
ReadmeSrc Added function that formats integers as comma separated integers (#99) Aug 9, 2018
aphrodite update version for aphrodite (#64) Aug 22, 2017
babel-plugin-css-in-js Update package version Mar 1, 2016
babel-plugin-pre-style babel-plugin-pre-style Jul 22, 2017
bloody-react-styled clean up Oct 5, 2015
classy classy Aug 29, 2015
csjs Added csjs Jan 14, 2016
css-constructor Update css-constructor to 0.1.1 (#47) Dec 13, 2016
css-light Added freestyler (#69) Nov 10, 2017
css-loader fixed css-loader media query Sep 5, 2015
css-ns css-ns Jan 22, 2016
cssobj ADD: cssobj project demo (#34) Aug 4, 2016
cssx-loader Add missing peerDependency: babel-core (#45) Dec 8, 2016
cxs Update name and url of cxs (#84) Mar 3, 2018
electron-css Feat/add electron css (#96) Jul 1, 2018
emotion emotion Jul 22, 2017
es-css-modules Add ES CSS Modules (#29) Jun 8, 2016
freestyler feat: update freestyler to new version (#81) Feb 10, 2018
glamor Add missing peerDependency "babel-core" (#42) Dec 1, 2016
glamorous chore: update glamorous to 4.12.5 (#90) May 8, 2018
hiccup-css add @thi.ng/hiccup-css, fix npm stats fetching (revised) (#93) Jun 16, 2018
hyperstyles Added hyperstyles example. Updated table. Jan 17, 2016
i-css Update i-css version (#67) Sep 26, 2017
j2c Bump j2c version Jan 12, 2016
jsxstyle Update jsxstyle (#95) Jun 24, 2018
linaria Update Linaria setup (#77) Dec 29, 2017
nano-css Feat/add nano css (#85) Mar 24, 2018
pre-style Add the Pre-Style project (#51) Apr 7, 2017
radium updated radium Aug 3, 2015
react-css-builder clean up Oct 5, 2015
react-css-components use button in react-css-components Jun 13, 2016
react-css-modules clean up Oct 5, 2015
react-cssom react-cssom Jul 22, 2017
react-fela use style prop in react-fela Aug 1, 2016
react-free-style clean up Oct 5, 2015
react-inline-css clean up Oct 5, 2015
react-inline-style react-inline-style Jul 18, 2015
react-inline clean up Oct 5, 2015
react-jss update jss example Apr 9, 2016
react-look fixed package by including /dom package Nov 25, 2015
react-native-web Add react-native-web-css-in-js Dec 19, 2015
react-statics-styles clean up Oct 5, 2015
react-styl clean up Oct 5, 2015
react-style clean up Oct 5, 2015
react-styleable button.css Sep 5, 2015
react-stylematic Added react-stylematic Apr 28, 2016
react-theme add proper button label to react-theme example Aug 13, 2015
react-vstyle react-vstyle Jun 3, 2016
reactcss reactcss Jul 3, 2015
restyles restyles Jul 22, 2017
scope-styles Add scope-styles Jan 14, 2016
smart-css clean up Oct 5, 2015
stile-react-media-queries added stile + react-media-queries Jan 16, 2016
stilr clean up Oct 5, 2015
stylable styable => stylable Dec 23, 2017
style-it Update reactive-style; renamed to style-it to match api (#36) Sep 8, 2016
styled-components feat: updated Styled Components to latest (#88) May 7, 2018
styled-jsx styled-jsx Dec 7, 2016
styletron-react styletron Dec 7, 2016
styling clean up Oct 5, 2015
superstyle superstyle Jul 22, 2017
typestyle Add TypeStyle (#50) Jan 6, 2017
uranium uranium Nov 27, 2016
webpage Feat/add electron css (#96) Jul 1, 2018
.gitignore Implement Mmarkdown ☕️ (#87) May 19, 2018
.prettierrc Implement Mmarkdown ☕️ (#87) May 19, 2018
.travis.yml update travis dir Feb 10, 2018
LICENSE Initial commit May 25, 2015
README.md Added function that formats integers as comma separated integers (#99) Aug 9, 2018

README.md

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.