Emotion v10 unusable with pure TypeScript

[kzuraw]

• emotion version: 10.0.0
• react version: 16.6.3
• typescript version: 3.1.6

Relevant code.

const flexContainer = css`
  display: flex;
  justify-content: space-between;
`;

What you did:
I've tried to use it as:

<div className={flexContainer.styles} />

Or:

<div css={flexContainer} />

What happened:
I've got this in html:

<div class="
  display: flex;
  justify-content: space-between;
"></div>

Or:

<div css="[object Object]"></div>

I'm using only TypeScript without babel.

Problem description:
How can I use css or className with emotion v10 and TypeScript?

[TrySound]

@krzysztofzuraw Do you have jsx pragma? It's hard to say without reproducing example.

[kzuraw]

@TrySound sure - I will prepare codesandbox 😄

[kzuraw]

@TrySound Codesandbox example: https://codesandbox.io/s/mm0pymo5v8

[Andarist]

Working example: https://codesandbox.io/s/2j01mr3m1y . I've added "jsxFactory": "jsx", option, import { jsx } from @emotion/core and jsx pragma (/** @jsx jsx */). This probably can be simplified - I just dont know how to automate it.

Type checking css prop doesnt quite work on this sandbox. Probably @Ailrun will know what to do about it.

[jacoporicare]

FYI having "jsxFactory": "jsx" means that you would have to add import { jsx } from '@emotion/core'; to every single React component.
To be honest I'm really sad about this change (jsx pragma in every file you need css prop) in Emotion 10 👎.

[Andarist]

With babel this all can be automated - no need for any manual wiring up. Im just not that experienced with TS to know how to achieve the same with it (I suspect there is one though).

[jacoporicare]

I see, that means no jsx pragma with the plugin? I haven't found this information in the docs, sorry ☹️. I'm afraid that with pure TypeScript compiler there's only the js pragma way or jsxFactory option but that would mean the import as I mentioned earlier.

[Ailrun]

@Andarist
TS does not support typechecking based on JSX pragma (we cannot change typing when users change JSX pragma), so current TS typing just have css props when users import @emotion/core.
And this issue actually is not about TS, but about the way to use emotion@10, since @krzysztofzuraw missed JSX pragma, and used className instead of css.

[Andarist]

So it should just work when importing from @emotion/core, right?

…

On Fri, 7 Dec 2018 at 17:18, Junyoung Clare Jang ***@***.***> wrote: @Andarist <https://github.com/Andarist> TS does not support typechecking based on JSX pragma (we cannot change typing when users change JSX pragma), so current TS typing just have css props when users import @emotion/core. And this issue actually is not about TS, but about the way to use ***@***.***, since @krzysztofzuraw <https://github.com/krzysztofzuraw> missed JSX pragma, and used className instead of css. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1046 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJWMkhpNIGGNpcWuEHDmltQJ3QnfI9QEks5u2pTpgaJpZM4Y3prj> .

[Ailrun]

Type check will work with imported @emotion/core, but since emotion@10 requires JSX pragma to be executed, user should put JSX pragma.

[joe-bell]

Whilst not pretty, a temporary solution is to state jsx; after declaring the pragma
(no need to set "jsxFactory" and import in each file)

/** @jsx jsx */ jsx;

For example

/** @jsx jsx */ jsx;
import * as React from "react";
import { jsx, css } from "@emotion/core";

const yolo = css({
  color: "lightcoral"
});

and then use like so

<p css={yolo}>swaggins</p>

[bitttttten]

I am struggling to use the css prop and jsx pragma with typescript (using CRA) and I get ReferenceError: jsx is not defined.

/** @jsx jsx */ jsx
import { jsx, css } from '@emotion/core'

@joe-bell this fixes it for me, but aren't you're still having to declare the jsx pragma in each file?