bench: add initial benchmarks

TODO.md

@@ -2,7 +2,6 @@
 
   - Docs Repo @luke
   - Small Landing Page @luke
-  - Presets Issue @sastan
   - Examples
     - vanilla, svelte, preact, react, vue @luke
     - deploy to unpkg

benchmarks/README.md

@@ -0,0 +1,31 @@
+# Benchmarks
+
+> Run `yarn install`
+
+The following benchmarks are available:
+
+- `yarn bench css`: benchmark [`css()` function](https://emotion.sh/docs/@emotion/css)
+
+  ```
+  # Object Styles
+  tw: tw-14pys1e
+  otion: _1r5gb7q _17egndr _1cw4hmo _9gfcjl _vdgfbm _1qsuvl4 _1y5pc60 _1osl5h8 _807wit _sv3kep _ol9ofu _eeqxny _1uim63f _1aq9rcw _twccl2 _jwtbbb
+  goober: go1683933151
+  emotion: css-nr9dlk
+  twind x 997,210 ops/sec ±0.66% (91 runs sampled)
+  otion@0.6.2 x 52,671 ops/sec ±0.53% (96 runs sampled)
+  goober@2.0.18 x 125,558 ops/sec ±0.51% (92 runs sampled)
+  emotion@11.0.0 x 159,011 ops/sec ±0.89% (95 runs sampled)
+
+  Fastest is: twind
+
+  # Template Literal Styles
+  tw: inline-block rounded py-2 my-2 mx-4 w-44 bg-transparent text-white border-2 border-solid border-white hover:text-black focus:border-2 focus:border-dashed focus:border-black text-sm md:text-base lg:text-lg
+  goober: go3227344850
+  emotion: css-du3o4a
+  twind x 43,500 ops/sec ±0.70% (96 runs sampled)
+  goober@2.0.18 x 144,038 ops/sec ±0.70% (95 runs sampled)
+  emotion@11.0.0 x 224,263 ops/sec ±0.51% (97 runs sampled)
+
+  Fastest is: emotion@11.0.0
+  ```

benchmarks/css.ts

@@ -0,0 +1,174 @@
+/* eslint-env node */
+import Benchmark from 'benchmark'
+
+import { tw } from '../src'
+
+import { css as otion } from 'otion'
+import { version as otionVersion } from 'otion/package.json'
+
+import { css as goober } from 'goober'
+import { version as gooberVersion } from 'goober/package.json'
+
+import { css as emotion } from '@emotion/css'
+import { version as emotionVersion } from '@emotion/css/package.json'
+
+// Run the benchmarks
+;(async function run() {
+  await objectStyles()
+  await templateLiteralStyles()
+})().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
+
+function objectStyles(): Promise<void> {
+  const color = 'black'
+
+  const styles = () => ({
+    display: 'inline-block',
+    borderRadius: '3px',
+    padding: '0.5rem 0',
+    margin: '0.5rem 1rem',
+    width: '11rem',
+    background: 'transparent',
+    color: 'white',
+    border: '2px solid white',
+
+    '&:hover': {
+      color,
+    },
+
+    '&:focus': {
+      border: '2px dashed black',
+    },
+
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+
+    '@media (min-width: 768px)': {
+      fontSize: '1rem',
+      lineHeight: '1.5rem',
+    },
+
+    '@media (min-width: 1280px)': {
+      fontSize: '1.125rem',
+      lineHeight: '1.75rem',
+    },
+  })
+
+  console.log('# Object Styles')
+  console.log('tw:', tw(styles))
+  console.log('otion:', otion(styles()))
+  console.log('goober:', goober(styles()))
+  console.log('emotion:', emotion(styles()))
+
+  return new Promise((resolve, reject) => {
+    new Benchmark.Suite('Object Styles')
+      .add('twind', () => tw(styles))
+      .add(`otion@${otionVersion}`, () => otion(styles()))
+      .add(`goober@${gooberVersion}`, () => goober(styles()))
+      .add(`emotion@${emotionVersion}`, () => emotion(styles()))
+      .on('error', reject)
+      .on('cycle', function (event) {
+        console.log(String(event.target))
+      })
+      .on('complete', function () {
+        const fastest = this.filter('fastest').map('name')[0]
+        console.log('')
+        console.log('Fastest is: ' + fastest)
+        console.log('')
+        resolve()
+      })
+      .run()
+  })
+}
+
+function templateLiteralStyles(): Promise<void> {
+  const color = 'black'
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const styles = (impl: (template: TemplateStringsArray, ...args: any[]) => string): string => impl`
+    display: inline-block;
+    border-radius: 3px;
+    padding: 0.5rem 0;
+    margin: 0.5rem 1rem;
+    width: 11rem;
+    background: transparent;
+    color: white;
+    border: 2px solid white;
+    &:hover {
+      color: ${color};
+    }
+    &:focus {
+      border: 2px dashed black;
+    }
+
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    @media (min-width: 768px) {
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+
+    @media (min-width: 1280px) {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  `
+
+  console.log('# Template Literal Styles')
+  console.log(
+    'tw:',
+    tw`
+      inline-block
+      rounded
+      py-2
+      my-2 mx-4
+      w-44
+      bg-transparent
+      text-white
+      border(2 solid white)
+      hover:text(${color})
+      focus:border(2 dashed black)
+      text(sm md:base lg:lg)
+    `,
+  )
+  console.log('goober:', styles(goober))
+  console.log('emotion:', styles(emotion))
+
+  return new Promise((resolve, reject) => {
+    new Benchmark.Suite('Template Literal')
+      .add(
+        'twind',
+        () =>
+          tw`
+            inline-block
+            rounded
+            py-2
+            my-2 mx-4
+            w-44
+            bg-transparent
+            text-white
+            border(2 solid white)
+            hover:text(${color})
+            focus:border(2 dashed black)
+            text(sm md:base lg:lg)
+          `,
+      )
+      .add(`goober@${gooberVersion}`, () => styles(goober))
+      .add(`emotion@${emotionVersion}`, () => styles(emotion))
+      .on('error', reject)
+      .on('cycle', function (event) {
+        console.log(String(event.target))
+      })
+      .on('complete', function () {
+        const fastest = this.filter('fastest').map('name')[0]
+        console.log('')
+        console.log('Fastest is: ' + fastest)
+        console.log('')
+        resolve()
+      })
+      .run()
+  })
+}

benchmarks/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "name": "benchmarks",
+  "scripts": {
+    "bench": "node -r esm -r esbuild-register"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.0.0",
+    "@types/benchmark": "^2.1.0",
+    "benchmark": "^2.1.4",
+    "goober": "^2.0.18",
+    "otion": "^0.6.2",
+    "styled-components": "^5.2.1"
+  }
+}