Permalink
Browse files

Add Aphrodite support

  • Loading branch information...
markdalgleish committed May 20, 2016
1 parent c0b47e4 commit 85f7c14c5b759faf8c808c2ce48166dc6734ef01
Showing with 66 additions and 9 deletions.
  1. +21 −1 README.md
  2. +14 −8 src/index.js
  3. +31 −0 test/index.js
View
@@ -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
View
@@ -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) };
};
};
View
@@ -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: {

0 comments on commit 85f7c14

Please sign in to comment.