Add monocomponent

Author: jxnblk

package.json

@@ -72,7 +72,11 @@
     },
     {
       "path": "./dist/component.js",
-      "maxSize": "0.6 kb"
+      "maxSize": "0.7 kb"
+    },
+    {
+      "path": "./dist/monolithic.js",
+      "maxSize": "1.0 kb"
     }
   ]
 }

src/monocomponent.js

@@ -0,0 +1,36 @@
+const h = require('react').createElement
+const PropTypes = require('prop-types')
+const cxs = require('./monolithic')
+
+module.exports = C => (...args) => {
+  const Comp = (props, context = {}) => {
+    const stylePropKeys = Object.keys(Comp.propTypes || {})
+    const styleProps = Object.assign({ theme: context.theme || {} }, props)
+
+    const next = {}
+    for (let key in props) {
+      if (stylePropKeys.includes(key)) continue
+      next[key] = props[key]
+    }
+    next.className = [
+      next.className,
+      ...args.map(a => typeof a === 'function' ? a(styleProps) : a)
+        .filter(s => s !== null)
+        .map(s => cxs(s))
+    ].join(' ').trim()
+
+    return h(C, next)
+  }
+
+  Comp.contextTypes = {
+    theme: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.func
+    ])
+  }
+
+  return Comp
+}
+
+module.exports.css = cxs.css
+module.exports.reset = cxs.reset

src/monolithic.js

@@ -2,12 +2,10 @@ let cache = {}
 let prefix = '_cxs'
 const cssRules = []
 let insert = rule => cssRules.push(rule)
+
 const hyph = s => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase()
 const mx = (rule, media) => media ? `${media}{${rule}}` : rule
-const rx = (cn, prop, val) => `.${cn}{${hyph(prop)}:${val}}`
 const noAnd = s => s.replace(/&/g, '')
-
-const isMedia = key => /^@/.test(key)
 const createDeclaration = (key, value) => hyph(key) + ':' + value
 const createRule = ({
   className,
@@ -26,7 +24,7 @@ const parseRules = (obj, child = '', media) => {
     if (value === null) continue
 
     if (typeof value === 'object') {
-      const _media = isMedia(key) ? key : null
+      const _media = /^@/.test(key) ? key : null
       const _child = _media ? child : child + noAnd(key)
       parseRules(value, _child, _media)
         .forEach(r => rules.push(r))

x.js

@@ -0,0 +1 @@
+module.exports = require('./dist/monocomponent')