Typescript error when using composing component and using as prop

[karltaylor]

Bug report

Describe the bug

When composing a styled component, typescript throws an error when using a variant prop and an as prop. The error:

No overload matches this call.
  Overload 1 of 3, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "size" | "css"> & TransformProps<...> & { ...; }, "css" | "as"> & TransformProps<...> & { ...; }): ReactElement<...> | null', gave the following error.
    Type 'string' is not assignable to type 'undefined'.
  Overload 2 of 3, '(props: Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "css" | "as"> & TransformProps<...> & { ...; }): ReactElement<...> | null', gave the following error.
    Type '{ children: string; as: "h3"; size: string; }' is not assignable to type 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "css" | "as"> & TransformProps<...> & { ...; }'.
      Property 'size' does not exist on type 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "css" | "as"> & TransformProps<...> & { ...; }'.
  Overload 3 of 3, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "size" | "css"> & TransformProps<...> & { ...; }, "css"> & TransformProps<...> & { ...; }): ReactElement<...> | null', gave the following error.
    Type '{ children: string; as: string; size: "xl"; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "size" | "css"> & TransformProps<...> & { ...; }, "css"> & TransformProps<...> & { ...; }'.
      Property 'as' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "size" | "css"> & TransformProps<...> & { ...; }, "css"> & TransformProps<...> & { ...; }'.ts(2769)
[styled-component.d.ts(27, 5): ]()The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "size" | "css"> & TransformProps<...> & { ...; }, "css" | "as"> & TransformProps<...> & { ...; }'

To Reproduce

Here is a codesandbox link and code:

import "./styles.css";

import { styled } from "@stitches/react";

export const Title = styled("h1", {
  fontFamily: "Helvetica",
  margin: 0,

  variants: {
    size: {
      xl: {
        fontSize: 42
      },
      lg: {
        fontSize: 26
      }
    }
  }
});

const ComposedTitle = styled(Title, {
  marginTop: 25
});

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Title>Basic Title</Title>
      <ComposedTitle>Composed H1 Title</ComposedTitle>
      <ComposedTitle as="h3">Composed Title as h3</ComposedTitle>
      <ComposedTitle as="h3" size="xl"> // <!-- this will error
        Composed Title as h3 but size xl
      </ComposedTitle>
    </div>
  );
}

Expected behavior

No ts error

System information

• OS macOS
• Version of Stitches: "@stitches/react": "^1.2.6"
• Version of Node.js: 14.17.0

Additional context

Really enjoying stitches btw it's awesome ☺️

[hadihallak]

This is a duplicate of #749 which is now fixed under a canary release.
could you please upgrade to the latest canary1.2.7-0 and test again?

[karltaylor]

@hadihallak Yep can confirm in the Codesandbox 1.2.7-0 fixes this ts issue. Thankyou