From 8cd44ac340aadd744b67ab2c1838d1b531f354a3 Mon Sep 17 00:00:00 2001
From: Mitchell Hamilton <mitchell@mitchellhamilton.me>
Date: Sun, 1 Oct 2017 12:49:00 +1000
Subject: [PATCH] Make theme prop always exist (#364)

---
 packages/react-emotion/src/index.js           |  9 +++-----
 .../test/__snapshots__/index.test.js.snap     | 22 +++++++++++++++++++
 packages/react-emotion/test/index.test.js     | 18 +++++++++++++++
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/react-emotion/src/index.js b/packages/react-emotion/src/index.js
index b83ffbf2d..deddde368 100644
--- a/packages/react-emotion/src/index.js
+++ b/packages/react-emotion/src/index.js
@@ -78,12 +78,9 @@ const createStyled = (tag, options: { e: string }) => {
     class Styled extends Component {
       render() {
         const { props, state } = this
-        this.mergedProps = props
-        if (state !== null && state.theme) {
-          this.mergedProps = omitAssign(testAlwaysTrue, {}, props, {
-            theme: state.theme || {}
-          })
-        }
+        this.mergedProps = omitAssign(testAlwaysTrue, {}, props, {
+          theme: (state !== null && state.theme) || props.theme || {}
+        })
 
         let className = ''
         let classInterpolations = []
diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap
index 47358b028..2a4957bcd 100644
--- a/packages/react-emotion/test/__snapshots__/index.test.js.snap
+++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap
@@ -647,6 +647,28 @@ exports[`styled random object expression 1`] = `
 </h1>
 `;
 
+exports[`styled theme prop exists without ThemeProvider 1`] = `
+.glamor-0 {
+  color: green;
+  background-color: yellow;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
+exports[`styled theme prop exists without ThemeProvider with a theme prop on the component 1`] = `
+.glamor-0 {
+  color: hotpink;
+  background-color: yellow;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`styled themes 1`] = `
 .glamor-0 {
   background-color: #ffd43b;
diff --git a/packages/react-emotion/test/index.test.js b/packages/react-emotion/test/index.test.js
index 5a3a916ff..7c3c4ea51 100644
--- a/packages/react-emotion/test/index.test.js
+++ b/packages/react-emotion/test/index.test.js
@@ -682,4 +682,22 @@ describe('styled', () => {
     const tree = renderer.create(<SomeComponent color="hotpink" />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+  test('theme prop exists without ThemeProvider', () => {
+    const SomeComponent = styled.div`
+      color: ${props => props.theme.color || 'green'};
+      background-color: yellow;
+    `
+    const tree = renderer.create(<SomeComponent />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+  test('theme prop exists without ThemeProvider with a theme prop on the component', () => {
+    const SomeComponent = styled.div`
+      color: ${props => props.theme.color || 'green'};
+      background-color: yellow;
+    `
+    const tree = renderer
+      .create(<SomeComponent theme={{ color: 'hotpink' }} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })