From 77f512adc80ef40e263f5c03302968ae3b1418a8 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 00:54:24 -0300
Subject: [PATCH 01/13] Add typings to react-emotion package

---
 packages/react-emotion/package.json           |  10 +-
 .../typescript_tests/tsconfig.json            |  14 +++
 .../typescript_tests/typescript_tests.tsx     |  78 +++++++++++++
 .../react-emotion/typings/react-emotion.d.ts  | 103 ++++++++++++++++++
 4 files changed, 203 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-emotion/typescript_tests/tsconfig.json
 create mode 100644 packages/react-emotion/typescript_tests/typescript_tests.tsx
 create mode 100644 packages/react-emotion/typings/react-emotion.d.ts

diff --git a/packages/react-emotion/package.json b/packages/react-emotion/package.json
index 806e4d3fc..895ed1ade 100644
--- a/packages/react-emotion/package.json
+++ b/packages/react-emotion/package.json
@@ -4,13 +4,17 @@
   "description": "The Next Generation of CSS-in-JS, for React projects.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
+  "types": "typings/react-emotion.d.ts",
   "files": [
     "src",
     "dist",
-    "macro.js"
+    "macro.js",
+    "typings"
   ],
   "scripts": {
     "build": "npm-run-all clean rollup rollup:umd",
+    "test:typescript": "tsc --noEmit -p --jsx typescript_tests/tsconfig.json",
+    "pretest:typescript": "npm run build",
     "clean": "rimraf dist",
     "rollup": "rollup -c ../../rollup.config.js",
     "watch": "rollup -c ../../rollup.config.js --watch",
@@ -24,11 +28,13 @@
     "emotion": "^8.0.5"
   },
   "devDependencies": {
+    "@types/react": "^16.0.10",
     "cross-env": "^5.0.5",
     "emotion": "^8.0.5",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",
-    "rollup": "^0.43.0"
+    "rollup": "^0.43.0",
+    "typescript": "^2.0.0"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://github.com/tkh44/emotion#readme",
diff --git a/packages/react-emotion/typescript_tests/tsconfig.json b/packages/react-emotion/typescript_tests/tsconfig.json
new file mode 100644
index 000000000..37c43b7f5
--- /dev/null
+++ b/packages/react-emotion/typescript_tests/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "jsx": "react"
+  },
+  "include": [
+    "./*.ts",
+    "./*.tsx"
+  ]
+}
diff --git a/packages/react-emotion/typescript_tests/typescript_tests.tsx b/packages/react-emotion/typescript_tests/typescript_tests.tsx
new file mode 100644
index 000000000..01c17f146
--- /dev/null
+++ b/packages/react-emotion/typescript_tests/typescript_tests.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from '../';
+
+let Component;
+let mount;
+
+/*
+ * Inference HTML Tag Props
+ */
+Component = styled.div({ color: 'red' });
+mount = <Component onClick={(event) => event} />;
+
+Component = styled('div')({ color: 'red' });
+mount = <Component onClick={(event) => event} />;
+
+Component = styled.div`color: red;`;
+mount = <Component onClick={(e) => e} />;
+
+Component = styled('div')`color: red;`;
+mount = <Component onClick={(e) => e} />;
+
+Component = styled.a({ color: 'red' });
+mount = <Component href="#" />;
+
+Component = styled('a')({ color: 'red' });
+mount = <Component href="#" />;
+
+/*
+ * Passing custom props
+ */
+type CustomProps = { lookColor: string };
+
+Component = styled.div<CustomProps>(
+  { color: 'blue' },
+  props => ({
+    background: props.lookColor,
+  }),
+  props => ({
+    border: `1px solid ${props.lookColor}`,
+  }),
+);
+mount = <Component lookColor="red" />;
+
+Component = styled<CustomProps, 'div'>('div')(
+  { color: 'blue' },
+  props => ({
+    background: props.lookColor,
+  }),
+);
+mount = <Component lookColor="red" />;
+
+const anotherColor = 'blue';
+Component = styled<CustomProps, 'div'>('div')`
+  background: ${props => props.lookColor};
+  color: ${anotherColor};
+`
+mount = <Component lookColor="red" />;
+
+/*
+ * With other components
+ */
+type AnotherCustomProps = { customProp: string }
+type SFCComponentProps = { className?: string, foo: 'bar' }
+const SFCComponent: React.StatelessComponent<SFCComponentProps> = props => (
+  <div className={props.className}>{props.children}</div>
+)
+
+// infer SFCComponentProps
+Component = styled(SFCComponent)({ 
+  color: 'red',
+})
+mount = <Component foo="bar" />
+
+// do not infer SFCComponentProps, need to pass
+Component = styled<AnotherCustomProps & SFCComponentProps>(SFCComponent)({ 
+  color: 'red',
+})
+mount = <Component customProp="red" foo="bar" /> 
diff --git a/packages/react-emotion/typings/react-emotion.d.ts b/packages/react-emotion/typings/react-emotion.d.ts
new file mode 100644
index 000000000..6e41958ca
--- /dev/null
+++ b/packages/react-emotion/typings/react-emotion.d.ts
@@ -0,0 +1,103 @@
+import { StatelessComponent, Component as ClassComponent, CSSProperties } from 'react'
+import { Interpolation as EmotionInterpolation } from 'emotion'
+
+export type InterpolationFn<Props = {}> = (
+  props: Props
+) => EmotionInterpolation
+
+export type Interpolation<Props = {}> =
+  | InterpolationFn<Props>
+  | EmotionInterpolation
+
+export interface Options {
+  string?: string,
+}
+
+type Component<Props> =
+  | ClassComponent<Props>
+  | StatelessComponent<Props>
+
+export type ThemedProps<Props, Theme> = Props & {
+  theme: Theme,
+}
+
+export interface StyledComponent<Props, Theme, IntrinsicProps>
+  extends
+    ClassComponent<Props & IntrinsicProps>,
+    StatelessComponent<Props & IntrinsicProps>
+{
+  withComponent<Tag extends keyof JSX.IntrinsicElements>(tag: Tag):
+    StyledComponent<Props, Theme, JSX.IntrinsicElements[Tag]>
+
+  withComponent(component: Component<Props & IntrinsicProps>):
+    StyledComponent<Props, Theme, {}>
+
+  displayName: string
+
+  __emotion_styles: string[]
+  __emotion_base: string | Component<Props & IntrinsicProps>
+  __emotion_real: ThemedReactEmotionInterface<Theme>
+}
+
+export type ObjectStyleAttributes =
+  | CSSProperties
+  | { [key: string]: number | string | ObjectStyleAttributes }
+
+export interface CreateStyled<Props, Theme, IntrinsicProps> {
+  // overload for template string as styles
+  (
+    strings: TemplateStringsArray,
+    ...vars: Interpolation<ThemedProps<Props & IntrinsicProps, Theme>>[],
+  ): StyledComponent<Props, Theme, IntrinsicProps>
+
+  // overload for object as styles
+  (
+    ...styles: (
+      | ObjectStyleAttributes
+      | ((props: ThemedProps<Props & IntrinsicProps, Theme>) => ObjectStyleAttributes)
+    )[]
+  ): StyledComponent<Props, Theme, IntrinsicProps>
+}
+
+// TODO: find a way to reuse CreateStyled here
+// for now I needed to repeat all fn types/overloads
+type ShorthandsFactories<Theme> = {
+  [Tag in keyof JSX.IntrinsicElements]: {
+    // overload for template string as styles
+    <Props = {}>(
+      strings: TemplateStringsArray,
+      ...vars: Interpolation<ThemedProps<Props & JSX.IntrinsicElements[Tag], Theme>>[],
+    ): StyledComponent<Props, Theme, JSX.IntrinsicElements[Tag]>
+  
+    // overload for object as styles
+    <Props = {}>(
+      ...styles: (
+        | ObjectStyleAttributes
+        | ((props: ThemedProps<Props & JSX.IntrinsicElements[Tag], Theme>) => ObjectStyleAttributes)
+      )[]
+    ): StyledComponent<Props, Theme, JSX.IntrinsicElements[Tag]>
+  };
+};
+
+export interface ThemedReactEmotionInterface<Theme> extends ShorthandsFactories<Theme> {
+  // overload for dom tag
+  <Props, Tag extends keyof JSX.IntrinsicElements>(
+    tag: Tag | Component<Props>,
+    options?: Options,
+  ): CreateStyled<Props, Theme, JSX.IntrinsicElements[Tag]>
+
+  // overload for component
+  <Props = {}>(
+    component: Component<Props>,
+    options?: Options,
+  ): CreateStyled<Props, Theme, {}>
+}
+
+export interface ThemedReactEmotionModule<Theme> {
+  default: ThemedReactEmotionInterface<Theme>
+}
+
+declare const styled: ThemedReactEmotionInterface<any>
+export default styled
+
+

