Benchmarking Styled Components

.babelrc

{
  "presets": ["es2015", "react"]
}

index.js

import React from 'react';
import { renderToString } from 'react-dom/server';
import styled, { ServerStyleSheet } from 'styled-components';
import { times, map, forOwn, range } from 'lodash';
import Benchmark from 'benchmark'

const Title = styled.h1`
  color: black;
  border: none;
  background: blue;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
`;

const fiftyStyles = () => {
  return map(range(0, 50), (i) => `border: ${i}px solid red;`).join("\n");
}

const TitleFifty = styled.h2`
  ${fiftyStyles()}
`;

const TitlePropBased = styled.h3`
  font-size: ${props => props.size}px;
  padding: ${props => props.padding}px;
  color: red;
  background: blue;
  font-size: 3px;
`;

// test 100 of the same Component with 5 styles
const testOne = () => {
  const sheet = new ServerStyleSheet();
  const Markup = () => {
    return (
      <div>
        ${times(100, (i) => <Title key={i} />)}
      </div>
    );
  }
  const rendered = renderToString(sheet.collectStyles(<Markup />));
  return { rendered, tags: sheet.getStyleTags() };;
}

// test 1000 of the same component with 5 styles
const testTwo = () => {
  const sheet = new ServerStyleSheet();
  const Markup = () => {
    return (
      <div>
        ${times(1000, (i) => <Title key={i} />)}
      </div>
    );
  }
  const rendered = renderToString(sheet.collectStyles(<Markup />));
  return { rendered, tags: sheet.getStyleTags() };
}

// test 100 of the same component with 50 styles
const testThree = () => {
  const sheet = new ServerStyleSheet();
  const Markup = () => {
    return (
      <div>
        ${times(100, (i) => <TitleFifty key={i} />)}
      </div>
    );
  }
  const rendered = renderToString(sheet.collectStyles(<Markup />));
  return { rendered, tags: sheet.getStyleTags() };
}

// test 1000 of the same component with 50 styles
const testFour = () => {
  const sheet = new ServerStyleSheet();
  const Markup = () => {
    return (
      <div>
        ${times(1000, (i) => <TitleFifty key={i} />)}
      </div>
    );
  }
  const rendered = renderToString(sheet.collectStyles(<Markup />));
  return { rendered, tags: sheet.getStyleTags() };
}

// test 100 of a component with two props based style
const testFive = () => {
  const sheet = new ServerStyleSheet();
  const Markup = () => {
    return (
      <div>
        ${times(100, (i) => <TitlePropBased key={i} size={i*2} padding={i*5} />)}
      </div>
    );
  }
  const rendered = renderToString(sheet.collectStyles(<Markup />));
  return { rendered, tags: sheet.getStyleTags() };
}

// test 1000 of a component with two props based style
const testSix = () => {
  const sheet = new ServerStyleSheet();
  const Markup = () => {
    return (
      <div>
        ${times(1000, (i) => <TitlePropBased key={i} size={i*2} padding={i*5} />)}
      </div>
    );
  }
  const rendered = renderToString(sheet.collectStyles(<Markup />));
  return { rendered, tags: sheet.getStyleTags() };
}

const suite = new Benchmark.Suite;

suite
  .add('100 components with static 5 styles', testOne)
  .add('1000 components with static 5 styles', testTwo)
  .add('100 components with static 50 styles', testThree)
  .add('1000 components with static 50 styles', testFour)
  .add('100 components with two props based style / 5', testFive)
  .add('1000 components with two props based style / 5', testSix)
  .on('complete', (event) => {
    forOwn(suite, (v, k) => {
      if (v && v.stats) {
        console.log(v.name, 'mean', v.stats.mean, 'stdv', v.stats.deviation);
      }
    })
  }).run({ async: false });

output.txt

yarn run v1.3.2
$ npm run build && node dist/index.js

> benchmark-styled-components@1.0.0 build /Users/lukewilliams/work/benchmark-styled-components
> rm -rf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files

index.js -> dist/index.js
Over 200 classes were generated for component styled.h3. 
Consider using the attrs method, together with a style object for frequently changed styles.
Example:
  const Component = styled.div.attrs({
    style: ({ background }) => ({
      background,
    }),
  })`width: 100%;`

  <Component />
100 components with static 5 styles mean 0.001709675255213306 stdv 0.00025789126898979653
1000 components with static 5 styles mean 0.018434308964285714 stdv 0.0033942280871298567
100 components with static 50 styles mean 0.0028023097390851995 stdv 0.00034907145447717243
1000 components with static 50 styles mean 0.029217939438405796 stdv 0.0036846281054033637
100 components with two props based style / 5 mean 0.00409941579067718 stdv 0.0006526140325849037
1000 components with two props based style / 5 mean 0.03507380244117647 stdv 0.003975867496245029
✨  Done in 34.35s.

package.json

{
  "name": "benchmark-styled-components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files",
    "start": "npm run build && node dist/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-react": "^6.24.1",
    "benchmark": "^2.1.4",
    "lodash": "^4.17.4",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "styled-components": "^2.2.3"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}