From 719358b710e1c1a092a46bfb9a8c11e9dc834022 Mon Sep 17 00:00:00 2001
From: Kye Hohenberger <kye@sideway.com>
Date: Mon, 25 Sep 2017 20:54:24 -0600
Subject: [PATCH] Function return values (#346)

* Add emotion system to the repo

* Revert "Add emotion system to the repo"

This reverts commit efd73e0

* Support functions as return values in interpolations

* Revert "Support functions as return values in interpolations"

This reverts commit 7e5d8db

* Support functions as return values in interpolations

(cherry picked from commit 7e5d8db)

* Recursively handle a function interpolation value.

* Fucking linter
---
 packages/emotion/src/index.js                        |  4 ++++
 packages/emotion/test/__snapshots__/css.test.js.snap | 10 ++++++++++
 packages/emotion/test/css.test.js                    |  7 +++++++
 .../test/__snapshots__/index.test.js.snap            | 12 ++++++++++++
 packages/react-emotion/test/index.test.js            |  9 +++++++++
 5 files changed, 42 insertions(+)

diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js
index 0e0a6d874..8dcfc8304 100644
--- a/packages/emotion/src/index.js
+++ b/packages/emotion/src/index.js
@@ -116,6 +116,10 @@ function handleInterpolation(
     return ''
   }
 
+  if (typeof interpolation === 'function') {
+    return handleInterpolation(interpolation())
+  }
+
   if (typeof interpolation === 'object') {
     return createStringFromObject(interpolation)
   }
diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap
index 960880540..31e8663ce 100644
--- a/packages/emotion/test/__snapshots__/css.test.js.snap
+++ b/packages/emotion/test/__snapshots__/css.test.js.snap
@@ -423,6 +423,16 @@ exports[`css registered styles as nested selector value in object 1`] = `
 />
 `;
 
+exports[`css return function in interpolation 1`] = `
+.glamor-0 {
+  color: blue;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`css weakmap 1`] = `
 .glamor-0 {
   display: -webkit-box;
diff --git a/packages/emotion/test/css.test.js b/packages/emotion/test/css.test.js
index 1762e287b..09a3f4737 100644
--- a/packages/emotion/test/css.test.js
+++ b/packages/emotion/test/css.test.js
@@ -290,4 +290,11 @@ describe('css', () => {
     const tree2 = renderer.create(<div className={cls2} />).toJSON()
     expect(tree2).toMatchSnapshot()
   })
+
+  test('return function in interpolation', () => {
+    const cls1 = css`color: ${() => 'blue'};`
+
+    const tree = renderer.create(<div className={cls1} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })
diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap
index d74be831e..7b620f573 100644
--- a/packages/react-emotion/test/__snapshots__/index.test.js.snap
+++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap
@@ -312,6 +312,18 @@ exports[`styled higher order component 1`] = `
 />
 `;
 
+exports[`styled inline function return value is a function 1`] = `
+.glamor-0 {
+  font-size: 20px;
+}
+
+<h1
+  className="glamor-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled innerRef 1`] = `
 .glamor-0 {
   font-size: 12px;
diff --git a/packages/react-emotion/test/index.test.js b/packages/react-emotion/test/index.test.js
index 7c4dad4ee..2615d0ac5 100644
--- a/packages/react-emotion/test/index.test.js
+++ b/packages/react-emotion/test/index.test.js
@@ -81,6 +81,15 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test('inline function return value is a function', () => {
+    const fontSize = () => 20
+    const H1 = styled('h1')`font-size: ${() => fontSize}px;`
+
+    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
   test('call expression', () => {
     const fontSize = 20
     const H1 = styled('h1')`font-size: ${fontSize}px;`