From dc4340f3daed9924391defb8a95e5f2f46bcc257 Mon Sep 17 00:00:00 2001
From: Dominik Rowicki <yzukonta@gmail.com>
Date: Tue, 7 Jan 2020 01:07:28 +0100
Subject: [PATCH] Add support for forwardedAs to styled-components (#41347)

* Add support for forwardedAs to styled-components

* Test whether as/forwardedAs correctly rejects invalid props

* Revert "Test whether as/forwardedAs correctly rejects invalid props"

The newly added tests pass locally, but fail in automated testing, as per the comment on another case in test/index.tsx:580.

This reverts commit d09acb1eba6250b0761b2d626ce52d8e7df64310.
---
 types/styled-components/index.d.ts           | 3 ++-
 types/styled-components/test/index.tsx       | 9 +++++++++
 types/styled-components/ts3.7/index.d.ts     | 4 ++--
 types/styled-components/ts3.7/test/index.tsx | 9 +++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/types/styled-components/index.d.ts b/types/styled-components/index.d.ts
index 3719940bc6..310f1296e5 100644
--- a/types/styled-components/index.d.ts
+++ b/types/styled-components/index.d.ts
@@ -89,7 +89,7 @@ type StyledComponentPropsWithAs<
     T extends object,
     O extends object,
     A extends keyof any
-> = StyledComponentProps<C, T, O, A> & { as?: C };
+> = StyledComponentProps<C, T, O, A> & { as?: C, forwardedAs?: C };
 
 export type FalseyValue = undefined | null | false;
 export type Interpolation<P> =
@@ -190,6 +190,7 @@ export interface StyledComponentBase<
              * String types need to be cast to themselves to become literal types (as={'a' as 'a'}).
              */
             as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+            forwardedAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
         }
     ): React.ReactElement<StyledComponentProps<C, T, O, A>>;
 
diff --git a/types/styled-components/test/index.tsx b/types/styled-components/test/index.tsx
index 1a44e33188..4bb9d20792 100644
--- a/types/styled-components/test/index.tsx
+++ b/types/styled-components/test/index.tsx
@@ -590,6 +590,15 @@ const asTest = (
     </>
 );
 
+const ForwardedAsNestedComponent = styled.div``;
+const ForwardedAsComponent = styled(ForwardedAsNestedComponent)``;
+const forwardedAsTest = (
+    <>
+        <ForwardedAsComponent forwardedAs="h2" />
+        <ForwardedAsComponent forwardedAs={WithComponentH2} />
+    </>
+);
+
 interface TestContainerProps {
     size: "big" | "small";
     test?: boolean;
diff --git a/types/styled-components/ts3.7/index.d.ts b/types/styled-components/ts3.7/index.d.ts
index b37b357fd9..adaf00c138 100644
--- a/types/styled-components/ts3.7/index.d.ts
+++ b/types/styled-components/ts3.7/index.d.ts
@@ -75,7 +75,7 @@ type StyledComponentPropsWithAs<
     T extends object,
     O extends object,
     A extends keyof any
-> = StyledComponentProps<C, T, O, A> & { as?: C };
+> = StyledComponentProps<C, T, O, A> & { as?: C, forwardedAs?: C };
 
 export type FalseyValue = undefined | null | false;
 export type Interpolation<P> =
@@ -155,7 +155,7 @@ export interface StyledComponentBase<
 > extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {
     // add our own fake call signature to implement the polymorphic 'as' prop
     (
-        props: StyledComponentProps<C, T, O, A> & { as?: never }
+        props: StyledComponentProps<C, T, O, A> & { as?: never, forwardedAs?: never }
       ): React.ReactElement<StyledComponentProps<C, T, O, A>>;
     <AsC extends keyof JSX.IntrinsicElements | React.ComponentType<any> = C>(
       props: StyledComponentPropsWithAs<AsC, T, O, A>
diff --git a/types/styled-components/ts3.7/test/index.tsx b/types/styled-components/ts3.7/test/index.tsx
index 671c5ee872..e8fc4cdfe5 100644
--- a/types/styled-components/ts3.7/test/index.tsx
+++ b/types/styled-components/ts3.7/test/index.tsx
@@ -589,6 +589,15 @@ const asTest = (
     </>
 );
 
+const ForwardedAsNestedComponent = styled.div``;
+const ForwardedAsComponent = styled(ForwardedAsNestedComponent)``;
+const forwardedAsTest = (
+    <>
+        <ForwardedAsComponent forwardedAs="h2" />
+        <ForwardedAsComponent forwardedAs={WithComponentH2} />
+    </>
+);
+
 interface TestContainerProps {
     size: "big" | "small";
     test?: boolean;