How to use emotion without Babel?

[screendriver]

This is not a bug report but a general question: is it possible to use emotion without Babel and the corresponding emotion/babel plugin? I'm not using Babel, webpack and React. Instead I use TypeScript, fuse-box and Preact.

It seems a little bit overblown to add Babel, the emotion Babel plugin and expand my build chain only "just" for emotion.

I would be grateful for any help.

[thangngoc89]

@screendriver hi there, AFAIK emotion is integrated deeply into babel toolchain. You need babel to use emotion. If you don't want to add babel, you can use others alternative CSS-in-JS styling solution like styled-component/glamarous

[screendriver]

This is a pity 😞 The only answer that I didn't want to hear. The AFAIK in your answer gives me a little hope that there is someone out there that could find another solution ☺️

[tkh44]

You can use the raw api that babel converts the strings into. It would be verbose but it is very fast. You don't get extraction either.

import { css } from 'emotion'

const H1 = css(['css-H1-duiy4a'], [colorVariable], function createEmotionStyles(colorVariable) {
  return [`.css-H1-duiy4a { color:${colorVariable} }`]
})

[tkh44]

@screendriver You do not need babel to run emotion as version 8.

https://codesandbox.io/s/5v42zojqll

[elektronik2k5]

@tkh44 I'm considering replacing styled-components with react-emotion in a large project, but don't wanna introduce Babel into my pure TypeScript project. styled-components has typescript-plugin-styled-components, but emotion doesn't.
I realize the core API is available without the plugin, but I can't migrate without the additional features, which the plugin offers. :(

Are there any plans to port the babel plugin to typescript?
Thanks!

[Andarist]

Are there any plans to port the babel plugin to typescript?

IMHO that would be a duplicated effort

I realize the core API is available without the plugin, but I can't migrate without the additional features, which the plugin offers. :(

Upcoming emotion@10 is going to support all features out of the box - babel plugin will be used merely to optimize (like bundle size) the output.

[elektronik2k5]

That's great news! Thanks for the update :)

[Brooooooklyn]

https://github.com/LeetCode-OpenSource/emotion-ts-plugin

[elektronik2k5]

@Brooooooklyn that awesome!!! Are you planning to get your transformer to feature parity with the Babel plugin?

[Brooooooklyn]

@elektronik2k5 yes, we are planning to use emotion in production, and I will keep developing this plugin.

[sekoyo]

@Andarist it's not exatly clear to me if the babel plugin just minifies, or is it optimizing something more important like the parsing of css string literals into AST?

[Andarist]

@dominictobias - no, AST is not produced at build time. Babel is used only for minifying, source map generation, label insertion, and similar. It's supposed to enhance the developer experience but it doesn't influence the overall perf characteristics too much.