From e84656771a91de89d8f0201e51523a1fb9cc676b Mon Sep 17 00:00:00 2001
From: estrattonbailey <ericstrattonbailey@gmail.com>
Date: Mon, 8 Feb 2021 19:44:43 -0600
Subject: [PATCH] feat(hypostyle v2): update hypostyle to v2

BREAKING CHANGE: customization now requires user to pass an entire hypostyle instance and interact
with hypostyle directly, otherwise API is pretty similar
---
 index.js           | 105 +++-----------------------------------
 package-lock.json  |  50 ++++++++++++++++--
 package.json       |   2 +-
 test/index.test.js | 124 ++++++++++++++-------------------------------
 4 files changed, 95 insertions(+), 186 deletions(-)

diff --git a/index.js b/index.js
index a39852c..3d05f28 100644
--- a/index.js
+++ b/index.js
@@ -1,103 +1,18 @@
 const { h } = require('hyposcript')
 const { hypostyle } = require('hypostyle')
-const defaults = require('hypostyle/presets/default')
+const presets = require('hypostyle/presets')
 
-const { create } = require('nano-css')
-const { addon: cache } = require('nano-css/addon/cache')
-const { addon: nesting } = require('nano-css/addon/nesting')
-const { addon: keyframes } = require('nano-css/addon/keyframes')
-const { addon: rule } = require('nano-css/addon/rule')
-const { addon: globalAddon } = require('nano-css/addon/global')
+let context = hypostyle(presets)
 
