Merge branch 'feature/typescript-component-wrapping' into release/1.6.0

ben-rogerson · Jul 21, 2020 · 545214a · 545214a
2 parents 8c51892 + a87b2b2
commit 545214a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -1,5 +1,4 @@
-/* eslint-disable-next-line import/no-unassigned-import */
-import 'react'
+import { ComponentType } from 'react'
 
 export interface TwStyle {
   [key: string]: string | number | TwStyle
@@ -32,7 +31,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
@@ -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
@@ -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`} />