SolidJS + typescript tw/css attribute type issues

[ben-rogerson]

Could you add some details to this issue?

[Antebios]

I want to use it with SolidJS, but it complains with the error message:

Type '{ tw: string; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
Property 'tw' does not exist on type 'InputHTMLAttributes<HTMLInputElement>'.ts(2322)

(property) tw: string

I suspect it has something to do with the "twin.d.ts" file. What is the name of the module it is expecting for SolidJS? I've tried different combinations and nothing has worked.

[ben-rogerson]

Have you got the following in your tsconfig?

"jsxImportSource": "solid-js",

Because it looks like that value overrides the values in twin.d.ts. We could change this to "jsx": "preserve", but I think that may cause other issues. I'm not quite sure what a fix here is on this - I had no luck extending the types, perhaps you'll have better luck.

[Antebios]

Yes, I do have "jsxImportSource": "solid-js", in my tsconfig file. But I also have the "jsx": "preserve", already in my config also.

This is what I have set in my twin.d.ts file, but it doesn't help.

declare module 'solid-js' {
  // The css prop
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: CSSProp
    tw?: string
  }
  // The inline svg css prop
  interface SVGProps<T> extends SVGProps<SVGSVGElement> {
    css?: CSSProp
    tw?: string
  }
}

If I remove "jsxImportSource": "solid-js", it also fails to compile. To me it's a no win scenario.