From 59f04efceb56dfd3d429b4b056dbaadcbc8976d6 Mon Sep 17 00:00:00 2001
From: Ben Rogerson <info@benrogerson.com.au>
Date: Sat, 11 Jul 2020 09:11:39 +0930
Subject: [PATCH 1/2] add typescript support for extended Styled Components
 https://github.com/ben-rogerson/twin.macro/issues/38

---
 types/index.d.ts                        | 9 +++++++--
 types/tests/emotion/index.tsx           | 3 ++-
 types/tests/styled-components/index.tsx | 3 ++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index 54b500c8..1f976880 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable-next-line import/no-unassigned-import */
-import 'react'
+import { ComponentType } from 'react'
 
 export interface TwStyle {
   [key: string]: string | number | TwStyle
@@ -20,7 +20,12 @@ export type TwComponentMap = {
   [K in keyof JSX.IntrinsicElements]: TemplateFn<TwComponent<K>>
 }
 
-declare const tw: TwFn & TwComponentMap
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+type TwComponentWrapper = <T extends ComponentType<any>>(
+  component: T
+) => TemplateFn<T>
+
+declare const tw: TwFn & TwComponentMap & TwComponentWrapper
 export default tw
 
 declare module 'react' {
diff --git a/types/tests/emotion/index.tsx b/types/tests/emotion/index.tsx
index b3bdccd0..bdfdeaa7 100644
--- a/types/tests/emotion/index.tsx
+++ b/types/tests/emotion/index.tsx
@@ -11,6 +11,7 @@ export const Container = styled.div`
 `
 
 export const Link = tw.a``
-export const ComposedLink = styled(Link)``
+export const ComposedLink = tw(Link)``
+export const ComposedLink2 = styled(Link)``
 
 export const cssProperty = <div css={tw`bg-red-100`} />
diff --git a/types/tests/styled-components/index.tsx b/types/tests/styled-components/index.tsx
index 6657d7d2..8d7039b3 100644
--- a/types/tests/styled-components/index.tsx
+++ b/types/tests/styled-components/index.tsx
@@ -11,6 +11,7 @@ export const Container = styled.div`
 `
 
 export const Link = tw.a``
-export const ComposedLink = styled(Link)``
+export const ComposedLink = tw(Link)``
+export const ComposedLink2 = styled(Link)``
 
 export const cssProperty = <div css={tw`bg-red-100`} />

From a87b2b24be6be9278e2939174c04959f5eac85c9 Mon Sep 17 00:00:00 2001
From: Ben Rogerson <info@benrogerson.com.au>
Date: Wed, 22 Jul 2020 08:49:59 +0930
Subject: [PATCH 2/2] remove unused eslint disable

---
 types/index.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index 1f976880..36e03e34 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,4 +1,3 @@
-/* eslint-disable-next-line import/no-unassigned-import */
 import { ComponentType } from 'react'
 
 export interface TwStyle {