Using @emotion/styled with preact and typescript

[Dangoo]

• emotion version: 10.0.9
• @emotion/styled version: 10.0.10
• preact version: 8.4.2
• typescript version: 3.4.5

Relevant code:

import styled from '@emotion/styled';
import { h, render } from 'preact';

const Component = styled.div`
    display: inline-block;
`;

render(<Component />, document.body);

What you did:
Tried to use @emotion/styled in a preact project

What happened:
JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>' is not a constructor function for JSX elements. Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>' is missing the following properties from type 'Element': nodeName, attributes, childrents(2605)

Problem description:
It seems like the old package preact-emotion silently disappeared with version 10.0.0 of emotion and the new version of @emotion/styled is based upon react as peerDependency.

The types for @emotion/styled are extending the following Interface from @types/react via @emotion/styled-base:

<Tag extends React.ComponentType<any>, ExtraProps = {}>(...)

Are there any plans/chances to get rid of the direct react dependency here in order to use the styled API e.g. with preact?

[drwpow]

Running into the same issue, and I also have the same question about preact-emotion. It seems to be deprecated with @emotion/core?

[birtles]

Based on #896 the prospects here look bleak.

[Dangoo]

Thanks @birtles for digging that one out, since there still was no other "official" statement.

Here the excerpt for people reading this later:

Supporting preact is getting impractical, it was easy in the past when there were very few differences in the react and preact APIs but as react has added new APIs […] it's getting significantly harder. […]
Also, preact-emotion has significantly fewer downloads (~1k vs ~150k downloads a week) than react-emotion so the low demand for it doesn't justify the cost of maintaining it.

Note that the emotion package will still be usable with preact and if someone wants to maintain a separate implementation of styled for preact, I'd be happy to give up the preact-emotion name on npm.

- @mitchellhamilton

@mitchellhamilton in #896 you added a ToDo list wich states Documentation. Could you add a line about the newly introduced incompatibility in the docs?