css-in-js

by MicheleBertoli

MicheleBertoli / css-in-js

React: CSS in JS techniques comparison

5.1K Stars 279 Forks Last release: Not found MIT License 186 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
<a href="https://www.npmjs.com/package/react-media-queries" target="blank" title="npm version">tag 2.0.1 star 65
| 2.0.0 | ✓ | | ✓ | ✓ | |
info 1/3
download 21
_________
<a href="https://github.com/bloodyowl/react-media-queries/issues" target="blank" title="open / closed issues">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
    .

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.