Typescript error when I refer to a component as selector

Environment

• typescript 3.3.3
• linaria 1.3.1

Description

I got a type error like below when I try to refer to a component.

`Argument of type 'FunctionComponent<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { as?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | ... 163 more ... | undefined; }>' is not assignable to parameter of type 'string | number | CSSProperties | ((props: PropsWithChildren<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { as?: "symbol" | "object" | "big" | "link" | "small" | "sub" | ... 168 more ... | undefined; }>) => string | number)'.
  Type 'FunctionComponent<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { as?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | ... 163 more ... | undefined; }>' is not assignable to type '(props: PropsWithChildren<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { as?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | ... 163 more ... | undefined; }>) => string | number'.
    Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'string | number'.
      Type 'null' is not assignable to type 'string | number'.`

Reproducible Demo

import { styled } from 'linaria/react';

const a = styled.div`
    width: 1px;
`;

const b = styled.div`
    ${a} b {          // -> error at ${a}
        width: 2px;
    }
`;

I think that it has to be fixed on linaria/react.d.ts.

from

type StyledTag<T> = <Props = T>(
  strings: TemplateStringsArray,
  ...exprs: Array<
    string | number | CSSProperties | ((props: Props) => string | number)
  >
) => StyledComponent<Props>;

to

type StyledTag<T> = <Props = T>(
  strings: TemplateStringsArray,
  ...exprs: Array<
    string | number | CSSProperties | ((props: Props) => string | number) | StyledComponent<any>
  >
) => StyledComponent<Props>;

[satya164]

You’re right! It’ll be awesome if you can send a PR for that

[Anber]

The problem with styled is solved in 1.4, but there was the same problem with css tag. Fix for css will be released with the next beta.