Removed type for as prop for composite components (#2240)

* fix #2238: TS declarations - remove `as` prop from components composed with `styled`

* Add changeset to PR 2240

Co-authored-by: Mateusz Wolszczak <mateusz@wolszczak.io>

.changeset/tall-chairs-watch.md

@@ -0,0 +1,5 @@
+---
+'@emotion/styled': patch
+---
+
+`as` prop has been removed from TypeScript declarations for composite components. This prop has not actually been handled by default by `styled` for those components - to make `styled` handle it you need to provide a custom `shouldForwardProp` that doesn't forward the `as` prop.

packages/styled/types/base.d.ts

@@ -128,7 +128,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     Pick<PropsOf<C>, ForwardedProps> & {
       theme?: Theme
-      as?: React.ElementType
     },
     {},
     {
@@ -142,7 +141,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     PropsOf<C> & {
       theme?: Theme
-      as?: React.ElementType
     },
     {},
     {
@@ -161,7 +159,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     Pick<PropsOf<C>, ForwardedProps> & {
       theme?: Theme
-      as?: React.ElementType
     }
   >
 
@@ -171,7 +168,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     PropsOf<C> & {
       theme?: Theme
-      as?: React.ElementType
     }
   >
 

packages/styled/types/tests.tsx

@@ -181,4 +181,39 @@ const Input5 = styled.input`
   `
   ;<StyledWithAs as="section" />
   ;<StyledWithAs as={Section} />
+  // $ExpectError
+  ;<StyledWithAs as="random string" />
+
+  const ComposedWithAs = styled(StyledWithAs)`
+    flex-direction: column;
+  `
+  ;<ComposedWithAs as="section" />
+  ;<ComposedWithAs as={Section} />
+  // $ExpectError
+  ;<ComposedWithAs as="random string" />
+
+  const ComponentWithAs: React.FC<{ as: string; className?: string }> = ({
+    as,
+    className
+  }) => <div className={className}>{as}</div>
+
+  const StyledComp = styled(ComponentWithAs)`
+    background: orange;
+  `
+  ;<StyledComp as="random string" />
+  // $ExpectError
+  ;<StyledComp as={Section} />
+
+  const ComponentWithoutAs: React.FC<{ className?: string }> = props => (
+    <div {...props} />
+  )
+  const StyledCompWithoutAs = styled(ComponentWithoutAs)`
+    background: hotpink;
+  `
+  // $ExpectError
+  ;<StyledCompWithoutAs as="random string" />
+  // $ExpectError
+  ;<StyledCompWithoutAs as="section" />
+  // $ExpectError
+  ;<StyledCompWithoutAs as={Section} />
 }