fix(react): type polymorphic as prop (#1414)

Author: Anber

.changeset/polymorphic-as-types.md

@@ -0,0 +1,5 @@
+---
+"@linaria/react": patch
+---
+
+Add typing for intrinsic props selected through the polymorphic `as` prop on styled components.

packages/react/__dtslint__/styled-jsx.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { styled } from '..';
+
+const Button = styled.button``;
+
+<Button as="a" href="/" />;
+// @ts-expect-error href requires an anchor-like target
+<Button href="/" />;

packages/react/__dtslint__/styled.ts

@@ -27,6 +27,12 @@ const StyledDiv = styled.div``;
 // $ExpectType "extends"
 isExtends<typeof StyledDiv, React.FC<React.DetailedHTMLProps<any, any>>>();
 
+const StyledButton = styled.button``;
+StyledButton({ as: 'a', href: '/' });
+StyledButton.defaultProps = { as: 'a' };
+// @ts-expect-error href requires an anchor-like target
+StyledButton({ href: '/' });
+
 const A = (): React.ReactElement => React.createElement('div', null);
 // @ts-expect-error
 styled(A)``;

packages/react/__dtslint__/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
+    "jsx": "react",
     "lib": ["es6"],
     "target": "ES2015",
     "esModuleInterop": true,

packages/react/src/styled.ts

@@ -260,10 +260,36 @@ function styled(tag: any): any {
   };
 }
 
+type FunctionComponentStatic<
+  TProps,
+  TKey extends PropertyKey,
+> = TKey extends keyof React.FunctionComponent<TProps>
+  ? React.FunctionComponent<TProps>[TKey]
+  : never;
+
+type StyledComponentWithAs<TProps> = {
+  <TAs extends keyof IntrinsicElements>(
+    props: TProps & { as: TAs } & IntrinsicElements[TAs],
+    context?: any
+  ): ReturnType<React.FunctionComponent>;
+  (
+    props: TProps & { as?: React.ElementType },
+    context?: any
+  ): ReturnType<React.FunctionComponent<TProps>>;
+  contextTypes?: FunctionComponentStatic<TProps, 'contextTypes'>;
+  defaultProps?: FunctionComponentStatic<
+    TProps & { as?: React.ElementType },
+    'defaultProps'
+  >;
+  displayName?: FunctionComponentStatic<TProps, 'displayName'>;
+  propTypes?: FunctionComponentStatic<
+    TProps & { as?: React.ElementType },
+    'propTypes'
+  >;
+};
+
 export type StyledComponent<T> = WYWEvalMeta &
-  ([T] extends [React.FunctionComponent<any>]
-    ? T
-    : React.FunctionComponent<T & { as?: React.ElementType }>);
+  ([T] extends [React.FunctionComponent<any>] ? T : StyledComponentWithAs<T>);
 
 type StaticPlaceholder = string | number | CSSProperties | WYWEvalMeta;