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.
    Конвейеры
    0 успешных
    0 с ошибкой