From f8841cd3dbfc8d369d7a3fd4ebc4cfd20a9f8661 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 01:12:58 -0300
Subject: [PATCH 02/13] Fix CSSProperties and add more tests

---
 .../typescript_tests/typescript_tests.tsx     | 51 +++++++++++++++----
 .../react-emotion/typings/react-emotion.d.ts  |  4 +-
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/react-emotion/typescript_tests/typescript_tests.tsx b/packages/react-emotion/typescript_tests/typescript_tests.tsx
index 01c17f146..9b8435011 100644
--- a/packages/react-emotion/typescript_tests/typescript_tests.tsx
+++ b/packages/react-emotion/typescript_tests/typescript_tests.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '../';
+import styled, { ThemedReactEmotionInterface } from '../';
 
 let Component;
 let mount;
@@ -8,10 +8,10 @@ let mount;
  * Inference HTML Tag Props
  */
 Component = styled.div({ color: 'red' });
-mount = <Component onClick={(event) => event} />;
+mount = <Component onClick={event => event} />;
 
 Component = styled('div')({ color: 'red' });
-mount = <Component onClick={(event) => event} />;
+mount = <Component onClick={event => event} />;
 
 Component = styled.div`color: red;`;
 mount = <Component onClick={(e) => e} />;
@@ -60,19 +60,50 @@ mount = <Component lookColor="red" />;
  * With other components
  */
 type AnotherCustomProps = { customProp: string }
