Merge branch 'master' into allow-falsy-rules

package.json

@@ -15,10 +15,6 @@
   "keywords": [],
   "author": "Brent Jackson",
   "license": "MIT",
-  "dependencies": {
-    "objss": "^1.0.3",
-    "tag-hoc": "^1.0.0-0"
-  },
   "devDependencies": {
     "ava": "^0.21.0",
     "babel-cli": "^6.24.1",

src/component.js

@@ -4,7 +4,10 @@ const cxs = require('./index')
 
 module.exports = C => (...args) => {
   const Comp = (props, context = {}) => {
-    const stylePropKeys = Object.keys(Comp.propTypes || {})
+    const stylePropKeys = [
+      ...Object.keys(Comp.propTypes || {}),
+      'css'
+    ]
     const styleProps = Object.assign({ theme: context.theme || {} }, props)
 
     const next = {}
@@ -17,6 +20,7 @@ module.exports = C => (...args) => {
       ...args.map(a => typeof a === 'function' ? a(styleProps) : a)
         .filter(s => !!s)
         .map(s => cxs(s))
+      cxs(props.css || {})
     ].join(' ').trim()
 
     return h(C, next)

src/index.js

@@ -1,4 +1,5 @@
 let cache = {}
+let prefix = 'x'
 const rules = []
 let insert = rule => rules.push(rule)
 const hyph = s => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase()
@@ -17,7 +18,7 @@ const parse = (obj, child = '', media) =>
     }
     const _key = key + val + child + media
     if (cache[_key]) return cache[_key]
-    const className = 'x' + (rules.length).toString(36)
+    const className = prefix + (rules.length).toString(36)
     insert(mx(rx(className + noAnd(child), key, val), media))
     cache[_key] = className
     return className
@@ -35,6 +36,8 @@ module.exports.reset = () => {
   while (rules.length) rules.pop()
 }
 
+module.exports.prefix = val => prefix = val
+
 if (typeof document !== 'undefined') {
   const sheet = document.head.appendChild(
     document.createElement('style')

test/component.js

@@ -44,3 +44,8 @@ test('removes props defined as propTypes', t => {
   t.snapshot(json)
 })
 
+test('accepts css prop', t => {
+  const C = cxs('div')()
+  const json = render(<C css={{ color: 'tomato' }} />).toJSON()
+  t.snapshot(json)
+})

test/cxs.js

@@ -3,6 +3,7 @@ import cxs from '../src'
 
 test.afterEach.always(() => {
   cxs.reset()
+  cxs.prefix('x')
 })
 
 test('exports a function', t => {
@@ -119,3 +120,13 @@ test('media rules stay in order', t => {
   t.regex(css, /^\.x0/)
   t.regex(css, /@media/)
 })
+
+test('cxs.prefix is a function', t => {
+  t.is(typeof cxs.prefix, 'function' )
+})
+
+test('uses custom prefix', t => {
+  cxs.prefix('_cxs')
+  cxs({ color: 'tomato' })
+  t.is(cxs.css(), '._cxs0{color:tomato}')
+})

test/snapshots/component.js.md

@@ -32,4 +32,12 @@ Generated by [AVA](https://ava.li).
 
     <div
       className="x1"
-    />
+    /
+
+## accepts css prop
+
+> Snapshot 1
+
+    <div
+      className="x0"
+    />