Typescript errors seen while wrapping styled function and passing to it arguments

[yurkimus]

Environment

• Linaria version: 3.0.0-beta.13
• Bundler (+ version): webpack 5.62.1
• Node.js version: 16.3.0
• OS: macOS

Description

When I try to abstract from tag passed to styled function I recieve some errors within that scope:

Type Error while passing Component into the styled

Error text:

No overload matches this call.
  Overload 1 of 3, '(tag: Props & FlowProps extends { className?: string | undefined; } ? FC<Props & FlowProps> : never): ComponentStyledTag<FC<Props & FlowProps>>', gave the following error.
    Argument of type 'FC<Props>' is not assignable to parameter of type 'Props & FlowProps extends { className?: string | undefined; } ? FC<Props & FlowProps> : never'.
  Overload 2 of 3, '(tag: never): ComponentStyledTag<FC<Props & FlowProps>>', gave the following error.
    Argument of type 'FC<Props>' is not assignable to parameter of type 'never'.ts(2769)

Type Error while writing styles in template tags

Error text:

Argument of type '[({ align }: { align: any; }) => any]' is not assignable to parameter of type 'Props & FlowProps extends { style?: CSSProperties | undefined; } ? (StaticPlaceholder | ((props: NoInfer<Props & FlowProps>) => string | number))[] : StaticPlaceholder[]'.ts(2345)
Binding element 'align' implicitly has an 'any' type.ts(7031)

Code works fine and I have editor suggestions while using Implementation Component from demo. But compiler errors looks sad :(

Reproducible Demo

import { FC } from 'react'
import { styled } from '@linaria/react'

interface FlowProps {
  centered: boolean
}

interface ScaleProps {
  wide: boolean
}

interface ComponentProps {
  title: string
}

const Flow = <Props extends object>(Component: FC<Props>) => styled<
  FC<Props & FlowProps>
>(Component)`
  align-items: ${({ align }) => align};
`

const Scale = <Props extends object>(Component: FC<Props>) => styled<
  FC<Props & ScaleProps>
>(Component)`
  width: ${({ wide }) => (wide ? '100%' : 'auto')};
`

const Component: FC<ComponentProps> = (props) => <div {...props} />

const Implementation = Flow(Scale(Component))

;(() => <Implementation title='Title' wide centered />)()

[Anber]

Looks like a duplicate of #870

Could you please try to add import React from "react"?

[yurkimus]

I tried and it doesn't help.

In my case there is more "interesting" type error then in #870.

[Anber]

There are a few problems:

1. Linaria checks that the target component has className property and, in case of using props-based interpolation, style property. So, your Props and ComponentProps should extend an interface like { className?: string; style?: React.CSSProperties; }.
2. You described Component as FC<TProps>, but then tried to say that Linaria expects FC<FlowProps & TProps>. Looks like you wanted to do something like that: styled(Component)<FlowProps>`some-styles`;.
3. You tried to address align property that was defined neither in Props nor FlowProps.
4. And the biggest problem, that we somewhat cannot infer type from a component that passed as an argument to a function.

There is a version with the workaround for 4th problem.

I'll try to figure out how to fix styled in order to support inferring in such cases. Thank you for the report!