Merge pull request #20 from PhiLhoSoft/PLS-view-results

View results

Author: PepijnSenders

.gitignore

@@ -41,3 +41,4 @@ jspm_packages
 
 
 lib
+output

README.md

@@ -1,14 +1,14 @@
-# CSS-in-js Performance tests
+# CSS-in-JS Performance Tests
 
-Testing a couple of CSS in JS libraries, check [the source folder](./src/cases) for the different tests.
+Testing a couple of CSS-in-JS libraries, check [the source folder](./src/) for the different tests.
 
-And read why we did these tests [here](https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea).
+And read why we did these tests in the [CSS-in-JS Battle](https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea) article.
 
 ## Usage
 
 You can clone this repository, `npm install` and run `npm run bench` to run the tests yourself.
 
-To set the amount of iterations you can set an environment variable called `ITERATIONS`. This will result in: `ITERATIONS=100 npm run bench`.
+To set the amount of iterations (see below) you can set an environment variable called `ITERATIONS`. This will result in: `ITERATIONS=100 npm run bench`.
 
 > Make sure you have Node6 or higher installed as well.
 
@@ -38,7 +38,7 @@ Hardware:
 
 ## Results
 
-The first test is just a simple render test, generate 2 class names, one for a container and one for a button.
+The first test is just a simple render test, generates two classes, one for a container and one for a button.
 
 ```
 Running simple test.
@@ -53,7 +53,6 @@ jss length 447
 jss-without-preset length 443
 styletron length 366
 
-
   aphrodite          x  9,421 ops/sec ±11.15% (61 runs sampled)
   cxs                x 21,834 ops/sec ±9.34% (65 runs sampled)
   cxs-optimized      x 17,377 ops/sec ±3.65% (76 runs sampled)
@@ -67,7 +66,7 @@ styletron length 366
 Fastest is: fela
 ```
 
-The second test overloads on styles, so it adds `n (ITERATIONS)` amount of different styles for the button.
+The second test overloads on styles, so it adds `n (ITERATIONS)` amount of different styles with a common part for the buttons. Show which libraries can detect the common part and isolate it.
 
 ```
 Running styles overload test.
@@ -81,7 +80,6 @@ cxs-optimized length 2337
 styletron length 1370
 fela length 1349
 
-  8 tests completed.
 
   aphrodite          x  1,446 ops/sec ±2.55% (69 runs sampled)
   jss                x  3,160 ops/sec ±2.85% (75 runs sampled)
@@ -95,7 +93,7 @@ fela length 1349
 Fastest is: fela,styletron
 ```
 
-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.
+The third test overloads on classes, 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 identical.
 
 ```
 Running classes overload test.
@@ -124,7 +122,7 @@ styletron length 960
 Fastest is: fela
 ```
 
-The fourth test is about media queries and pseudo-styles.
+The fourth test is about media queries and pseudo-styles with nested style objects.
 
 ```
 Running nested test.
@@ -155,6 +153,8 @@ Fastest is: styletron
 
 ### Bundle sizes
 
+Launch with `npm run bundle`.
+
 ```
 Size styletron 2.652KB
 Size cxs 9.766KB