-type SFCComponentProps = { className?: string, foo: 'bar' }
+type SFCComponentProps = { className?: string, foo: string }
+
 const SFCComponent: React.StatelessComponent<SFCComponentProps> = props => (
-  <div className={props.className}>{props.children}</div>
+  <div className={props.className}>{props.children} {props.foo}</div>
 )
 
 // infer SFCComponentProps
-Component = styled(SFCComponent)({ 
-  color: 'red',
-})
+Component = styled(SFCComponent)({ color: 'red' })
+mount = <Component foo="bar" />
+
+// infer SFCComponentProps
+Component = styled(SFCComponent)`color: red`;
 mount = <Component foo="bar" />
 
-// do not infer SFCComponentProps, need to pass
+// do not infer SFCComponentProps with pass CustomProps, need to pass both
 Component = styled<AnotherCustomProps & SFCComponentProps>(SFCComponent)({ 
   color: 'red',
-})
+}, props => ({
+  background: props.customProp,
+}))
+mount = <Component customProp="red" foo="bar" /> 
+
+// do not infer SFCComponentProps with pass CustomProps, need to pass both
+Component = styled<AnotherCustomProps & SFCComponentProps>(SFCComponent)`
+  color: red;
+  background: ${props => props.customProp};
+`;
 mount = <Component customProp="red" foo="bar" /> 
