From 8c5ccdc9ed63b9611e5f3407e24c82bdbcac1c0a Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Mon, 17 Aug 2020 09:20:06 +0200
Subject: [PATCH] fix: opt out of typechecking styled.X when `as` prop is given

---
 packages/mdx/src/index.ts   |  2 +-
 packages/mdx/test/index.tsx | 40 +++++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/mdx/src/index.ts b/packages/mdx/src/index.ts
index 90e186651..cbb9b198d 100644
--- a/packages/mdx/src/index.ts
+++ b/packages/mdx/src/index.ts
@@ -98,7 +98,7 @@ export type WithPoorAsProp<
 } & (As extends undefined ? Props : { [key: string]: unknown })
 
 export interface ThemedComponent<Name extends ElementType> {
-  <As extends ElementType | undefined>(
+  <As extends ElementType | undefined = undefined>(
     props: WithPoorAsProp<ComponentProps<Name>, As>
   ): JSX.Element
 }
diff --git a/packages/mdx/test/index.tsx b/packages/mdx/test/index.tsx
index 9a8068ce5..a6d859c1f 100644
--- a/packages/mdx/test/index.tsx
+++ b/packages/mdx/test/index.tsx
@@ -63,6 +63,7 @@ test('components with `as` prop receive all props', () => {
 
 test('cleans up style props', () => {
   const json = renderJSON(
+    // @ts-expect-error
     <Styled.h1 mx={2} id="test">
       Hello
     </Styled.h1>
@@ -114,3 +115,42 @@ test('keys of components match snapshot', () => {
     ]
   `)
 })
+
+test('opt out of typechecking props whenever `as` prop is used', () => {
+  expect(
+    renderJSON(
+      <div>
+        {/* no error */}
+        <Styled.img
+          as="button"
+          src={2}
+          onClick={(_event) => {
+            // @ts-ignore todo: this fails in tests, but it shouldn't.
+            _event.x = 2
+          }}
+        />
+        <Styled.img
+          // @ts-expect-error Type 'number' is not assignable to type 'string'.ts(2322)
+          src={2}
+          onClick={(_event) => {
+            // @ts-expect-error Property 'y' does not exist on type 'MouseEvent<HTMLImageElement, MouseEvent>'.ts(2339)
+            _event.y = 2
+          }}
+        />
+      </div>
+    )
+  ).toMatchInlineSnapshot(`
+    <div>
+      <button
+        className="emotion-0"
+        onClick={[Function]}
+        src={2}
+      />
+      <img
+        className="emotion-0"
+        onClick={[Function]}
+        src={2}
+      />
+    </div>
+  `)
+})