@@ -166,6 +166,68 @@ Size glamor 35.436KB
 Size aphrodite 18.919KB
 ```
 
+### View generated code
+
+Launch with `npm run view`.
+
+Find the generated HTML files with their embeded CSS for each test in the `output` directory.
+
+Some observations:
+
+For all of them, class name is stable between generations if same content. Unless said otherwise, the generated CSS is minimized.
+
+#### aphrodite
+
+(simple) Removes a non-used class. Generates class names like `original-name_1fm03kj`. Adds `!important` to each CSS property, but this can be deactivated.
+(style overload) Different classes with a common style are kept as is.
+(classes overload) Doesn't detect identical classes that remain duplicate.
+(nested) Manages pseudo-classes and media queries.
+
+#### cxs and cxs-optimized
+
+(simple) Doesn't remove a non-used class. Generates class names like `cxs-4211614354`.
+(style overload) Different classes with a common style are kept as is. Minimized CSS.
+(classes overload) Detects identical classes that are merged.
+(nested) Manages pseudo-classes and media queries.
+
+cxs-optimized can generate some specialized classes (with names like `cxs-display-block` or `cxs-text-align-center`) removed from the classes using these styles and added to elements using them. Seems limited to properties with a small number of possible values. Named colors are not deduplicated.
+
+#### fela
+
+(simple) Removes a non-used class. Generates class names like `a`, `b`, `c`. Each class has one property only, they are merged at element level.
+(style overload) Styles common to several classes go to classes added to all corresponding elements.
+(classes overload) Detects identical classes that are merged.
+(nested) Manages pseudo-classes and media queries.
+
+#### free-style
+
+(simple) Doesn't remove a non-used class. Generates class names like `f1lzwo7y`.
+(style overload) Different classes with a common style are kept as is.
+(classes overload) Detects identical classes that are merged.
+(nested) Manages pseudo-classes and media queries.
+
+#### glamor
+
+(simple) Doesn't remove a non-used class. Generates class names like `css-h433f4`. Add selectors like `[data-css-h433f4]`.
+(style overload) Different classes with a common style are kept as is.
+(classes overload) Detects identical classes that are merged.
+(nested) Manages pseudo-classes and media queries. Adds selectors like `css-1u8v7v4[data-simulate-hover]`.
+
+#### jss and jss-without-preset
+
+(simple) Doesn't remove a non-used class. Generates class names like `original-name-3553477605`. CSS is formatted and indented (1 space).
+(style overload) Different classes with a common style are kept as is.
+(classes overload) Doesn't detect identical classes that remain duplicate.
+(nested) Manages pseudo-classes and media queries.
+
+#### styletron
+
+(simple) Doesn't remove a non-used class. Generates class names like `a`, `b`, `c`. Each class has one property only, they are merged at element level (starts with a space).
+(style overload) Styles common to several classes go to classes added to all corresponding elements.
+(classes overload) Detects identical classes that are merged.
+(nested) Manages pseudo-classes and media queries.
+
+
 <p align="center">
   <a href="https://hellofresh.com">
     <img width="120" src="https://www.hellofresh.de/images/hellofresh/press/HelloFresh_Logo.png">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "css-in-js-perf-tests",
   "version": "1.0.0",
-  "description": "Performance tests for CSS-in-js libraries",
+  "description": "Performance tests for CSS-in-JS libraries",
   "scripts": {
     "compile": "rimraf lib/ && babel src/ --out-dir lib",
     "bench:simple-test": "node lib/simple-test",
@@ -10,6 +10,11 @@
     "bench:classes-overload-test": "node lib/classes-overload-test",
     "bench": "npm run compile && npm run bench:simple-test && npm run bench:nested-test && npm run bench:style-overload-test && npm run bench:classes-overload-test",
     "bundle": "babel-node src/size-test",
+    "view:simple-test": "node lib/simple-test/view.js",
+    "view:nested-test": "node lib/nested-test/view.js",
+    "view:style-overload-test": "node lib/style-overload-test/view.js",
+    "view:classes-overload-test": "node lib/classes-overload-test/view.js",
+    "view": "rimraf output/ && npm run view:simple-test && npm run view:nested-test && npm run view:style-overload-test && npm run view:classes-overload-test",
     "lint": "eslint src/"
   },
   "repository": {
@@ -34,6 +39,7 @@
     "glamor": "^2.18.2",
     "jss": "^5.5.6",
     "jss-camel-case": "^2.0.2",
+    "jss-nested": "^2.5.0",
     "jss-preset-default": "^0.8.0",
     "rimraf": "^2.5.4",
     "styletron-client": "^2.1.1",

src/classes-overload-test/cases/aphrodite.js

@@ -1,24 +1,17 @@
 import { StyleSheet, css as aphroditeCss, StyleSheetServer, StyleSheetTestUtils } from 'aphrodite';
 import { stylesheet, buttonClassNames } from '../styles';
-import { renderHtml } from '../render';
+import { renderHtml, renderBody } from '../render';
 
-export const aphroditeCase = () => {
+export const aphroditeCase = (caseName) => {
     const useStyles = StyleSheet.create(stylesheet);
 
     const getButtonClassName = i => aphroditeCss(useStyles[buttonClassNames[i]]);
 
     const { html, css } = StyleSheetServer.renderStatic(() => {
-        return renderHtml(aphroditeCss(useStyles.container), getButtonClassName);
+        return renderBody(caseName, aphroditeCss(useStyles.container), getButtonClassName);
     });
 
     StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
 
-    return `
-        <html>
-            <head>
-                <style type="text/css">${css.content}</style>
-            </head>
-            <body>${html}</body>
-        </html>
-    `;
+    return renderHtml(css.content, html);
 };

src/classes-overload-test/cases/cxs-optimized.js

@@ -1,23 +1,15 @@
 import cxs from 'cxs/optimized';
 import { containerStyle, buttonStyles } from '../styles';
-import { renderHtml } from '../render';
-
-export const cxsOptimizedCase = () => {
+import { renderHtml, renderBody } from '../render';
 
+export const cxsOptimizedCase = (caseName) => {
     const getButtonClassName = i => cxs(buttonStyles[i]);
 
-    const html = renderHtml(cxs(containerStyle), getButtonClassName);
+    const html = renderBody(caseName, cxs(containerStyle), getButtonClassName);
 
     const { css } = cxs;
 
     cxs.reset();
 
-    return `
-        <html>
-            <head>
-                <style type="text/css">${css}</style>
-            </head>
-            <body>${html}</body>
-        </html>
-    `;
+    return renderHtml(css, html);
 };

src/classes-overload-test/cases/cxs.js

@@ -1,23 +1,15 @@
 import cxs from 'cxs';
 import { containerStyle, buttonStyles } from '../styles';
-import { renderHtml } from '../render';
-
-export const cxsCase = () => {
+import { renderHtml, renderBody } from '../render';
 
+export const cxsCase = (caseName) => {
     const getButtonClassName = i => cxs(buttonStyles[i]);
 
-    const html = renderHtml(cxs(containerStyle), getButtonClassName);
+    const html = renderBody(caseName, cxs(containerStyle), getButtonClassName);
 
     const { css } = cxs;
 
     cxs.reset();
 
-    return `
-        <html>
-            <head>
-                <style type="text/css">${css}</style>
-            </head>
-            <body>${html}</body>
-        </html>
-    `;
+    return renderHtml(css, html);
 };

src/classes-overload-test/cases/fela.js

@@ -1,21 +1,14 @@
 import { createRenderer } from 'fela';
-import { renderHtml } from '../render';
 import { containerStyle, buttonStyles } from '../styles';
+import { renderHtml, renderBody } from '../render';
 
-export const felaCase = () => {
+export const felaCase = (caseName) => {
   const renderer = createRenderer();
 
   const getButtonClassName = i => renderer.renderRule(() => buttonStyles[i]);
 
-  const html = renderHtml(renderer.renderRule(() => containerStyle), getButtonClassName);
+  const html = renderBody(caseName, renderer.renderRule(() => containerStyle), getButtonClassName);
   const css = renderer.renderToString();
 
-  return `
-        <html>
-            <head>
-                <style type="text/css">${css}</style>
-            </head>
-            <body>${html}</body>
-        </html>
-    `;
+    return renderHtml(css, html);
 };

src/classes-overload-test/cases/free-style.js

@@ -1,22 +1,15 @@
 import FreeStyle from 'free-style';
 import { containerStyle, buttonStyles } from '../styles';
-import { renderHtml } from '../render';
+import { renderHtml, renderBody } from '../render';
 
-export const freeStyleCase = () => {
+export const freeStyleCase = (caseName) => {
     const Style = FreeStyle.create();
 
     const getButtonClassName = i => Style.registerStyle(buttonStyles[i]);
 
-    const html = renderHtml(Style.registerStyle(containerStyle), getButtonClassName);
+    const html = renderBody(caseName, Style.registerStyle(containerStyle), getButtonClassName);
 
     const css = Style.getStyles();
 
-    return `
-        <html>
-            <head>
-                <style type="text/css">${css}</style>
-            </head>
-            <body>${html}</body>
-        </html>
-    `;
+    return renderHtml(css, html);
 };

src/classes-overload-test/cases/glamor.js

@@ -1,24 +1,17 @@
 import { renderStatic } from 'glamor/server';
 import { style, flush } from 'glamor';
-import { renderHtml } from '../render';
 import { containerStyle, buttonStyles } from '../styles';
+import { renderHtml, renderBody } from '../render';
 
-export const glamorCase = () => {
+export const glamorCase = (caseName) => {
 
     const getButtonClassName = i => style(buttonStyles[i]);
 
     const { html, css } = renderStatic(() =>
-        renderHtml(style(containerStyle), getButtonClassName)
+        renderBody(caseName, style(containerStyle), getButtonClassName)
     );
 
     flush();
 
-    return `
-        <html>
-            <head>
-                <style type="text/css">${css}</style>
-            </head>
-            <body>${html}</body>
-        </html>
-    `;
+    return renderHtml(css, html);
 };

src/classes-overload-test/cases/jss-without-preset.js

@@ -1,25 +1,18 @@
 import { create } from 'jss';
 import camelCase from 'jss-camel-case';
-import { renderHtml } from '../render';
 import { stylesheet, buttonClassNames } from '../styles';
+import { renderHtml, renderBody } from '../render';
 
-export const jssWithoutPresetCase = () => {
+export const jssWithoutPresetCase = (caseName) => {
     const jss = create();
     jss.use(camelCase());
 
     const { classes } = jss.createStyleSheet(stylesheet).attach();
 
     const getButtonClassName = i => classes[buttonClassNames[i]];
 
-    const html = renderHtml(classes.container, getButtonClassName);
+    const html = renderBody(caseName, classes.container, getButtonClassName);
     const css = jss.sheets.toString();
 
-    return `
-        <html>
-            <head>
-                <style type="text/css">${css}</style>
-            </head>
-            <body>${html}</body>
-        </html>
-    `;
+    return renderHtml(css, html);
 };