Add support for css prop on custom elements

[overbalance]

The problem

Using the css prop on custom elements yields an html element with a css attribute instead of class.

Input

<my-component css={css`color:red`}></my-component>

Current output

<style data-emotion="css" data-s="">.css-q3dxqh{color:red;}</style>
<my-component css="css-q3dxqh"></my-component>

Proposed solution

Detect - in elements and output class="css-123456"

Expected output

<style data-emotion="css" data-s="">.css-q3dxqh{color:red;}</style>
<my-component class="css-q3dxqh"></my-component>

Additional context

The only issue I have observed for this exact case is the incorrect attribute. There was discussion in 2018 that may be relevant. #1071

I'd love to help but not sure exactly where to start.

[srmagura]

Which package are you importing the css function from?

[overbalance]

@srmagura I'm using import { css } from "@emotion/css";

[srmagura]

When using the css prop, you must import the css function from @emotion/react.

Also, it looks as though you have not configured the @emotion/react JSX runtime. The exact way to do this depends on the compiler you are using. Are you using Babel, tsc, swc, or something else?

[overbalance]

ESbuild via Remix btw

[Andarist]

Note that if you are using web components and you are only interested in using the @emotion/css package then you can just use the class prop:

<my-component class={css`color:red`}></my-component>