+
+
+/*
+ * With explicit theme
+ */
+
+type Theme = {
+  color: {
+    primary: string,
+    secondary: string,
+  }
+}
+
+const _styled = styled as ThemedReactEmotionInterface<Theme>
+
+Component = _styled.div`
+  color: ${props => props.theme.color.primary}
+`
+mount = <Component onClick={event => event} />
diff --git a/packages/react-emotion/typings/react-emotion.d.ts b/packages/react-emotion/typings/react-emotion.d.ts
index 6e41958ca..91c31842d 100644
--- a/packages/react-emotion/typings/react-emotion.d.ts
+++ b/packages/react-emotion/typings/react-emotion.d.ts
@@ -41,7 +41,7 @@ export interface StyledComponent<Props, Theme, IntrinsicProps>
 
 export type ObjectStyleAttributes =
   | CSSProperties
-  | { [key: string]: number | string | ObjectStyleAttributes }
+  | { [key: string]: ObjectStyleAttributes }
 
 export interface CreateStyled<Props, Theme, IntrinsicProps> {
   // overload for template string as styles
@@ -87,7 +87,7 @@ export interface ThemedReactEmotionInterface<Theme> extends ShorthandsFactories<
   ): CreateStyled<Props, Theme, JSX.IntrinsicElements[Tag]>
 
   // overload for component
-  <Props = {}>(
+  <Props>(
     component: Component<Props>,
     options?: Options,
   ): CreateStyled<Props, Theme, {}>

From 789acc0be48f70052e0744f9f51d2321b12a7a54 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 01:15:02 -0300
Subject: [PATCH 03/13] Remove --jsx flag from tsc command

---
 packages/react-emotion/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-emotion/package.json b/packages/react-emotion/package.json
index 895ed1ade..cfeda5619 100644
--- a/packages/react-emotion/package.json
+++ b/packages/react-emotion/package.json
@@ -13,7 +13,7 @@
   ],
   "scripts": {
     "build": "npm-run-all clean rollup rollup:umd",
-    "test:typescript": "tsc --noEmit -p --jsx typescript_tests/tsconfig.json",
+    "test:typescript": "tsc --noEmit -p typescript_tests/tsconfig.json",
     "pretest:typescript": "npm run build",
     "clean": "rimraf dist",
     "rollup": "rollup -c ../../rollup.config.js",

From 71397a18bce94e243fe668b35b76b8096fabdd95 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 02:48:02 -0300
Subject: [PATCH 04/13] Add withComponent to typescript_tests

---
 .../typescript_tests/typescript_tests.tsx     | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/react-emotion/typescript_tests/typescript_tests.tsx b/packages/react-emotion/typescript_tests/typescript_tests.tsx
index 9b8435011..44e32d36b 100644
--- a/packages/react-emotion/typescript_tests/typescript_tests.tsx
+++ b/packages/react-emotion/typescript_tests/typescript_tests.tsx
@@ -59,35 +59,35 @@ mount = <Component lookColor="red" />;
 /*
  * With other components
  */
-type AnotherCustomProps = { customProp: string }
-type SFCComponentProps = { className?: string, foo: string }
+type CustomProps2 = { customProp: string };
+type SFCComponentProps = { className?: string, foo: string };
 
 const SFCComponent: React.StatelessComponent<SFCComponentProps> = props => (
   <div className={props.className}>{props.children} {props.foo}</div>
-)
+);
 
 // infer SFCComponentProps
-Component = styled(SFCComponent)({ color: 'red' })
-mount = <Component foo="bar" />
+Component = styled(SFCComponent)({ color: 'red' });
+mount = <Component foo="bar" />;
 
 // infer SFCComponentProps
 Component = styled(SFCComponent)`color: red`;
-mount = <Component foo="bar" />
+mount = <Component foo="bar" />;
 
 // do not infer SFCComponentProps with pass CustomProps, need to pass both
-Component = styled<AnotherCustomProps & SFCComponentProps>(SFCComponent)({ 
+Component = styled<CustomProps2 & SFCComponentProps>(SFCComponent)({ 
   color: 'red',
 }, props => ({
   background: props.customProp,
-}))
-mount = <Component customProp="red" foo="bar" /> 
+}));
+mount = <Component customProp="red" foo="bar" />;
 
 // do not infer SFCComponentProps with pass CustomProps, need to pass both
