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

@@ -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
 }

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": {

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))
  })
 }