Typing of reference to other component seems broken

[mvestergaard]

• emotion version: 9.1.1
• react version: 16.3
• typescript version: 2.8.1

Relevant code.

const Child = styled.div`
  color: red;
`;

const Parent = styled.div`
  ${Child} {
    color: blue;
  }
`;

This results in the following error on ${Child}:

Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'CSSProperties | { [key: string]: ObjectStyleAttributes; } | ((props: ThemedProps<{ innerRef?: str...'.
  Type 'TemplateStringsArray' is not assignable to type '(props: ThemedProps<{ innerRef?: string | ((instance: HTMLDivElement | null) => any) | undefined;...'.
    Type 'TemplateStringsArray' provides no match for the signature '(props: ThemedProps<{ innerRef?: string | ((instance: HTMLDivElement | null) => any) | undefined; } & { children?: ReactNode; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any>): ObjectStyleAttributes'.

Workaround for now:

const Parent = styled.div`
  ${Child as any} {
    color: blue;
  }
`;

[mvestergaard]

Here's an example repo https://github.com/mvestergaard/emotion625
I included an example of the same thing using styled-components which works. Maybe their typings can be used as a reference.

As far as I can tell, the issue stems from these two overloads:
https://github.com/emotion-js/emotion/blob/master/packages/react-emotion/types/index.d.ts#L58

export interface CreateStyled<Props, Theme, IntrinsicProps> {
  // overload for template string as styles
  (
    strings: TemplateStringsArray,
    ...vars: Array<Interpolation<ThemedProps<Props & IntrinsicProps, Theme>>>
  ): StyledComponent<Props, Theme, IntrinsicProps>;

  // overload for object as styles
  (
    ...styles: Array<
      | ObjectStyleAttributes
      | ((
          props: ThemedProps<Props & IntrinsicProps, Theme>
        ) => ObjectStyleAttributes)
    >
  ): StyledComponent<Props, Theme, IntrinsicProps>;
}

Usually when writing the css as a normal template string, it will use the first overload, but as soon as a reference to another styled component is used, it ends up in the second overload, which causes the error above.

@DanielRosenwasser Could you or someone from your team point us in the right direction to fix this?

[mvestergaard]

Right after writing that comment, I think I may have found the answer.

Changing InterpolationTypes (https://github.com/emotion-js/emotion/blob/master/packages/react-emotion/types/index.d.ts#L13) to include StyledComponent seems to do the trick.

export type InterpolationTypes<Props = {}> =
  | InterpolationFn<Props>
  | EmotionInterpolation
  | StyledComponent<any, any, any>;

I'll add a PR