Make theme prop always exist (#364)

emotion-js · Oct 1, 2017 · 8cd44ac · 8cd44ac
1 parent 32d1b57
commit 8cd44ac
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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()
+  })
 })