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

_{2.2.2 4,175}

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

_63/133

_358,386

| | babel-plugin-css-in-js

_{1.5.1 259}

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

_6/12

₄₀₈

| | babel-plugin-pre-style

_{1.5.1 259}

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

_6/12

₄₀₈

| | bloody-react-styled

_{0.0.5 35}

| 3.0.0 | | ✓ | ✓ | | |

_1/2

₁₂

| | classy

_{1.4.10 22}

| 0.3.0 | | ✓ | ✓ | ✓ | |

_0/0

₈₈

| | csjs

_{1.1.0 516}

| 1.0.0 | | ✓ | ✓ | | |

_22/25

_1,827

| | css-constructor

_{0.1.7 90}

| 0.1.1 | ✓ | ✓ | ✓ | | |

_4/2

₆₅

| | css-light

_{1.1.0 2}

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

_1/0

₅₄

| | css-loader

_{0.28.11 2,770}

| 0.15.6 | | ✓ | ✓ | | ✓ |

_59/496

_7,442,704

| | css-ns

_{1.2.1 107}

| 1.0.0 | | ✓ | ✓ | | ✓ |

_1/1

₃₁₃

| | cssobj

_{1.3.6 221}

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

_2/12

₂₀₅

| | cssx

_{5.2.1 998}

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

_10/14

₃₁₄

| | cxs

_{6.2.0 896}

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

_18/20

_2,940

| | electron-css

_{0.6.0 2}

| 0.6.0 | | ✓ | ✓ | ✓ | |

_0/0

₁₃₅

| | emotion

_{9.2.4 4,101}

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

_73/306

_260,249

| | es-css-modules

_{1.2.4 151}

| 1.2.3 | | ✓ | ✓ | | ✓ |

_1/2

_{<img src="./ReadmeSrc/i}