Compiler error using `createCss` and `compose` when using a custom utility

[federico-paolillo]

I've setup a sample repository that shows the issue if anybody wants to reproduce it.

I'm using TypeScript without create-react-app and I'm trying to create a custom utility like so:

import { compose, createCss, style, system } from "@xstyled/styled-components";

export const lineClamp = style({
    prop: "lineClamp",
    css: lineClampValue => ({
        "&": {
            display: "-webkit-box",
            "-webkit-line-clamp": String(lineClampValue),
            "-webkit-box-orient": "vertical",
            overflow: "hidden"
        }
    })
});

export const { x } = createCss(
    compose(system, lineClamp)
);

This piece of code compiles just fine, but when I try to use the x exported from this code to use the new lineClamp property, like so:

<x.p
    lineClamp="2"
    h="256px"
    w="100%"
/>

I get the following error (sorry for the size) when trying to compile the code with TypeScript:

src/App.tsx:14:17 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "color">, "hidden" | ... 252 more ... | "is"> & { ...; }, "color"> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ lineClamp: string; h: string; w: string; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "color">, "hidden" | ... 252 more ... | "is"> & { ...; }, "color"> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'lineClamp' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "color">, "hidden" | ... 252 more ... | "is"> & { ...; }, "color"> & Partial<...>, "theme"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<SafeIntrinsicElement<"p">, DefaultTheme, {}, "color", SafeIntrinsicElement<"p">, SafeIntrinsicElement<"p">>): ReactElement<...>', gave the following error.
    Type '{ lineClamp: string; h: string; w: string; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "color">, "hidden" | ... 252 more ... | "is"> & { ...; }, "color"> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'lineClamp' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "color">, "hidden" | ... 252 more ... | "is"> & { ...; }, "color"> & Partial<...>, "theme"> & { ...; } & { ...; }'.

14                 lineClamp="2"
                   ~~~~~~~~~

I've tried to mess around with the generic parameters of createCss and compose but I could not figure out how to make this work.

I'm using:

• TypeScript v4.3.2
• React 17.0.2
• xstyled/styled-components v5.3.0
• styled-components v5.3.0

[gregberge]

@federico-paolillo you should define props when you define style, give a look to interactivity.ts for inspiration.