-Component = styled<AnotherCustomProps & SFCComponentProps>(SFCComponent)`
+Component = styled<CustomProps2 & SFCComponentProps>(SFCComponent)`
   color: red;
   background: ${props => props.customProp};
 `;
-mount = <Component customProp="red" foo="bar" /> 
+mount = <Component customProp="red" foo="bar" />;
 
 
 /*
@@ -99,11 +99,29 @@ type Theme = {
     primary: string,
     secondary: string,
   }
-}
+};
 
-const _styled = styled as ThemedReactEmotionInterface<Theme>
+const _styled = styled as ThemedReactEmotionInterface<Theme>;
 
 Component = _styled.div`
   color: ${props => props.theme.color.primary}
-`
-mount = <Component onClick={event => event} />
+`;
+mount = <Component onClick={event => event} />;
+
+/*
+ * withComponent
+ */
+
+type CustomProps3 = {
+  bgColor: string,
+};
+
+Component = styled.div<CustomProps3>(props => ({
+  bgColor: props.bgColor,
+}));
+
+let Link = Component.withComponent('a');
+mount = <Link href="#" bgColor="red" />;
+
+let Button = Component.withComponent('button');
+mount = <Button type="submit" bgColor="red" />;

From e43bdd3bfedd8b8fe596f3de471cd0fd9875f354 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 02:57:40 -0300
Subject: [PATCH 05/13] Fix a mistake in withComponent typing

---
 packages/react-emotion/typings/react-emotion.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-emotion/typings/react-emotion.d.ts b/packages/react-emotion/typings/react-emotion.d.ts
index 91c31842d..da3588615 100644
--- a/packages/react-emotion/typings/react-emotion.d.ts
+++ b/packages/react-emotion/typings/react-emotion.d.ts
@@ -29,7 +29,7 @@ export interface StyledComponent<Props, Theme, IntrinsicProps>
   withComponent<Tag extends keyof JSX.IntrinsicElements>(tag: Tag):
     StyledComponent<Props, Theme, JSX.IntrinsicElements[Tag]>
 
-  withComponent(component: Component<Props & IntrinsicProps>):
+  withComponent(component: Component<Props>):
     StyledComponent<Props, Theme, {}>
 
   displayName: string

From b6d3f50f670f7b8ef1b23971726d55870979cbc0 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 13:16:52 -0300
Subject: [PATCH 06/13] Add support to more interpolations edge cases

---
 packages/react-emotion/typings/react-emotion.d.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react-emotion/typings/react-emotion.d.ts b/packages/react-emotion/typings/react-emotion.d.ts
index da3588615..4178b73c2 100644
--- a/packages/react-emotion/typings/react-emotion.d.ts
+++ b/packages/react-emotion/typings/react-emotion.d.ts
@@ -1,14 +1,19 @@
 import { StatelessComponent, Component as ClassComponent, CSSProperties } from 'react'
 import { Interpolation as EmotionInterpolation } from 'emotion'
 
-export type InterpolationFn<Props = {}> = (
-  props: Props
-) => EmotionInterpolation
+export type InterpolationFn<Props = {}> =
+  (props: Props) =>
+    | EmotionInterpolation
+    | InterpolationFn<Props>
 
-export type Interpolation<Props = {}> =
+export type InterpolationTypes<Props = {}> =
   | InterpolationFn<Props>
   | EmotionInterpolation
 
+export type Interpolation<Props = {}> =
+  | InterpolationTypes<Props>
+  | InterpolationTypes<Props>[]
+
 export interface Options {
   string?: string,
 }

From 556463e9411f46020bf6f32d28a354d32471a7c2 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 13:19:10 -0300
Subject: [PATCH 07/13] Added declaration to tsconfig

---
 packages/react-emotion/typescript_tests/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-emotion/typescript_tests/tsconfig.json b/packages/react-emotion/typescript_tests/tsconfig.json
index 37c43b7f5..ecd8ba628 100644
--- a/packages/react-emotion/typescript_tests/tsconfig.json
+++ b/packages/react-emotion/typescript_tests/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "es2015",
+    "declaration": true,
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",

