Merge pull request #19 from mmartinsky/master

add support for prop value in mapToTheme

README.md

@@ -171,6 +171,27 @@ const Button = styled.button`
 
 `styled-map` will then look at the Button's `type` prop for a matching value.
 
+This also works in `mapToTheme`:
+```js
+import styledMap, { mapToTheme as theme } from 'styled-map';
+
+const myTheme = {
+  buttonColor: {
+    primary: 'orange',
+    warning: 'red',
+    info: 'blue',
+    default: 'white',
+  },
+  ...
+};
+
+const Button = styled.button`
+  color: ${theme('buttonColor', 'kind')};
+`;
+
+<Button kind='warning'>Click</Button> // will be red
+```
+
 **Note: This currently doesn't work doesn't work with the pseudo-CSS syntax. This functionality should arrive by v4.0. PRs welcome!**:
 
 ## Typings

lib/index.js

@@ -68,7 +68,7 @@ export const _dotProp = (string, object) => string
   .split('.')
   .reduce((acc, key) => acc[key], object);
 
-export const mapToTheme = (key) => 
-  (props) => styledMap(_dotProp(key, props.theme));
+export const mapToTheme = (key, prop) =>
+  (props) => prop ? styledMap(prop, _dotProp(key, props.theme)) : styledMap(_dotProp(key, props.theme));
 
 export default styledMap;

lib/index.test.js

@@ -144,6 +144,12 @@ describe('mapToTheme', () => {
     });
     expect(result).toEqual(_dotProp('button.foreground.primary', nestedTheme));
   });
+  it('uses the prop value when passed a second argument', () => {
+    const result = mapToTheme('buttonColor', 'kind')({theme})({
+      kind: 'other'
+    });
+    expect(result).toEqual('#aab');
+  })
 });
 
 describe('_convertToObject', () => {

types.d.ts

@@ -1,5 +1,5 @@
 declare const styledMap: (...params: any[]) => (props: any) => any;
 
-export const mapToTheme: (key: string) => (props: any) => any;
+export const mapToTheme: (key: string, prop?: string) => (props: any) => any;
 
 export default styledMap;