[![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)

_2.2.2 _4,175

| 1.2.3 | ✓ | ✓ | ✓ | ✓ | ✓ |

_63/133

_358,386

| | [babel-plugin-css-in-js](https://github.com/martinandert/babel-plugin-css-in-js)

_1.5.1 ₂₅₉

| 1.2.2 | ✓ | ✓ | ✓ | ✓ | ✓ |

_6/12

₄₀₈

| | [babel-plugin-pre-style](https://github.com/soluml/babel-plugin-pre-style)

_1.5.1 ₂₅₉

| 1.0.9-alpha | | ✓ | ✓ | ✓ | ✓ |

_6/12

₄₀₈

| | [bloody-react-styled](https://github.com/bloodyowl/react-styled)

_0.0.5 ₃₅

| 3.0.0 | | ✓ | ✓ | | |

_1/2

₁₂

| | [classy](https://github.com/inturn/classy)

_1.4.10 ₂₂

| 0.3.0 | | ✓ | ✓ | ✓ | |

_0/0

₈₈

| | [csjs](https://github.com/rtsao/csjs)

_1.1.0 ₅₁₆

| 1.0.0 | | ✓ | ✓ | | |

_22/25

_1,827

| | [css-constructor](https://github.com/siddharthkp/css-constructor)

_0.1.7 ₉₀

| 0.1.1 | ✓ | ✓ | ✓ | | |

_4/2

₆₅

| | [css-light](https://github.com/streamich/css-light)

_1.1.0 ₂

| 1.1.0 | | ✓ | ✓ | ✓ | ✓ |

_1/0

₅₄

| | [css-loader](https://github.com/webpack/css-loader)

_0.28.11 _2,770

| 0.15.6 | | ✓ | ✓ | | ✓ |

_59/496

_7,442,704

| | [css-ns](https://github.com/jareware/css-ns)

_1.2.1 ₁₀₇

| 1.0.0 | | ✓ | ✓ | | ✓ |

_1/1

₃₁₃

| | [cssobj](https://github.com/cssobj/cssobj)

_1.3.6 ₂₂₁

| 0.2.21 | ✓ | ✓ | ✓ | ✓ | |

_2/12

₂₀₅

| | [cssx](https://github.com/krasimir/cssx)

_5.2.1 ₉₉₈

| 3.8.0 | ✓ | ✓ | ✓ | | ✓ |

_10/14

₃₁₄

| | [cxs](https://github.com/cxs-css/cxs)

_6.2.0 ₈₉₆

| 6.2.0 | | ✓ | ✓ | ✓ | ✓ |

_18/20

_2,940

| | [electron-css](https://github.com/azukaar/electron-css)

_0.6.0 ₂

| 0.6.0 | | ✓ | ✓ | ✓ | |

_0/0

₁₃₅

| | [emotion](https://github.com/tkh44/emotion)

_9.2.4 _4,101

| 6.0.3 | ✓ | ✓ | ✓ | ✓ | ✓ |

_73/306

_260,249

| | [es-css-modules](https://github.com/jacobp100/es-css-modules)

_1.2.4 ₁₅₁

| 1.2.3 | | ✓ | ✓ | | ✓ |

_1/2

₁₁₆

| | [freestyler](https://github.com/streamich/freestyler)

_3.1.0 ₁₂₁

| 1.5.0 | ✓ | ✓ | ✓ | ✓ | |

_12/0

₂₁₂

| | [glamor](https://github.com/threepointone/glamor)

_2.20.40 _3,196

| 2.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |

_79/206

_842,621

| | [glamorous](https://github.com/paypal/glamorous)

_4.13.1 _3,607

| 4.12.5 | ✓ | ✓ | ✓ | ✓ | ✓ |

_1/183

_795,853

| | [hyperstyles](https://github.com/colingourlay/hyperstyles)

_3.3.1 ₅₂

| 3.3.0 | | ✓ | ✓ | | ✓ |

_0/3

₅₁

| | [i-css](https://github.com/irom-io/i-css)

_1.2.0 ₂

| 1.0.4 | ✓ | ✓ | ✓ | ✓ | |

_0/0

₅₂

| | [j2c](https://github.com/j2css/j2c)

_0.11.3 ₁₅₅

| 0.10.0 | | ✓ | ✓ | ✓ | ✓ |

_8/24

₆₁₃

| | [jsxstyle](https://github.com/jsxstyle/jsxstyle)

_2.1.3 _1,804

| 2.1.1 | | ✓ | ✓ | ✓ | ✓ |

_12/75

_3,174

| | [linaria](https://github.com/callstack-io/linaria)

_0.5.0 ₃₅₁

| 0.5.0 | ✓ | ✓ | ✓ | ✓ | ✓ |

_21/62

₃₄₉

| | [nano-css](https://github.com/streamich/nano-css)

_2.0.2 ₅₁

| 0.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |

_15/3

₆₈₂

| | [pre-style](https://github.com/soluml/pre-style)

_1.0.9-alpha ₃₀

| 1.0.9-alpha | | ✓ | ✓ | | ✓ |

_4/3

₁₆

| | [radium](https://github.com/FormidableLabs/radium)

_0.24.0 _6,372

| 0.13.5 | ✓ | ✓ | ✓ | ✓ | |

_84/475

_857,067

| | [react-css-builder](https://github.com/jhudson8/react-css-builder)

_0.2.0 ₂₀

| 0.2.0 | | | | ✓ | |

_0/0

₅

| | [react-css-components](https://github.com/andreypopp/react-css-components)

_1.0.1 ₇₀₁

| 0.6.9 | | ✓ | ✓ | | ✓ |

_5/9

₄₀

| | [react-css-modules](https://github.com/gajus/react-css-modules)

_4.7.3 _4,641

| 3.0.2 | | ✓ | ✓ | | ✓ |

_47/152

_172,299

| | [react-cssom](https://github.com/mbasso/react-cssom)

_1.0.0 ₅₄

| 1.0.0 | | ✓ | ✓ | | ✓ |

_0/0

₅

| | [react-fela](https://github.com/rofrischmann/fela/tree/master/packages/react-fela)

_6.1.8 _1,402

| 2.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |

_18/274

_24,191

| | [react-free-style](https://github.com/blakeembrey/react-free-style)

_7.0.2 ₁₁₉

| 0.6.0 | | ✓ | ✓ | ✓ | ✓ |

_0/19

₁₅₄

| | [react-inline-css](https://github.com/RickWong/react-inline-css)

_2.3.1 ₁₆₅

| 1.2.0 | | ✓ | ✓ | | |

_6/12

_10,718

| | [react-inline-style](https://github.com/dowjones/react-inline-style)

_0.1.0 ₄₅

| 0.1.0 | ✓ | ✓ | ✓ | ✓ | |

_1/0

₄

| | [react-inline](https://github.com/martinandert/react-inline)

_0.8.2 ₄₅₂

| 0.6.3 | ✓ | ✓ | ✓ | ✓ | ✓ |

_3/0

₁₂₁

| | [react-jss](https://github.com/jsstyles/react-jss)

_8.6.0 ₉₂₈

| 2.0.5 | ✓ | ✓ | ✓ | ✓ | ✓ |

_17/180

_431,995

| | [react-look](https://github.com/rofrischmann/react-look)

_1.0.1 ₅₉₈

| 0.6.1 | ✓ | ✓ | ✓ | ✓ | |

_14/0

₇₇

| | [react-native-web](https://github.com/necolas/react-native-web)

_0.8.6 _9,653

| 0.0.11 | ✓ | | | ✓ | ✓ |

_21/739

_51,794

| | [react-statics-styles](https://github.com/elierotenberg/react-statics-styles)

_3.1.0 ₂₅

| 3.0.2 | | ✓ | | ✓ | ✓ |

_0/0

₁₂

| | [react-styl](https://github.com/nick/react-styl)

_0.0.3 ₄₂

| 0.0.1 | | ✓ | ✓ | | |

_0/0

₆₂

| | [react-style](https://github.com/js-next/react-style)

_0.5.5 _1,687

| 0.5.5 | | | ✓ | ✓ | ✓ |

_34/65

_1,500

| | [react-styleable](https://github.com/pluralsight/react-styleable)

_3.3.0 ₁₉₇

| 1.4.0 | | ✓ | ✓ | | ✓ |

_1/5

_1,087

| | [react-stylematic](https://github.com/rtsao/react-stylematic)

_1.1.0 ₁₉

| 1.0.1 | ✓ | ✓ | ✓ | ✓ | ✓ |

_1/0

_1,957

| | [react-theme](https://github.com/azazdeaz/react-theme)

_0.1.4 ₆₅

| 0.1.4 | | | | ✓ | |

_0/0

₄₈₃

| | [react-vstyle](https://github.com/fdecampredon/react-vstyle)

_0.1.0 ₁₉

| 0.1.0 | ✓ | ✓ | ✓ | ✓ | ✓ |

_0/0

₆

| | [reactcss](https://github.com/casesandberg/reactcss)

_1.2.3 _1,498

| 0.3.2 | ✓ | | | ✓ | |

_4/43

_545,864

| | [restyles](https://github.com/tkh44/restyles)

_2.0.1 ₄₇

| 2.0.1 | ✓ | ✓ | ✓ | ✓ | |

_1/1

₁₇

| | [scope-styles](https://github.com/rtsao/scope-styles)

_0.6.0 ₂₃

| 0.6.0 | | ✓ | ✓ | ✓ | ✓ |

_7/6

_1,354

| | [smart-css](https://github.com/hackhat/smart-css)

_1.1.1 ₇₃

| 1.1.1 | | ✓ | ✓ | ✓ | |

_4/3

₁₂

| | [stile](https://github.com/bloodyowl/stile)

_3.1.0 ₁₉

___________________________

[react-media-queries](https://github.com/bloodyowl/react-media-queries)

_2.0.1 ₆₅

| 2.0.0 | ✓ | | ✓ | ✓ | |

_1/3

₂₁

____________

_1/2

₂₂

| | [stilr](https://github.com/kodyl/stilr)

_1.3.0 ₂₃₆

| 1.1.0 | | ✓ | ✓ | ✓ | ✓ |

_5/18

₁₄₈

| | [stylable](https://github.com/wix/stylable)

_5.4.9 ₇₂₈

| 5.0.2 | | ✓ | ✓ | | ✓ |

_62/114

_9,275

| | [style-it](https://github.com/buildbreakdo/style-it)

_2.0.0 ₉₂

| 1.2.9 | | ✓ | ✓ | | |

_1/25

_2,686

| | [styled-components](https://github.com/styled-components/styled-components)

_3.3.3 _17,306

| 3.2.6 | ✓ | ✓ | ✓ | | |

_104/1092

_1,085,338

| | [styled-jsx](https://github.com/zeit/styled-jsx)

_2.2.7 _3,275

| 0.0.7 | ✓ | ✓ | ✓ | | ✓ |

_21/284

_186,617

| | [styletron-react](https://github.com/rtsao/styletron)

_3.0.4 _2,485

| 2.1.2 | ✓ | ✓ | ✓ | ✓ | ✓ |

_59/82

_5,709

| | [styling](https://github.com/andreypopp/styling)

_0.4.1 ₁₃₀

| 0.2.0 | | ✓ | | ✓ | ✓ |

_5/2

₄₉

| | [superstyle](https://github.com/jxnblk/superstyle)

_1.0.0-1 ₃₁

| 1.0.0-1 | | | | ✓ | |

_0/1

₅

| | [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/master/packages/hiccup-css)

_0.2.3 ₁₇₀

| 0.2.0 | ✓ | ✓ | ✓ | ✓ | ✓ |

_5/14

₅₃₇

| | [typestyle](https://github.com/typestyle/typestyle)

_2.0.1 _1,919

| 0.22.3 | | ✓ | ✓ | ✓ | ✓ |

_15/151

_23,530

| | [uranium](https://github.com/tuckerconnelly/uranium)

_0.1.0 ₁₁₇

| 0.1.2 | | | ✓ | ✓ | |

_3/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`.