Repository: tkh44/emotion (js)

Issue:
Dynamic composes values based on props
I want to support choosing what to compose with based on props.

```javascript
const Alert = styled('div')`
  composes: ${props => types[props.type]};
  padding: 10px;
`
```


Pull request description:
Allow composes based on props
<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**:

<!-- Why are these changes necessary? -->
**Why**:

<!-- How were these changes implemented? -->
**How**:

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation
- [x] Tests
- [x] Code complete

<!-- feel free to add additional comments -->

Closes #90


Patch:
diff --git a/src/react.js b/src/react.js
index 888241f0..3975bdf2 100644
--- a/src/react.js
+++ b/src/react.js
@@ -11,7 +11,7 @@ export default function (tag, cls, vars = [], content) {
   function Styled (props) {
     const getValue = v => (v && typeof v === 'function' ? v.cls || v(props) : v)
     const className = css(
-      cls,
+      cls.map(getValue),
       vars.map(getValue),
       content
     )


Test patch:
diff --git a/test/__snapshots__/react.test.js.snap b/test/__snapshots__/react.test.js.snap
index bfa1ecb5..ca1de879 100644
--- a/test/__snapshots__/react.test.js.snap
+++ b/test/__snapshots__/react.test.js.snap
@@ -92,6 +92,35 @@ exports[`styled composes 1`] = `
 </h1>
 `;
 
+exports[`styled composes based on props 1`] = `
+.css-cssA-cy897j-1p4ppuj {
+  color: blue;
+}
+
+
+
+<h1
+  a={true}
+  className="css-H1-16dw226-196nx3w css-H1-16dw226 css-cssA-cy897j-1p4ppuj css-cssA-cy897j"
+>
+  hello world
+</h1>
+`;
+
+exports[`styled composes based on props 2`] = `
+.css-cssB-7o6h5j-dcpp5a {
+  color: green;
+}
+
+
+
+<h1
+  className="css-H1-16dw226-196nx3w css-H1-16dw226 css-cssB-7o6h5j-dcpp5a css-cssB-7o6h5j"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled composes with objects 1`] = `
 .css-cssB-ob3sm8-fwh0v {
   height: 64px;
diff --git a/test/react.test.js b/test/react.test.js
index 27a3c824..7610d5e7 100644
--- a/test/react.test.js
+++ b/test/react.test.js
@@ -232,6 +232,39 @@ describe('styled', () => {
 
     expect(tree).toMatchSnapshotWithEmotion()
   })
+
+  test('composes based on props', () => {
+    const cssA = css`
+      color: blue;
+    `
+
+    const cssB = css`
+      color: green;
+    `
+
+    const H1 = styled('h1')`
+      composes: ${props => props.a ? cssA : cssB}
+    `
+
+    const tree = renderer
+      .create(
+        <H1 a>
+          hello world
+        </H1>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshotWithEmotion()
+    const tree2 = renderer
+      .create(
+        <H1>
+          hello world
+        </H1>
+      )
+      .toJSON()
+
+    expect(tree2).toMatchSnapshotWithEmotion()
+  })
   test('throws if undefined is passed as the component', () => {
     expect(
       () => styled(undefined)`display: flex;`