TS Error: Property 'sx' does not exist on type 'HTMLAttributes' when using Preact

[likidu]

Describe the bug
I am trying to use theme-ui with a Preact app with Typescript. When I am using the sx prop, there was Typescript error prompted in the editor.

To Reproduce
Steps to reproduce the behavior:

I am using VS Code with ESlint and Prettier extensions. A simple button.tsx:

/** @jsx jsx*/
import { h } from "preact"
import { jsx } from "theme-ui"

type ButtonProps = {
  text: string
}

const Button: preact.FunctionalComponent<ButtonProps> = ({ text }) => (
  <div sx={{ m: 3 }}>
    <button type="button" tabIndex={0} >
      <p>{text}</p>
    </button>
  </div>
)

export default Button

The code can be compiled successfully with the right CSS applied to it. But it's with the VS Code, it shows the sx prop has error:

Type '{ children: Element; sx: { m: number; }; }' is not assignable to type 'HTMLAttributes'.
Property 'sx' does not exist on type 'HTMLAttributes'. .ts(2322)

And one more side effect here is I have set the pragma as h which is using the Preact. But to use sx from theme-ui, it requires to add /** @jsx jsx */ at the beginning of the module which overlaps the Preact one. Then it also gives a warning:

'h' is defined but never used.eslint(@typescript-eslint/no-unused-vars)

Expected behavior
There should be none errors shown in the editor when using theme-ui with Preact in Typescript.

Screenshots

Additional context
Npm package versions:

• theme-ui: 0.3.1
• preact: 10.0.0

[CanRau]

Not sure it already supports Preact 🤔

By default the Babel plugin will convert JSX into React.createElement, but libraries like Preact, MDX, Emotion, and Vuejs use custom create elements functions with JSX.

quote from theme-ui.com/guides/jsx-pragma

Edit: Just remembered that I use theme-ui along gatsby-plugin-preact and I haven't noticed any issues. Not exactly sure it's actually using Preact tho 😅🤣

[jxnblk]

Yes, this library is only intended for use with React and Preact may or may not work. You can use some of the underlying utilities that theme-ui is built with (like @theme-ui/css) if you want to use this outside of React

[hasparus]

@likidu You can alias react and react-dom to preact/compat in your webpack config. Then, React.createElement that jsx function is using is actually h from Preact.

To let TypeScript know what sx prop is, you'd have to use module augmentation.
Take a look how @types/theme-ui sets this up for React.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/theme-ui/index.d.ts#L221-L231

I'd try declaration merging of preact.PreactDOMAttributes
https://github.com/preactjs/preact/blob/master/src/index.d.ts#L61-L66

something along these lines

/** @jsx jsx */
import { jsx, SxStyleProp } from 'theme-ui';

declare global {
  namespace preact {
    interface PreactDOMAttributes {
      sx: SxStyleProp
    }
  }
}

[lachlanjc]

@hasparus Can we close?