https://github.com/a-gambit/css-in-js-benchmarks

https://github.com/a-gambit/css-in-js-benchmarks

aphrodite benchmark calculations css css-in-js glam glamor glamorous inline-styles js jss radium react styld styled-components styled-jss styled-jsx styletron

Last synced: 13 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/a-gambit/css-in-js-benchmarks
• Owner: A-gambit
• License: apache-2.0
• Created: 2017-04-23T15:19:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T06:49:21.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T21:46:55.301Z (7 months ago)
• Topics: aphrodite, benchmark, calculations, css, css-in-js, glam, glamor, glamorous, inline-styles, js, jss, radium, react, styld, styled-components, styled-jss, styled-jsx, styletron
• Language: JavaScript
• Size: 3.47 MB
• Stars: 381
• Watchers: 13
• Forks: 62
• Open Issues: 48
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# CSS in JS Benchmarks

## Big Table

![gif](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/img.gif)

Big Table examples, use:

- react + css

- aphrodite

- glamorous

- glam

- fela

- react-jss

- radium

- react-native-web

- rockey

- styled-components

- styled-jsx

- styletron

- etc

Average results are [here](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md).

New demos and benchmarks will be soon :)

## Contribution

Here is a little contributing guild:

- Use `node` version `^7.9` (i.e. use `7.9` or newer, but not as new as `8`)

- Install `lerna` and `yarn` (optional)

- `lerna bootstrap` or `lerna bootstrap --npm-client=yarn` - install deps in packages

- `npm i`

- `lerna run build` - make builds for all packages

1. Create an appropriate folder for your CSS in JS new implementation. Use [react](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/tree/master/packages/big-table/react) as example of boilerplate.

2. Add description for your CSS in JS in package.json. [Example](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/packages/big-table/aphrodite/package.json#L33-L37)

3. Add your solution for [Table.js](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/packages/big-table/react/client/Table.js) file.

4. Run benchmarks: `npm run benchmark`. To tun tests for specific packageor - `npm run benchmark -- rockey styled-jss radium`

Add your favorite CSS in JS implementation!

Your contributions and suggestions are heartily welcome. =^.^=