-let nano = createNano()
-let context = hypostyle(defaults)
-
-function createNano () {
-  const nano = create()
-
-  cache(nano)
-  nesting(nano)
-  keyframes(nano)
-  rule(nano)
-  globalAddon(nano)
-
-  return nano
-}
-
-function configure (props) {
-  const tokens = {
-    ...defaults.tokens,
-    ...(props.tokens || {})
-  }
-  const theme = {
-    tokens,
-    shorthands: {
-      ...defaults.shorthands,
-      ...(props.shorthands || {})
-    },
-    macros: {
-      ...defaults.macros,
-      ...(props.macros || {})
-    },
-    variants: {
-      ...defaults.variants,
-      ...(props.variants || {})
-    }
-  }
-
-  context = {
-    theme,
-    ...hypostyle(theme)
-  }
-}
-
-function css (style) {
-  return nano.rule(context.css(style))
+function configure (hypo) {
+  context = hypo
 }
 
-function injectGlobal (style) {
-  return nano.global(context.css(style))
-}
-
-function flush () {
-  context = {
-    theme: context.theme,
-    ...hypostyle(context.theme)
-  }
-
-  const raw = nano.raw
-
-  nano = createNano()
-
-  return raw
-}
-
-function Box ({
-  as = 'div',
-  class: cn = '',
-  className: cN = '',
-  css: block,
-  ...props
-}) {
-  const { css: parseHypostyle, pick, theme } = context
-
-  const cleaned = pick(props)
-  const styles = Object.keys(cleaned.styles || {}).length
-    ? parseHypostyle(cleaned.styles)
-    : undefined
-  const blockStyles = block
-    ? parseHypostyle(
-        typeof block === 'function' ? block(theme.tokens) : block || {}
-      )
-    : undefined
+function Box ({ as = 'div', className = '', css, ...props }) {
+  const cleaned = context.pick(props)
 
   return h(as, {
-    class: [
-      cn || '',
-      cN || '',
-      styles && css(styles),
-      blockStyles && css(blockStyles)
-    ]
+    className: [className, context.css(cleaned.styles), css && context.css(css)]
       .filter(Boolean)
       .map(s => s.trim())
       .join(' '),
@@ -107,9 +22,5 @@ function Box ({
 
 module.exports = {
   configure,
-  Box,
-  css,
-  injectGlobal,
-  keyframes: nano.keyframes,
-  flush
+  Box
 }
diff --git a/package-lock.json b/package-lock.json
index 79ddc56..7e2a002 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4198,9 +4198,45 @@
       "integrity": "sha512-QSzW27kpgmXaCw6SBDhAWrdGILR3kfsa02L+RMiXwue/VzyZSEKVL3YojvUK8TM70HbD7qLhpg2rmioJofRqOQ=="
     },
     "hypostyle": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hypostyle/-/hypostyle-1.0.0.tgz",
-      "integrity": "sha512-gbsEhxny4PDIzCfwnoYCICa53yeGnQb314egSVE1wxoKygrzmSEzjpnl7qsAeffID8+OcY8jUbRdD8vNEnr69Q=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/hypostyle/-/hypostyle-2.3.0.tgz",
+      "integrity": "sha512-YBEiJ93cUochhQh0u1brQ1opwh5Fvc9x9VZ5y9Jdv/7UWKhKzdR1Z0iQdvifbJ4OcHsIb9Yf55C+ydD0DDzO1Q==",
+      "requires": {
+        "csstype": "^3.0.6",
+        "nano-css": "^5.3.1"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+        },
+        "fastest-stable-stringify": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+          "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+        },
+        "nano-css": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.1.tgz",
+          "integrity": "sha512-ENPIyNzANQRyYVvb62ajDd7PAyIgS2LIUnT9ewih4yrXSZX4hKoUwssy8WjUH++kEOA5wUTMgNnV7ko5n34kUA==",
+          "requires": {
+            "css-tree": "^1.1.2",
+            "csstype": "^3.0.6",
+            "fastest-stable-stringify": "^2.0.2",
+            "inline-style-prefixer": "^6.0.0",
+            "rtl-css-js": "^1.14.0",
+            "sourcemap-codec": "^1.4.8",
+            "stacktrace-js": "^2.0.2",
+            "stylis": "^4.0.6"
+          }
+        },
+        "stylis": {
+          "version": "4.0.7",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.7.tgz",
+          "integrity": "sha512-OFFeUXFgwnGOKvEXaSv0D0KQ5ADP0n6g3SVONx6I/85JzNZ3u50FRwB3lVIk1QO2HNdI75tbVzc4Z66Gdp9voA=="
+        }
+      }
     },
     "iconv-lite": {
       "version": "0.4.24",
@@ -4296,6 +4332,14 @@
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
       "dev": true
     },
+    "inline-style-prefixer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz",
+      "integrity": "sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==",
+      "requires": {
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "inquirer": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
diff --git a/package.json b/package.json
index 884715a..795ce60 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "hyposcript": "^1.0.1",
-    "hypostyle": "^1.0.0",
+    "hypostyle": "^2.3.0",
     "nano-css": "^5.3.0"
   },
   "config": {
diff --git a/test/index.test.js b/test/index.test.js
index a97e072..de77865 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -1,117 +1,71 @@
 /* eslint-disable no-unused-expressions */
 const { h } = require('hyposcript')
-const { Box, configure, flush, injectGlobal } = require('../')
+const { hypostyle } = require('hypostyle')
+const presets = require('hypostyle/presets')
+
+const { Box, configure } = require('../')
 
 module.exports = (test, assert) => {
   test('no styles', () => {
-    const html = <Box />
-    assert(/class=""/.test(html))
-  })
-
-  test('base', () => {
-    const html = <Box o={1} style={{ background: 'blue' }} />
-    const css = flush()
+    const hypo = hypostyle()
 
-    assert(/order:1/.test(css))
-    assert(/style.+background/.test(html))
-  })
-
-  test('configure custom tokens', () => {
-    configure({
-      tokens: {
-        color: {
-          r: 'red' // custom value
-        }
-      }
-    })
-    ;<div>
-      <Box c='blue' />
-      <Box c='r' />
-    </div>
+    configure(hypo)
 
-    const css = flush()
+    const html = <Box />
 
-    assert(/color:blue/.test(css))
-    assert(/color:red/.test(css))
+    assert(/class=""/.test(html))
   })
 
-  test('macros', () => {
-    configure({
-      macros: {
-        short: {
-          color: '#ff4567'
-        }
-      }
-    })
-    ;<Box f short />
-
-    const css = flush()
-
-    assert(/display:flex/.test(css))
-    assert(/color:#ff4567/.test(css))
-  })
+  test('base, pick', () => {
+    const hypo = hypostyle(presets)
 
-  test('variants', () => {
-    configure({
-      variants: {
-        type: {
-          primary: {
-            color: '#ff4567'
-          }
-        }
-      }
-    })
-    ;<Box type='primary' />
+    configure(hypo)
 
-    const css = flush()
+    const html = <Box o={1} style={{ background: 'blue' }} />
+    const sheet = hypo.flush()
 
-    assert(/color:#ff4567/.test(css))
+    assert(/order:1/.test(sheet))
+    assert(/style.+background/.test(html))
   })
 
   test('with as', () => {
-    const html = <Box as='img' src='' />
-
-    assert(/img.+src/.test(html))
-  })
-
-  test('css', () => {
-    ;<Box css={{ c: 'blue' }} />
-
-    const css = flush()
-    assert(/color:blue/.test(css))
-  })
-
-  test('css with media query', () => {
-    ;<Box css={{ maxWidth: [1, 1 / 2, 1 / 3] }} />
+    const hypo = hypostyle(presets)
 
-    const css = flush()
-    assert(/@media(.|\n)+max-width:33.33/.test(css))
-  })
+    configure(hypo)
 
-  test('css as fn', () => {
-    ;<Box css={tokens => ({ pt: tokens.space[1] + 'px' })} />
+    const html = <Box as='img' src='' />
 
-    const css = flush()
-    assert(/padding-top:4px/.test(css))
+    assert(/img.+src/.test(html))
   })
 
-  test('class', () => {
-    const html = <Box class='foo' w={10} />
+  test('className', () => {
+    const hypo = hypostyle(presets)
 
-    assert(/foo\s/.test(html))
-  })
+    configure(hypo)
 
-  test('className', () => {
     const html = <Box className='foo' w={10} />
 
     assert(/foo\s/.test(html))
   })
 
-  test('injectGlobal', () => {
-    injectGlobal({ '.global': { c: 'blue' } })
+  test('configure', () => {
+    const hypo = hypostyle({
+      ...presets,
+      tokens: {
+        color: {
+          b: 'blue'
+        }
+      }
+    })
+
+    hypo.css(tokens => ({
+      color: tokens.color.blue
+    }))
 
-    const css = flush()
+    configure(hypo)
+    ;<Box className='foo' c='blue' />
+    const sheet = hypo.flush()
 
-    assert(/global(.|\n)+color:blue/.test(css))
+    assert(/color:blue/.test(sheet))
   })
 }