Typescript error when I refer to a component as selector

[hemmxwxsoo]

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

[pbitkowski]

It looks like we had PR for this issue but the test case for solution were missing. This issue is up for grabs, just add test case for this PR #372

[robertontiu]

Hey. I'm trying to use linaria in a typescript project and this is a kick in the teeth atm. Currently overriding types locally based on #372

[ShanonJackson]

This library is so good, yet the typescript problems just are left unfixed for months on months.

[Evan-Peuvergne]

I still get the error, does anyone know if it will be fixed soon ?

[Evan-Peuvergne]

@robertontiu

Hey. I'm trying to use linaria in a typescript project and this is a kick in the teeth atm. Currently overriding types locally based on #372

Can I get your local overring types file ? :)

[robertontiu]

@Evan-Peuvergne
Hey Evan. Here you go https://github.com/robertontiu/nextjs-boilerplate/blob/master/linaria.d.ts

[Evan-Peuvergne]

@Evan-Peuvergne
Hey Evan. Here you go https://github.com/robertontiu/nextjs-boilerplate/blob/master/linaria.d.ts

Thanks a lot @robertontiu :)

[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.