feat(hypostyle): update hypostyle, add compose

Updates to latest API for better usability, adds compose for better DX

index.js

@@ -2,25 +2,50 @@ const { h } = require('hyposcript')
 const { hypostyle } = require('hypostyle')
 const presets = require('hypostyle/presets')
 
-let context = hypostyle(presets)
+let hypo = hypostyle(presets)
 
-function configure (hypo) {
- context = hypo
+function configure (instance) {
+ hypo = instance
 }
 
-function Box ({ as = 'div', className = '', css, ...props }) {
- const cleaned = context.pick(props)
+function Box ({ as = 'div', className = '', cx, ...props }) {
+ const cleaned = hypo.pick(props)
 
  return h(as, {
- className: [className, context.css(cleaned.styles), css && context.css(css)]
+ className: [
+ className,
+ hypo.css({
+ ...cleaned.styles,
+ ...hypo.explode(cx || {})
+ })
+ ]
  .filter(Boolean)
  .map(s => s.trim())
  .join(' '),
  ...cleaned.props
  })
 }
 
+function compose (as, styles) {
+ return (props, ref) => {
+ const cleaned = hypo.pick(props)
+
+ const p = {
+ ...cleaned.props,
+ cx: {
+ // explode everything to allow for overrides
+ ...hypo.explode(styles),
+ ...hypo.explode(cleaned.styles),
+ ...hypo.explode(props.cx || {})
+ }
+ }
+
+ return typeof as !== 'string' ? h(as, p) : h(Box, { as, ...p })
+ }
+}
+
 module.exports = {
  configure,
- Box
+ Box,
+ compose
 }

package.json

@@ -34,6 +34,8 @@
  "commitizen": "^4.2.1",
  "cz-conventional-changelog": "^3.3.0",
  "husky": "^4.2.5",
+ "hyposcript": "^1.0.2",
+ "hypostyle": "^3.0.0",
  "nodemon": "^2.0.4",
  "prettier-standard": "^16.4.1",
  "semantic-release": "^17.2.1"
@@ -46,5 +48,6 @@
  "commitizen": {
  "path": "./node_modules/cz-conventional-changelog"
  }
- }
+ },
+ "dependencies": {}
 }