Skip to content

Commit 689055c

Browse files
PepijnSendersPepijnSenders
committed
Clean up the repository
1 parent 94cc2bd commit 689055c

26 files changed

+165
-182
lines changed

Diff for: ‎.eslintrc

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"ecmaVersion": 2017,
3+
"extends": "eslint-config-airbnb",
4+
"env": {
5+
"node": true,
6+
"mocha": true,
7+
},
8+
"parser": "babel-eslint",
9+
"rules": {
10+
"indent": [
11+
2,
12+
4,
13+
{
14+
"SwitchCase": 1
15+
}
16+
],
17+
"import/prefer-default-export": 1
18+
}
19+
}

Diff for: ‎LICENSE.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 HelloFresh
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+52-38
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,79 @@
11
# CSS-in-js Performance tests
22

3-
Testing a couple of CSS in JS libraries, check [the source folder](./src/cases) for the different cases.
3+
Testing a couple of CSS in JS libraries, check [the source folder](./src/cases) for the different tests.
4+
5+
## Usage
6+
7+
You can clone this repository, `npm install` and run `npm run bench` to run the tests yourself.
8+
9+
To set the amount of iterations you can set an environment variable called `ITERATIONS`. This will result in: `ITERATIONS=100 npm run bench`.
10+
11+
## Results
12+
13+
The first test is just a simple render test, generate 2 class names, one for a container and one for a button.
414

515
```
616
Running simple test.
7-
aphroditeCase length 470
8-
jssCase length 447
9-
jssWithoutPresetCase length 439
10-
glamorCase length 422
11-
cxsCase length 400
12-
cxsOptimizedCase length 445
17+
aphrodite length 470
18+
jss length 447
19+
jss-without-preset length 439
20+
glamor length 422
21+
cxs length 400
22+
cxs-optimized length 445
1323
6 tests completed.
1424
15-
aphrodite x 12,126 ops/sec ±4.39% (75 runs sampled)
16-
jss x 23,232 ops/sec ±7.24% (74 runs sampled)
17-
jss-without-preset x 63,252 ops/sec ±3.49% (78 runs sampled)
18-
glamor x 9,635 ops/sec ±8.12% (72 runs sampled)
19-
cxs x 18,529 ops/sec ±17.52% (60 runs sampled)
20-
cxsOptimizedCase x 9,618 ops/sec ±18.01% (52 runs sampled)
25+
aphrodite x 8,943 ops/sec ±14.55% (68 runs sampled)
26+
jss x 11,697 ops/sec ±27.81% (55 runs sampled)
27+
jss-without-preset x 46,684 ops/sec ±7.89% (62 runs sampled)
28+
glamor x 5,042 ops/sec ±14.27% (47 runs sampled)
29+
cxs x 19,122 ops/sec ±10.24% (69 runs sampled)
30+
cxs-optimized x 12,843 ops/sec ±10.52% (69 runs sampled)
2131
2232
Fastest is: jss-without-preset
2333
```
2434

35+
The second test overloads on styles, so it adds `n (ITERATIONS)` amount of different styles for the button.
36+
2537
```
2638
Running styles overload test.
27-
aphroditeCase length 3594
28-
jssCase length 3509
29-
jssWithoutPresetCase length 3430
30-
glamorCase length 3298
31-
cxsCase length 3022
32-
cxsOptimizedCase length 3063
39+
aphrodite length 3594
40+
jss length 3509
41+
jss-without-preset length 3430
42+
glamor length 3298
43+
cxs length 3022
44+
cxs-optimized length 3063
3345
6 tests completed.
3446
35-
aphrodite x 1,353 ops/sec ±10.29% (65 runs sampled)
36-
jss x 2,768 ops/sec ±9.85% (66 runs sampled)
37-
jss-without-preset x 6,502 ops/sec ±6.01% (70 runs sampled)
38-
glamor x 1,095 ops/sec ±5.27% (70 runs sampled)
39-
cxs x 2,341 ops/sec ±5.75% (74 runs sampled)
40-
cxsOptimizedCase x 1,892 ops/sec ±3.65% (75 runs sampled)
47+
aphrodite x 853 ops/sec ±19.51% (54 runs sampled)
48+
jss x 2,200 ops/sec ±10.85% (66 runs sampled)
49+
jss-without-preset x 4,301 ops/sec ±17.48% (55 runs sampled)
50+
glamor x 665 ops/sec ±17.53% (56 runs sampled)
51+
cxs x 1,032 ops/sec ±24.12% (43 runs sampled)
52+
cxs-optimized x 743 ops/sec ±21.16% (45 runs sampled)
4153
4254
Fastest is: jss-without-preset
4355
```
4456

