Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 14 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
- awesome-css-in-js - A-gambit/CSS-IN-JS-Benchmarks - gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md) (基准测试)
- awesome-list - CSS-IN-JS-Benchmarks - gambit | 367 | (JavaScript)
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
- etcAverage 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 packages1. 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. =^.^=