Support functions as return values in interpolations

packages/emotion/src/index.js

@@ -116,6 +116,10 @@ function handleInterpolation(
     return ''
   }
 
+  if (typeof interpolation === 'function') {
+    return interpolation()
+  }
+
   if (typeof interpolation === 'object') {
     return createStringFromObject(interpolation)
   }

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;

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()
+  })
 })

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="legacy__class glamor-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled innerRef 1`] = `
 .glamor-0 {
   font-size: 12px;

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;`