57+
The third test overloads on class names, so it adds `n (ITERATIONS)` amount of different class names with the same styles. This test is interesting to see which library actually merges these styles when they're similar.
58+
4559
```
4660
Running classes overload test.
47-
aphroditeCase length 3044
48-
jssCase length 3085
49-
jssWithoutPresetCase length 3064
50-
glamorCase length 1935
51-
cxsCase length 1943
52-
cxsOptimizedCase length 1943
61+
aphrodite length 3044
62+
jss length 3085
63+
jss-without-preset length 3064
64+
glamor length 1935
65+
cxs length 1943
66+
cxs-optimized length 1943
5367
6 tests completed.
5468
55-
aphrodite x 2,246 ops/sec ±4.07% (74 runs sampled)
56-
jss x 4,029 ops/sec ±5.32% (70 runs sampled)
57-
jss-without-preset x 5,942 ops/sec ±9.98% (58 runs sampled)
58-
glamor x 5,981 ops/sec ±8.86% (77 runs sampled)
59-
cxs x 3,736 ops/sec ±4.05% (75 runs sampled)
60-
cxsOptimizedCase x 3,191 ops/sec ±3.32% (77 runs sampled)
69+
aphrodite x 1,145 ops/sec ±23.06% (55 runs sampled)
70+
jss x 1,305 ops/sec ±31.53% (39 runs sampled)
71+
jss-without-preset x 2,723 ops/sec ±17.48% (38 runs sampled)
72+
glamor x 2,698 ops/sec ±18.00% (48 runs sampled)
73+
cxs x 1,697 ops/sec ±15.10% (46 runs sampled)
74+
cxs-optimized x 2,359 ops/sec ±7.45% (72 runs sampled)
6175
62-
Fastest is: glamor,jss-without-preset
76+
Fastest is: jss-without-preset,glamor
6377
```
6478

6579
### Bundle sizes

Diff for: ‎package.json

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
{
22
"name": "css-in-js-perf-tests",
33
"version": "1.0.0",
4-
"description": "",
5-
"main": "index.js",
4+
"description": "Performance tests for CSS-in-js libraries",
65
"scripts": {
76
"compile": "rimraf lib/ && babel src/ --out-dir lib",
87
"bench:simple-test": "node lib/simple-test",
98
"bench:style-overload-test": "node lib/style-overload-test",
109
"bench:classes-overload-test": "node lib/classes-overload-test",
1110
"bench": "npm run compile && npm run bench:simple-test && npm run bench:style-overload-test && npm run bench:classes-overload-test",
12-
"bundle": "NODE_ENV=production babel-node src/size-test"
11+
"bundle": "babel-node src/size-test",
12+
"lint": "eslint src/"
1313
},
1414
"repository": {
1515
"type": "git",
1616
"url": "git+https://github.com/PepijnSenders/css-in-js-perf-tests.git"
1717
},
1818
"keywords": [],
19-
"author": "",
20-
"license": "ISC",
19+
"author": "Pepijn Senders <[email protected]>",
20+
"license": "MIT",
2121
"bugs": {
2222
"url": "https://github.com/PepijnSenders/css-in-js-perf-tests/issues"
2323
},
24-
"homepage": "https://github.com/PepijnSenders/css-in-js-perf-tests#readme",
24+
"homepage": "https://github.com/PepijnSenders/css-in-js-perf-tests",
2525
"dependencies": {
2626
"aphrodite": "^1.1.0",
2727
"babel-loader": "^6.2.7",
@@ -38,7 +38,13 @@
3838
"babel": "^6.5.2",
3939
"babel-cli": "^6.18.0",
4040
"babel-core": "^6.18.2",
41+
"babel-eslint": "^7.1.1",
4142
"babel-preset-node6": "^11.0.0",
42-
"babel-preset-react": "^6.16.0"
43+
"babel-preset-react": "^6.16.0",
44+
"eslint": "^3.10.2",
45+
"eslint-config-airbnb": "^13.0.0",
46+
"eslint-plugin-import": "^2.2.0",
47+
"eslint-plugin-jsx-a11y": "^2.2.3",
48+
"eslint-plugin-react": "^6.7.1"
4349
}
4450
}

