Add Aphrodite support

README.md

@@ -10,7 +10,7 @@ Utility for making React components easily themeable.
 
 The React community is highly fragmented when it comes to styling. How do we write components that can happily co-exist with all of these competing approaches?
 
-With react-themeable, you can support custom themes provided by [CSS Modules](https://github.com/css-modules/css-modules), [Radium](http://projects.formidablelabs.com/radium/), [React Style](https://github.com/js-next/react-style), [JSS](https://github.com/jsstyles/jss), global CSS or inline styles as easily as this:
+With react-themeable, you can support custom themes provided by [CSS Modules](https://github.com/css-modules/css-modules), [Radium](http://projects.formidablelabs.com/radium/), [Aphrodite](https://github.com/Khan/aphrodite), [React Style](https://github.com/js-next/react-style), [JSS](https://github.com/jsstyles/jss), global CSS or inline styles as easily as this:
 
 ```js
 <MyComponent theme={theme} />
@@ -94,6 +94,26 @@ const ThemedMyComponent = Radium(MyComponent);
 <ThemedMyComponent theme={theme} />
 ```
 
+### Aphrodite
+
+```js
+import { StyleSheet, css } from 'aphrodite';
+
+const theme = StyleSheet.create({
+  foo: {
+    color: 'red',
+    ':hover': {
+      color: 'green'
+    }
+  },
+  bar: {
+    color: 'blue'
+  }
+});
+...
+<MyComponent theme={[ theme, css ]} />
+```
+
 ### React Style
 
 ```js

src/index.js

@@ -2,12 +2,18 @@ import assign from 'object-assign';
 
 const truthy = x => x;
 
-export default theme => (key, ...names) => {
-  const styles = names
-    .map(name => theme[name])
-    .filter(truthy);
-
-  return typeof styles[0] === 'string' ?
-    { key, className: styles.join(' ') } :
-    { key, style: assign({}, ...styles) };
+export default input => {
+  const [ theme, classNameDecorator ] = Array.isArray(input) && input.length === 2 ?
+    input :
+    [ input, null ];
+
+  return (key, ...names) => {
+    const styles = names
+      .map(name => theme[name])
+      .filter(truthy);
+
+    return typeof styles[0] === 'string' || typeof classNameDecorator === 'function' ?
+      { key, className: classNameDecorator ? classNameDecorator(...styles) : styles.join(' ') } :
+      { key, style: assign({}, ...styles) };
+  };
 };

test/index.js

@@ -31,6 +31,37 @@ describe('className', () => {
 
 });
 
+describe('styles with classname decorator (e.g. Aphrodite)', () => {
+  const classes = { foo: { color: 'red' }, bar: { color: 'blue' } };
+  const colorsToString = (...styles) => styles.map(x => x.color).join(' ');
+  const classTheme = themeable([classes, colorsToString]);
+
+  it('should return a single class', () => {
+    expect(classTheme(1, 'foo'))
+      .to.deep.equal({
+        key: 1,
+        className: 'red'
+      });
+  });
+
+  it('should return multiple classes', () => {
+    expect(classTheme(2, 'foo', 'bar'))
+      .to.deep.equal({
+        key: 2,
+        className: 'red blue'
+      });
+  });
+
+  it('should ignore falsy values', () => {
+    expect(classTheme(1, null, 'foo', undefined, false))
+      .to.deep.equal({
+        key: 1,
+        className: 'red'
+      });
+  });
+
+});
+
 describe('style', () => {
   const styles = {
     foo: {