From 651daf350b1269558992ff95d6eac9f39755763d Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Fri, 13 Oct 2017 14:07:03 -0300
Subject: [PATCH 08/13] Can use emotion helpers importing from react-emotion in
 ts

---
 .../react-emotion/typescript_tests/typescript_tests.tsx   | 8 +++++++-
 packages/react-emotion/typings/react-emotion.d.ts         | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-emotion/typescript_tests/typescript_tests.tsx b/packages/react-emotion/typescript_tests/typescript_tests.tsx
index 44e32d36b..2fcd1174a 100644
--- a/packages/react-emotion/typescript_tests/typescript_tests.tsx
+++ b/packages/react-emotion/typescript_tests/typescript_tests.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { ThemedReactEmotionInterface } from '../';
+import styled, { flush, ThemedReactEmotionInterface } from '../';
 
 let Component;
 let mount;
@@ -125,3 +125,9 @@ mount = <Link href="#" bgColor="red" />;
 
 let Button = Component.withComponent('button');
 mount = <Button type="submit" bgColor="red" />;
+
+/*
+ * Can use emotion helpers importing from react-emotion
+ */
+
+flush();
diff --git a/packages/react-emotion/typings/react-emotion.d.ts b/packages/react-emotion/typings/react-emotion.d.ts
index 4178b73c2..d5750bdb9 100644
--- a/packages/react-emotion/typings/react-emotion.d.ts
+++ b/packages/react-emotion/typings/react-emotion.d.ts
@@ -1,6 +1,8 @@
 import { StatelessComponent, Component as ClassComponent, CSSProperties } from 'react'
 import { Interpolation as EmotionInterpolation } from 'emotion'
 
+export * from 'emotion'
+
 export type InterpolationFn<Props = {}> =
   (props: Props) =>
     | EmotionInterpolation

From a48458d1ed2f24f1eef79dcce0f3aada897d2e41 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Sun, 15 Oct 2017 01:27:57 -0200
Subject: [PATCH 09/13] Creates typescript documentation

---
 docs/typescript.md | 189 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 docs/typescript.md