Diff for: ‎src/classes-overload-test/cases/aphrodite.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ export const aphroditeCase = () => {
77

88
const { html, css } = StyleSheetServer.renderStatic(() => {
99
const classNames = {};
10-
for (let className in useStyles) {
10+
11+
for (const className in useStyles) {
1112
classNames[className] = aphroditeCss(useStyles[className]);
1213
}
1314

Diff for: ‎src/classes-overload-test/cases/cxs-optimized.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const cxsOptimizedCase = () => {
66
const styles = generateStyles();
77

88
const classNames = {};
9-
for (let className in styles) {
9+
for (const className in styles) {
1010
classNames[className] = cxs(styles[className]);
1111
}
1212

Diff for: ‎src/classes-overload-test/cases/cxs.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const cxsCase = () => {
66
const styles = generateStyles();
77

88
const classNames = {};
9-
for (let className in styles) {
9+
for (const className in styles) {
1010
classNames[className] = cxs(styles[className]);
1111
}
1212

Diff for: ‎src/classes-overload-test/cases/glamor.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { renderHtml } from './render';
2-
import { generateStyles } from '../styles';
31
import { renderStatic } from 'glamor/server';
42
import { style, flush } from 'glamor';
3+
import { renderHtml } from './render';
4+
import { generateStyles } from '../styles';
55

66
export const glamorCase = () => {
77
const styles = generateStyles();
88

99
const classNames = {};
10-
for (let className in styles) {
10+
for (const className in styles) {
1111
classNames[className] = style(styles[className]);
1212
}
1313

1414
const { html, css } = renderStatic(() =>
15-
renderHtml(classNames)
15+
renderHtml(classNames),
1616
);
1717

1818
flush();

Diff for: ‎src/classes-overload-test/cases/jss-without-preset.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { create } from 'jss';
2-
import preset from 'jss-preset-default';
32
import { renderHtml } from './render';
43
import { generateStyles } from '../styles';
54

Diff for: ‎src/classes-overload-test/cases/render.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ITERATIONS } from '..';
22

3-
export const renderHtml = (classNames) => `
3+
export const renderHtml = classNames => `
44
<section class=${classNames.container}>
55
${(() => {
66
const buttons = [];

Diff for: ‎src/classes-overload-test/components/App.js

-21
This file was deleted.

Diff for: ‎src/classes-overload-test/components/Button.js

-5
This file was deleted.

Diff for: ‎src/classes-overload-test/index.js

+12-29
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,21 @@ export const ITERATIONS = process.env.ITERATIONS || 20;
77
export const run = () => {
88
console.log('Running classes overload test.');
99

10-
console.log('aphroditeCase length', aphroditeCase().length);
11-
console.log('jssCase length', jssCase().length);
12-
console.log('jssWithoutPresetCase length', jssWithoutPresetCase().length);
13-
console.log('glamorCase length', glamorCase().length);
14-
console.log('cxsCase length', cxsCase().length);
15-
console.log('cxsOptimizedCase length', cxsOptimizedCase().length);
10+
console.log('aphrodite length', aphroditeCase().length);
11+
console.log('jss length', jssCase().length);
12+
console.log('jss-without-preset length', jssWithoutPresetCase().length);
13+
console.log('glamor length', glamorCase().length);
14+
console.log('cxs length', cxsCase().length);
15+
console.log('cxs-optimized length', cxsOptimizedCase().length);
1616

1717
const jssSuite = new Suite();
1818

19-
jssSuite.add('aphrodite', () => {
20-
return aphroditeCase();
21-
});
22-
23-
jssSuite.add('jss', () => {
24-
return jssCase();
25-
});
26-
27-
jssSuite.add('jss-without-preset', () => {
28-
return jssWithoutPresetCase();
29-
});
30-
31-
jssSuite.add('glamor', () => {
32-
return glamorCase();
33-
});
34-
35-
jssSuite.add('cxs', () => {
36-
return cxsCase();
37-
});
38-
39-
jssSuite.add('cxsOptimizedCase', () => {
40-
return cxsOptimizedCase();
41-
});
19+
jssSuite.add('aphrodite', () => aphroditeCase());
20+
jssSuite.add('jss', () => jssCase());
21+
jssSuite.add('jss-without-preset', () => jssWithoutPresetCase());
22+
jssSuite.add('glamor', () => glamorCase());
23+
jssSuite.add('cxs', () => cxsCase());
24+
jssSuite.add('cxs-optimized', () => cxsOptimizedCase());
4225

4326
jssSuite.on('cycle', (e) => {
4427
beautifyBenchmark.add(e.target);

Diff for: ‎src/simple-test/cases/aphrodite.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const aphroditeCase = () => {
99
renderHtml({
1010
container: aphroditeCss(useStyles.container),
1111
button: aphroditeCss(useStyles.button),
12-
})
12+
}),
1313
);
1414

1515
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();

Diff for: ‎src/simple-test/cases/glamor.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { renderHtml } from './render';
2-
import { styles } from '../styles';
31
import { renderStatic } from 'glamor/server';
42
import { style, flush } from 'glamor';
3+
import { renderHtml } from './render';
4+
import { styles } from '../styles';
55

66
export const glamorCase = () => {
77
const classNames = {

Diff for: ‎src/simple-test/cases/jss-without-preset.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { create } from 'jss';
2-
import preset from 'jss-preset-default';
32
import { renderHtml } from './render';
43
import { styles } from '../styles';
54

Diff for: ‎src/simple-test/cases/render.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const renderHtml = (classNames) => `
1+
export const renderHtml = classNames => `
22
<section class=${classNames.container}>
33
<button class=${classNames.button}>Click me</button>
44
</section>

0 commit comments

Comments
 (0)