x_team_css_in_js

X-Team CSS in JS Example: A comparison of CSS in JS libraries updated for 2018.

We compare several libraries:

Aphrodite
CXS
Emotion
Glamorous
JSS
Radium
Styled-Components
Styletron

Testing for:

    (1) Phantom.js page load performance
    (2) Phantom.js I/0 performance
    (3) live-server 'http' request performance - time to complete 1000 requests
    (4) Webpack 3.6 compile time
    (5) Webpack 3.6 bundle size

Running the Tests

Build Tests:

    $ npm run build-all
    $ npm run number-request
    $ npm run phantom-page
    $ npm run phantom-io

Unminified (Development):

Testing build time for development-like scenarios (time to rebuild/recompile on change):

Library	Vendor Size	App Size	First Run	Second Run	Third Run	Average Run
Aphrodite	938 KB	4.02 KB	4237 ms	5450 ms	4952 ms	4879.66 ms
CXS	858 KB	3.94 KB	4952 ms	5023 ms	5399 ms	5124.66 ms
Emotion	890 KB	4.26 KB	5093 ms	6322 ms	6015 ms	5810 ms
Glamorous	1.02 MB	3.96 KB	5029 ms	4911 ms	6406 ms	5448.66 ms
JSS	937 KB	4.08 KB	5816 ms	5383 ms	5967 ms	5722 ms
Radium	1.02 MB	6.04 KB	7495 ms	6416 ms	6210 ms	6707 ms
Styled-Components	990 KB	4.29 KB	6107 ms	5732 ms	5650 ms	5829.66 ms
Styletron	875 KB	4.07 KB	6029 ms	3597 ms	5649 ms	5091.66 ms

Build Time Winner: Aphrodite (4879.66 avg ms)
Vendor Dependencies Size Winner: CXS (858 KB)
App Size Winner: CXS (3.94 KB)
Overall Size Winner: CXS (861.94 KB)

Minified (Production):

Testing build time and size for production-like scenarios:

Library	Vendor Size	App Size	First Run	Second Run	Third Run	Average Run
Aphrodite	184 KB	1.76 KB	10890 ms	4952 ms	9653 ms	8498.33 ms
CXS	165 KB	1.74 KB	9806 ms	5399 ms	9895 ms	8366.66 ms
Emotion	179 KB	1.91 KB	10251 ms	6015 ms	10628 ms	8964.66 ms
Glamorous	230 KB	1.72 KB	13597 ms	6406 ms	12359 ms	10787.33 ms
JSS	197 KB	1.79 KB	11285 ms	5967 ms	11029 ms	9427 ms
Radium	230 KB	2.77 KB	11854 ms	6210 ms	12343 ms	10135.66 ms
Styled-Components	205 KB	1.91 KB	11800 ms	5650 ms	11178 ms	9542.66 ms
Styletron	179 KB	1.79 KB	10163 ms	5649 ms	10879 ms	8897 ms

Build Time Winner: CXS (8366.66 avg ms)
Vendor Dependencies Size Winner: CXS (165 KB)
App Size Winner: Glamorous (1.72 KB)
Overall Size Winner: CXS (166.74 KB)

live-server - Time To Complete 1000 Requests

In this test, we see how well the different frameworks hold-up against each other in high-use scenarios. We want to see how much throughput our server can handle given the choice of a particular CSS in JS framework (Please note that this is a test of server-side performance rather than client page-loading performance):

    $ npm run number-request

Library	First Run	Second Run	Third Run	Average Run
Aphrodite	3304 ms	3302 ms	3134 ms	3246.66 ms
CXS	2811 ms	2823 ms	2994 ms	2876 ms
Emotion	2606 ms	2732 ms	2756 ms	2698 ms
Glamorous	2716 ms	2524 ms	2572 ms	2604 ms
JSS	2681 ms	2585 ms	2657 ms	2641 ms
Radium	2783 ms	2573 ms	2942 ms	2766 ms
Styled-Components	2133 ms	2551 ms	2790 ms	2491.33 ms
Styletron	2479 ms	2457 ms	2582 ms	2506 ms

The Winner: Styled-Components (2491.33 avg ms)

Phantom.js - Page Load Performance

In this test, we'll be testing the time to execute a request and receive a response back from our test server. We want to see how fast we can request, render, and receive a production page when equipped with a particular CSS in JS framework:

    $ npm run phantom-page

Library	First Run	Second Run	Third Run	Average Run
Aphrodite	3121 ms	3016 ms	3230 ms	3122.33 ms
CXS	2995 ms	2983 ms	3133 ms	3037 ms
Emotion	3002 ms	3042 ms	2917 ms	2987 ms
Glamorous	2947 ms	3047 ms	2968 ms	2987.33 ms
JSS	2906 ms	3018 ms	3178 ms	3034 ms
Radium	3000 ms	2691 ms	3118 ms	2936.33 ms
Styled-Components	3012 ms	2873 ms	3075 ms	2986.66 ms
Styletron	3031 ms	3044 ms	2995 ms	3023.33 ms

The Winner: Radium (2936.33 avg ms)

Phantom.js - I/O Performance

To further quantify overall I/O performance, we'll also test the time to load each supplied index.html with all production assets this time using Phantom.js and combining the results with our previous build size:

    $ npm run phantom-io

Library	First Run	Second Run	Third Run	Average Run
Aphrodite	57.3864 KB/S	54.3953 KB/S	56.3250 KB/S	56.0355 KB/S
CXS	53.8044 KB/S	50.7116 KB/S	55.0842 KB/S	53.2000 KB/S
Emotion	57.6513 KB/S	57.6697 KB/S	56.1657 KB/S	57.1622 KB/S
Glamorous	75.1118 KB/S	72.2544 KB/S	85.9495 KB/S	77.7719 KB/S
JSS	62.8684 KB/S	65.2198 KB/S	73.8447 KB/S	67.3109 KB/S
Radium	77.0251 KB/S	79.8251 KB/S	71.2706 KB/S	76.0402 KB/S
Styled-Components	66.6591 KB/S	71.7441 KB/S	62.3222 KB/S	66.9084 KB/S
Styletron	59.7652 KB/S	61.8508 KB/S	62.3222 KB/S	61.3127 KB/S

The Winner: Glamorous (77.7719 avg KB/S)

Resources and Tributes

Updating

https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea

https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc

Testing Suite

https://github.com/tapio/live-server

http://phantomjs.org/quick-start.html

https://webpack.js.org/