diff --git a/docs/typescript.md b/docs/typescript.md
new file mode 100644
index 000000000..55515c8c4
--- /dev/null
+++ b/docs/typescript.md
@@ -0,0 +1,189 @@
+## TypeScript
+
+Emotion have some TypeScript definitions to allow you easily type your styled components.
+The definitions come with a great type inferences from tagnames and another components.
+
+### Inferring Props from tag names
+
+```jsx
+import styled from 'react-emotion'
+
+const Link = styled('a')`
+  color: red;
+`
+
+const App = () => (
+  <Link href="#">Click me</Link>
+)
+``` 
+
+```jsx 
+import styled from 'react-emotion'
+
+const NotALink = styled('div')`
+  color: red;
+`
+
+const App = () => (
+  <NotALink href="#">Click me</NotALink>
+            ^^^^^^^^ Property 'href' does not exist [...]
+)
+```
+
+Also it can able to infer new tag props when using `withComponent`
+
+```jsx
+import styled from 'react-emotion'
+
+const NotALink = styled('div')`
+  color: red,
+`
+
+const Link = NotALink.withComponent('a')
+
+const App = () => (
+  <Link href="#">Click me</Link>
+)
+
+// No errors!
+```
+
+### Passing Props
+
+You can type the props of your styled components.  
+Unfortunately you will need to pass a second parameter with the tagname because TypeScript stops inferring the tagname.
+
+```jsx
+import styled from 'react-emotion'
+
+type ImageProps = {
+  src: string,
+}
+
+const Image = styled<ImageProps, 'div'>('div')`
+  background: url(${props => props.src}) center center;
+  background-size: contain;
+`
+``` 
+
+Also works with object as styles way
+
+```jsx
+import styled from 'react-emotion'
+
+type ImageProps = {
+  src: string,
+}
+
+const Image = styled<ImageProps, 'div'>('div')({
+  backgroundSize: contain;
+}, ({ src }) => ({
+  background: `url(${src}) center center`,
+}))
+
+// OR
+
+const Image = styled.div<ImageProps>({
+  backgroundSize: contain;
+}, ({ src }) => ({
+  background: `url(${src}) center center`,
+}))
+
+``` 
+
+Note that in shorthand example you don't need to pass the tagname as argument.  
+But it will only work using object as style due to a bug passing argument to a tagged template strings function. See https://github.com/Microsoft/TypeScript/issues/11947
+
+### Inferring props from another component
+
+```jsx
+import React, { SFC } from 'react'
+import styled from 'react-emotion'
+
+type ComponentProps = {
+  className?: string,
+  label: string,
+}
+
+const Component: SFC = ({ label, className }) => (
+  <div className={className}>
+    {label}
+  </div>
+)
+
+const StyledComponent = styled(Component)`
+  color: red;
+`
+
+const App = () => (
+  <StyledComponent label="Yea! No need to re-type this label prop." />
+)
+```
+
+### Passing props while styling another component
+
+```jsx
+import React, { SFC } from 'react'
+import styled from 'react-emotion'
+
+type ComponentProps = {
+  className?: string,
+  label: string,
+}
+
+const Component: SFC = ({ label, className }) => (
+  <div className={className}>
+    {label}
+  </div>
+)
+
+type StyledComponentProps = {
+  bgColor: string,
+} & ComponentProps
+//  ^^^ You will need this
+
+const StyledComponent = styled<StyledComponentProps>(Component)`
+  color: red;
+  background: ${props => props.bgColor};
+`
+
+const App = () => (
+  <StyledComponent bgColor="red" label="Oh, needs to re-type label prop =(" />
+)
+```
+
+Unfortunately when you pass custom props to a styled component, TypeScript will stops to inferring your Component props, and you will need to re-type that.
+
+### Define a Theme
+
+By default, the `props.theme` has `any` type annotation. So, by default, you can use without any error.  
+However you can define a theme type by creating a another styled instance
+
+*styled.tsx*
+```jsx
+import styled, { ThemedReactEmotionInterface } from 'react-emotion'
+
+type Theme = {
+  color: {
+    primary: string,
+    positive: string,
+    negative: string,
+  },
+  // ...
+}
+
+export default styled as ThemedReactEmotionInterface<Theme>
+``` 
+
+*Button.tsx*
+```jsx
+import styled from '../pathto/styled'
+
+const Button = styled('button')`
+  padding: 20px;
+  background-color: ${props => props.theme.primary};
+  border-radius: 3px;
+`
+
+export default Button
+``` 

From f2e86033100a059ee714cc4665d7440ddbbc74d6 Mon Sep 17 00:00:00 2001
From: Renato Ribeiro <renatoribroman@gmail.com>
Date: Sun, 15 Oct 2017 01:29:07 -0200
Subject: [PATCH 10/13] Adds typescript link in docs readme

---
 docs/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/README.md b/docs/README.md
