From 6f3ee3ff29ceca0b76ea1e0c6650944ed9219760 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent+github@doddsfamily.us>
Date: Thu, 20 Dec 2018 14:38:03 -0700
Subject: [PATCH 1/5] fix(TS): allow CSSObject on @emotion/styled

---
 packages/styled-base/types/index.d.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/styled-base/types/index.d.ts b/packages/styled-base/types/index.d.ts
index d086f7511..49104687c 100644
--- a/packages/styled-base/types/index.d.ts
+++ b/packages/styled-base/types/index.d.ts
@@ -12,19 +12,18 @@
  * a style of that component.
  */
 
-import { ComponentSelector, Interpolation } from '@emotion/serialize'
+import { ComponentSelector, Interpolation, CSSObject } from '@emotion/serialize'
 import * as React from 'react'
 
 import { Omit, Overwrapped, PropsOf } from './helper'
 
 export {
   ArrayInterpolation,
-  CSSObject,
   FunctionInterpolation,
   ObjectInterpolation
 } from '@emotion/serialize'
 
-export { ComponentSelector, Interpolation }
+export { ComponentSelector, Interpolation, CSSObject }
 
 type JSXInEl = JSX.IntrinsicElements
 
@@ -72,7 +71,7 @@ export interface CreateStyledComponentBase<
       ReactClassPropKeys
     > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>
   >(
-    template: TemplateStringsArray,
+    template: TemplateStringsArray | CSSObject,
     ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
   ): StyledComponent<InnerProps, StyleProps, Theme>
 }

From 3988ccb2f48760246120d0b1ad4946bbc11b3f49 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent+github@doddsfamily.us>
Date: Thu, 20 Dec 2018 14:42:56 -0700
Subject: [PATCH 2/5] test: add test for styled.button API

---
 packages/styled-base/types/tests.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/styled-base/types/tests.tsx b/packages/styled-base/types/tests.tsx
index 95f8b3326..c014833e0 100644
--- a/packages/styled-base/types/tests.tsx
+++ b/packages/styled-base/types/tests.tsx
@@ -39,6 +39,9 @@ const Button0 = styled('button')`
 const Button1 = styled('button')({
   color: 'blue'
 })
+const Button2 = styled.button({
+  color: 'blue'
+})
 ;<div>
   <Button0 />
   <Button0 type="button" />
@@ -47,6 +50,10 @@ const Button1 = styled('button')({
   <Button1 />
   <Button1 type="button" />
 </div>
+;<div>
+  <Button2 />
+  <Button2 type="button" />
+</div>
 
 const Input0 = styled('input', {
   label: 'mystyle'

From e73caeb051f62d805197ef6cd35107a23916b27f Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent+github@doddsfamily.us>
Date: Thu, 20 Dec 2018 14:47:21 -0700
Subject: [PATCH 3/5] Update tests.tsx

---
 packages/styled-base/types/tests.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styled-base/types/tests.tsx b/packages/styled-base/types/tests.tsx
index c014833e0..591c355b8 100644
--- a/packages/styled-base/types/tests.tsx
+++ b/packages/styled-base/types/tests.tsx
@@ -39,7 +39,7 @@ const Button0 = styled('button')`
 const Button1 = styled('button')({
   color: 'blue'
 })
-const Button2 = styled.button({
+const Button1Dot = styled.button({
   color: 'blue'
 })
 ;<div>
@@ -51,8 +51,8 @@ const Button2 = styled.button({
   <Button1 type="button" />
 </div>
 ;<div>
-  <Button2 />
-  <Button2 type="button" />
+  <Button1Dot />
+  <Button1Dot type="button" />
 </div>
 
 const Input0 = styled('input', {

From fcc2d90101f083ba2243b38ebc034f517832e6e7 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent@doddsfamily.us>
Date: Thu, 20 Dec 2018 16:01:23 -0700
Subject: [PATCH 4/5] fix typescript tests

---
 packages/styled-base/types/tests.tsx |  7 -------
 packages/styled/types/tests.tsx      | 13 +++++++++++++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/styled-base/types/tests.tsx b/packages/styled-base/types/tests.tsx
index 591c355b8..95f8b3326 100644
--- a/packages/styled-base/types/tests.tsx
+++ b/packages/styled-base/types/tests.tsx
@@ -39,9 +39,6 @@ const Button0 = styled('button')`
 const Button1 = styled('button')({
   color: 'blue'
 })
-const Button1Dot = styled.button({
-  color: 'blue'
-})
 ;<div>
   <Button0 />
   <Button0 type="button" />
@@ -50,10 +47,6 @@ const Button1Dot = styled.button({
   <Button1 />
   <Button1 type="button" />
 </div>
-;<div>
-  <Button1Dot />
-  <Button1Dot type="button" />
-</div>
 
 const Input0 = styled('input', {
   label: 'mystyle'
diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
index 2a556b16e..fbf12593f 100644
--- a/packages/styled/types/tests.tsx
+++ b/packages/styled/types/tests.tsx
@@ -1,5 +1,8 @@
+import * as React from 'react'
 import styled from '@emotion/styled'
 
+let ui: React.ReactElement<any>
+
 // $ExpectType CreateStyledComponentIntrinsic<"a", {}, any>
 styled.a
 // $ExpectType CreateStyledComponentIntrinsic<"body", {}, any>
@@ -8,3 +11,13 @@ styled.body
 styled.div
 // $ExpectType CreateStyledComponentIntrinsic<"svg", {}, any>
 styled.svg
+
+const Button1 = styled.button({
+  color: 'blue'
+})
+ui = (
+  <div>
+    <Button1 />
+    <Button1 type="button" />
+  </div>
+)

From 324577cfa4580433af5f7303d0ce42eead58368f Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent@doddsfamily.us>
Date: Thu, 20 Dec 2018 16:15:01 -0700
Subject: [PATCH 5/5] add tests that should fail

---
 packages/styled-base/types/tests.tsx |  5 +++++
 packages/styled/types/tests.tsx      | 15 +++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/styled-base/types/tests.tsx b/packages/styled-base/types/tests.tsx
index 95f8b3326..f714241fb 100644
--- a/packages/styled-base/types/tests.tsx
+++ b/packages/styled-base/types/tests.tsx
@@ -48,6 +48,11 @@ const Button1 = styled('button')({
   <Button1 type="button" />
 </div>
 
+// $ExpectError
+const BadButton0 = styled('button')({ bad: 'value' })
+// $ExpectError
+const BadButton1 = styled('button')(() => ({ bad: 'value' }))
+
 const Input0 = styled('input', {
   label: 'mystyle'
 })`
diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
index fbf12593f..9557c990c 100644
--- a/packages/styled/types/tests.tsx
+++ b/packages/styled/types/tests.tsx
@@ -21,3 +21,18 @@ ui = (
     <Button1 type="button" />
   </div>
 )
+
+const Button2 = styled.button<{ size?: 'md' | 'sm' }>(
+  ({ size }) => (size === 'md' ? { fontSize: 15 } : { fontSize: 10 })
+)
+ui = (
+  <div>
+    <Button2 />
+    <Button2 size="sm" />
+  </div>
+)
+
+// $ExpectError
+const BadButton0 = styled.button({ bad: 'value' })
+// $ExpectError
+const BadButton1 = styled.button(() => ({ bad: 'value' }))