Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/MicheleBertoli/css-in-js

React: CSS in JS techniques comparison
https://github.com/MicheleBertoli/css-in-js

css-in-js cssinjs

Last synced: about 2 months ago
JSON representation

React: CSS in JS techniques comparison

Awesome Lists containing this project

README

        

[![Build Status](https://travis-ci.org/MicheleBertoli/css-in-js.svg?branch=master)](https://travis-ci.org/MicheleBertoli/css-in-js)

# CSS in JS

React: [CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js) techniques comparison.

## Usage

Inside each package folder, run:

```bash
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](https://github.com/Khan/aphrodite)


tag 2.2.2 star 4,175
| 1.2.3 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 63/133
download 358,386
|
| [babel-plugin-css-in-js](https://github.com/martinandert/babel-plugin-css-in-js)

tag 1.5.1 star 259
| 1.2.2 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 6/12
download 408
|
| [babel-plugin-pre-style](https://github.com/soluml/babel-plugin-pre-style)

tag 1.5.1 star 259
| 1.0.9-alpha | | ✓ | ✓ | ✓ | ✓ |
info 6/12
download 408
|
| [bloody-react-styled](https://github.com/bloodyowl/react-styled)

tag 0.0.5 star 35
| 3.0.0 | | ✓ | ✓ | | |
info 1/2
download 12
|
| [classy](https://github.com/inturn/classy)

tag 1.4.10 star 22
| 0.3.0 | | ✓ | ✓ | ✓ | |
info 0/0
download 88
|
| [csjs](https://github.com/rtsao/csjs)

tag 1.1.0 star 516
| 1.0.0 | | ✓ | ✓ | | |
info 22/25
download 1,827
|
| [css-constructor](https://github.com/siddharthkp/css-constructor)

tag 0.1.7 star 90
| 0.1.1 | ✓ | ✓ | ✓ | | |
info 4/2
download 65
|
| [css-light](https://github.com/streamich/css-light)

tag 1.1.0 star 2
| 1.1.0 | | ✓ | ✓ | ✓ | ✓ |
info 1/0
download 54
|
| [css-loader](https://github.com/webpack/css-loader)

tag 0.28.11 star 2,770
| 0.15.6 | | ✓ | ✓ | | ✓ |
info 59/496
download 7,442,704
|
| [css-ns](https://github.com/jareware/css-ns)

tag 1.2.1 star 107
| 1.0.0 | | ✓ | ✓ | | ✓ |
info 1/1
download 313
|
| [cssobj](https://github.com/cssobj/cssobj)

tag 1.3.6 star 221
| 0.2.21 | ✓ | ✓ | ✓ | ✓ | |
info 2/12
download 205
|
| [cssx](https://github.com/krasimir/cssx)

tag 5.2.1 star 998
| 3.8.0 | ✓ | ✓ | ✓ | | ✓ |
info 10/14
download 314
|
| [cxs](https://github.com/cxs-css/cxs)

tag 6.2.0 star 896
| 6.2.0 | | ✓ | ✓ | ✓ | ✓ |
info 18/20
download 2,940
|
| [electron-css](https://github.com/azukaar/electron-css)

tag 0.6.0 star 2
| 0.6.0 | | ✓ | ✓ | ✓ | |
info 0/0
download 135
|
| [emotion](https://github.com/tkh44/emotion)

tag 9.2.4 star 4,101
| 6.0.3 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 73/306
download 260,249
|
| [es-css-modules](https://github.com/jacobp100/es-css-modules)

tag 1.2.4 star 151
| 1.2.3 | | ✓ | ✓ | | ✓ |
info 1/2
download 116
|
| [freestyler](https://github.com/streamich/freestyler)

tag 3.1.0 star 121
| 1.5.0 | ✓ | ✓ | ✓ | ✓ | |
info 12/0
download 212
|
| [glamor](https://github.com/threepointone/glamor)

tag 2.20.40 star 3,196
| 2.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 79/206
download 842,621
|
| [glamorous](https://github.com/paypal/glamorous)

tag 4.13.1 star 3,607
| 4.12.5 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 1/183
download 795,853
|
| [hyperstyles](https://github.com/colingourlay/hyperstyles)

tag 3.3.1 star 52
| 3.3.0 | | ✓ | ✓ | | ✓ |
info 0/3
download 51
|
| [i-css](https://github.com/irom-io/i-css)

tag 1.2.0 star 2
| 1.0.4 | ✓ | ✓ | ✓ | ✓ | |
info 0/0
download 52
|
| [j2c](https://github.com/j2css/j2c)

tag 0.11.3 star 155
| 0.10.0 | | ✓ | ✓ | ✓ | ✓ |
info 8/24
download 613
|
| [jsxstyle](https://github.com/jsxstyle/jsxstyle)

tag 2.1.3 star 1,804
| 2.1.1 | | ✓ | ✓ | ✓ | ✓ |
info 12/75
download 3,174
|
| [linaria](https://github.com/callstack-io/linaria)

tag 0.5.0 star 351
| 0.5.0 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 21/62
download 349
|
| [nano-css](https://github.com/streamich/nano-css)

tag 2.0.2 star 51
| 0.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 15/3
download 682
|
| [pre-style](https://github.com/soluml/pre-style)

tag 1.0.9-alpha star 30
| 1.0.9-alpha | | ✓ | ✓ | | ✓ |
info 4/3
download 16
|
| [radium](https://github.com/FormidableLabs/radium)

tag 0.24.0 star 6,372
| 0.13.5 | ✓ | ✓ | ✓ | ✓ | |
info 84/475
download 857,067
|
| [react-css-builder](https://github.com/jhudson8/react-css-builder)

tag 0.2.0 star 20
| 0.2.0 | | | | ✓ | |
info 0/0
download 5
|
| [react-css-components](https://github.com/andreypopp/react-css-components)

tag 1.0.1 star 701
| 0.6.9 | | ✓ | ✓ | | ✓ |
info 5/9
download 40
|
| [react-css-modules](https://github.com/gajus/react-css-modules)

tag 4.7.3 star 4,641
| 3.0.2 | | ✓ | ✓ | | ✓ |
info 47/152
download 172,299
|
| [react-cssom](https://github.com/mbasso/react-cssom)

tag 1.0.0 star 54
| 1.0.0 | | ✓ | ✓ | | ✓ |
info 0/0
download 5
|
| [react-fela](https://github.com/rofrischmann/fela/tree/master/packages/react-fela)

tag 6.1.8 star 1,402
| 2.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 18/274
download 24,191
|
| [react-free-style](https://github.com/blakeembrey/react-free-style)

tag 7.0.2 star 119
| 0.6.0 | | ✓ | ✓ | ✓ | ✓ |
info 0/19
download 154
|
| [react-inline-css](https://github.com/RickWong/react-inline-css)

tag 2.3.1 star 165
| 1.2.0 | | ✓ | ✓ | | |
info 6/12
download 10,718
|
| [react-inline-style](https://github.com/dowjones/react-inline-style)

tag 0.1.0 star 45
| 0.1.0 | ✓ | ✓ | ✓ | ✓ | |
info 1/0
download 4
|
| [react-inline](https://github.com/martinandert/react-inline)

tag 0.8.2 star 452
| 0.6.3 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 3/0
download 121
|
| [react-jss](https://github.com/jsstyles/react-jss)

tag 8.6.0 star 928
| 2.0.5 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 17/180
download 431,995
|
| [react-look](https://github.com/rofrischmann/react-look)

tag 1.0.1 star 598
| 0.6.1 | ✓ | ✓ | ✓ | ✓ | |
info 14/0
download 77
|
| [react-native-web](https://github.com/necolas/react-native-web)

tag 0.8.6 star 9,653
| 0.0.11 | ✓ | | | ✓ | ✓ |
info 21/739
download 51,794
|
| [react-statics-styles](https://github.com/elierotenberg/react-statics-styles)

tag 3.1.0 star 25
| 3.0.2 | | ✓ | | ✓ | ✓ |
info 0/0
download 12
|
| [react-styl](https://github.com/nick/react-styl)

tag 0.0.3 star 42
| 0.0.1 | | ✓ | ✓ | | |
info 0/0
download 62
|
| [react-style](https://github.com/js-next/react-style)

tag 0.5.5 star 1,687
| 0.5.5 | | | ✓ | ✓ | ✓ |
info 34/65
download 1,500
|
| [react-styleable](https://github.com/pluralsight/react-styleable)

tag 3.3.0 star 197
| 1.4.0 | | ✓ | ✓ | | ✓ |
info 1/5
download 1,087
|
| [react-stylematic](https://github.com/rtsao/react-stylematic)

tag 1.1.0 star 19
| 1.0.1 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 1/0
download 1,957
|
| [react-theme](https://github.com/azazdeaz/react-theme)

tag 0.1.4 star 65
| 0.1.4 | | | | ✓ | |
info 0/0
download 483
|
| [react-vstyle](https://github.com/fdecampredon/react-vstyle)

tag 0.1.0 star 19
| 0.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 0/0
download 6
|
| [reactcss](https://github.com/casesandberg/reactcss)

tag 1.2.3 star 1,498
| 0.3.2 | ✓ | | | ✓ | |
info 4/43
download 545,864
|
| [restyles](https://github.com/tkh44/restyles)

tag 2.0.1 star 47
| 2.0.1 | ✓ | ✓ | ✓ | ✓ | |
info 1/1
download 17
|
| [scope-styles](https://github.com/rtsao/scope-styles)

tag 0.6.0 star 23
| 0.6.0 | | ✓ | ✓ | ✓ | ✓ |
info 7/6
download 1,354
|
| [smart-css](https://github.com/hackhat/smart-css)

tag 1.1.1 star 73
| 1.1.1 | | ✓ | ✓ | ✓ | |
info 4/3
download 12
|
| [stile](https://github.com/bloodyowl/stile)

tag 3.1.0 star 19
___________________________
[react-media-queries](https://github.com/bloodyowl/react-media-queries)

tag 2.0.1 star 65
| 2.0.0 | ✓ | | ✓ | ✓ | |
info 1/3
download 21
____________
info 1/2
download 22
|
| [stilr](https://github.com/kodyl/stilr)

tag 1.3.0 star 236
| 1.1.0 | | ✓ | ✓ | ✓ | ✓ |
info 5/18
download 148
|
| [stylable](https://github.com/wix/stylable)

tag 5.4.9 star 728
| 5.0.2 | | ✓ | ✓ | | ✓ |
info 62/114
download 9,275
|
| [style-it](https://github.com/buildbreakdo/style-it)

tag 2.0.0 star 92
| 1.2.9 | | ✓ | ✓ | | |
info 1/25
download 2,686
|
| [styled-components](https://github.com/styled-components/styled-components)

tag 3.3.3 star 17,306
| 3.2.6 | ✓ | ✓ | ✓ | | |
info 104/1092
download 1,085,338
|
| [styled-jsx](https://github.com/zeit/styled-jsx)

tag 2.2.7 star 3,275
| 0.0.7 | ✓ | ✓ | ✓ | | ✓ |
info 21/284
download 186,617
|
| [styletron-react](https://github.com/rtsao/styletron)

tag 3.0.4 star 2,485
| 2.1.2 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 59/82
download 5,709
|
| [styling](https://github.com/andreypopp/styling)

tag 0.4.1 star 130
| 0.2.0 | | ✓ | | ✓ | ✓ |
info 5/2
download 49
|
| [superstyle](https://github.com/jxnblk/superstyle)

tag 1.0.0-1 star 31
| 1.0.0-1 | | | | ✓ | |
info 0/1
download 5
|
| [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/master/packages/hiccup-css)

tag 0.2.3 star 170
| 0.2.0 | ✓ | ✓ | ✓ | ✓ | ✓ |
info 5/14
download 537
|
| [typestyle](https://github.com/typestyle/typestyle)

tag 2.0.1 star 1,919
| 0.22.3 | | ✓ | ✓ | ✓ | ✓ |
info 15/151
download 23,530
|
| [uranium](https://github.com/tuckerconnelly/uranium)

tag 0.1.0 star 117
| 0.1.2 | | | ✓ | ✓ | |
info 3/6
download 6
|

> This list has been auto-updated ([?](https://github.com/albinotonnina/mmarkdown)) on August 8, 2018

## Testimonials

> ["Wow, this totally makes my week!"](https://twitter.com/dan_abramov/status/604260877622202368) - Dan Abramov

> ["nice compilation of css-in-js techniques"](https://twitter.com/tjholowaychuk/status/739812614239195136) - TJ Holowaychuk

[SurviveJS / Styling React](http://survivejs.com/webpack_react/styling_react/) by Juho Vepsäläinen

[The Case for CSS Modules](http://markdalgleish.github.io/presentation-the-case-for-css-modules) by Mark Dalgleish

[First Class Styles](https://markdalgleish.github.io/presentation-first-class-styles) by Mark Dalgleish

[Styling React.JS applications](https://www.youtube.com/watch?v=19gqsBc_Cx0) 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](webpage/src/data.json).
4. Rename `ReadmeSrc/.env_example` to `ReadmeSrc/.env` and set a [Github access token](https://github.com/settings/tokens) to retrieve data from Github.
5. Re-generate the data with: `cd ReadmeSrc && yarn && yarn update-data && yarn generate-readme`.