index 16768a395..0198b7e70 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -25,3 +25,4 @@
 - [Extracting Static Styles](https://github.com/emotion-js/emotion/tree/master/docs/extract-static.md)
 - [Using `withProps` To Attach Props](https://github.com/emotion-js/emotion/tree/master/docs/with-props.md) (styled-components `.attrs` api)
 - [Usage with babel-macros](https://github.com/tkh44/emotion/tree/master/docs/babel-macros.md)
+- [TypeScript](https://github.com/emotion-js/emotion/tree/master/docs/typescript.md)

From af2468356354489abcd1486150a22bcf1bde25fe Mon Sep 17 00:00:00 2001
From: Kye Hohenberger <kye@sideway.com>
Date: Sun, 15 Oct 2017 00:38:08 -0600
Subject: [PATCH 11/13] Update typescript.md

---
 docs/typescript.md | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/docs/typescript.md b/docs/typescript.md
index 55515c8c4..539bea67c 100644
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -1,9 +1,8 @@
 ## TypeScript
 
-Emotion have some TypeScript definitions to allow you easily type your styled components.
-The definitions come with a great type inferences from tagnames and another components.
+Emotion includes TypeScript definitions for `styled` components. The definitions include type inferences for both html elements and React components.
 
-### Inferring Props from tag names
+### html elements
 
 ```jsx
 import styled from 'react-emotion'
@@ -30,7 +29,7 @@ const App = () => (
 )
 ```
 
-Also it can able to infer new tag props when using `withComponent`
+### `withComponent`
 
 ```jsx
 import styled from 'react-emotion'
@@ -51,7 +50,7 @@ const App = () => (
 ### Passing Props
 
 You can type the props of your styled components.  
-Unfortunately you will need to pass a second parameter with the tagname because TypeScript stops inferring the tagname.
+Unfortunately, you will need to pass a second parameter with the tag name because TypeScript is unable to infer the tagname.
 
 ```jsx
 import styled from 'react-emotion'
@@ -66,7 +65,7 @@ const Image = styled<ImageProps, 'div'>('div')`
 `
 ``` 
 
-Also works with object as styles way
+### Object Styles
 
 ```jsx
 import styled from 'react-emotion'
@@ -81,7 +80,7 @@ const Image = styled<ImageProps, 'div'>('div')({
   background: `url(${src}) center center`,
 }))
 
-// OR
+// Or shorthand
 
 const Image = styled.div<ImageProps>({
   backgroundSize: contain;
@@ -91,10 +90,10 @@ const Image = styled.div<ImageProps>({
 
 ``` 
 
-Note that in shorthand example you don't need to pass the tagname as argument.  
-But it will only work using object as style due to a bug passing argument to a tagged template strings function. See https://github.com/Microsoft/TypeScript/issues/11947
+* Note that in shorthand example you don't need to pass the tag name argument. 
+* The shorthand only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947.
 
-### Inferring props from another component
+### React Components
 
 ```jsx
 import React, { SFC } from 'react'
@@ -120,7 +119,7 @@ const App = () => (
 )
 ```
 
-### Passing props while styling another component
+### Passing props when styling a React component
 
 ```jsx
 import React, { SFC } from 'react'
@@ -152,12 +151,12 @@ const App = () => (
 )
 ```
 
-Unfortunately when you pass custom props to a styled component, TypeScript will stops to inferring your Component props, and you will need to re-type that.
+Unfortunately, when you pass custom props to a styled component, TypeScript will stop inferring your Component props, and you will need to re-type them.
 
 ### Define a Theme
 
-By default, the `props.theme` has `any` type annotation. So, by default, you can use without any error.  
-However you can define a theme type by creating a another styled instance
+By default, the `props.theme` has `any` type annotation and works without error.  
+However, you can define a theme type by creating a another `styled` instance.
 
 *styled.tsx*
 ```jsx

From 815dde296033128bcbb159521b934c6e0895f7d1 Mon Sep 17 00:00:00 2001
From: Kye Hohenberger <kye@sideway.com>
Date: Sun, 15 Oct 2017 00:39:17 -0600
Subject: [PATCH 12/13] Update typescript.md

---
 docs/typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/typescript.md b/docs/typescript.md
index 539bea67c..959d7bc07 100644
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -1,6 +1,6 @@
 ## TypeScript
 
-Emotion includes TypeScript definitions for `styled` components. The definitions include type inferences for both html elements and React components.
+Emotion includes TypeScript definitions for `styled` components that include type inferences for both html elements as well as React components.
 
 ### html elements
 

From 8209aab501b6fb2acc2cbd90e9e4938e96f2ce57 Mon Sep 17 00:00:00 2001
From: Kye Hohenberger <kye@sideway.com>
Date: Sun, 15 Oct 2017 00:40:24 -0600
Subject: [PATCH 13/13] Update typescript.md

---
 docs/typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/typescript.md b/docs/typescript.md
index 959d7bc07..82216d8b1 100644
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -1,6 +1,6 @@
 ## TypeScript
 
-Emotion includes TypeScript definitions for `styled` components that include type inferences for both html elements as well as React components.
+Emotion includes TypeScript definitions for `styled` components and has type inferences for both html elements and React components.
 
 ### html elements