Typescript error when I refer to a component as selector

hemmxwxsoo commented 5 years ago

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 commented 5 years ago

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

pbitkowski commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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

Evan-Peuvergne commented 4 years ago

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

Evan-Peuvergne commented 4 years ago

@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 commented 4 years ago

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

Evan-Peuvergne commented 4 years ago

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

Thanks a lot @robertontiu :)

Anber commented 4 years ago

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.

callstack / linaria