Emotion: Allowing `css({})` for creating className strings in @emotion/core

[airtable-JayRansijn]

First of, Emotion is awesome, and open-source is hard, great work!

This question might have been asked, but I was wondering if the behavior of css({ }) to generate a class name is still possible in @emotion/core?

What I want

import { css } from '@emotion/core';

<div className={css({ background: 'red' })} />

Suggested solution:

Maybe use css({ }).className?

I know that ClassNames is exported, but this seems quite annoying to use as a render prop. If that's the way to go, any chance we could export ClassNames.css and ClassNames.cx as static methods?

[lee-reinhardt]

I believe the "css() generates/returns a class name" functionality is in the framework-agnostic emotion package as of v10.

See:

• https://emotion.sh/docs/introduction#framework-agnostic
• https://emotion.sh/docs/emotion

If you were asking for this to be _specifically_ added in @emotion/core, then carry on; but the re-org of the packages was a little unclear at first. However, I think the intro docs explain the goal of each package very well now.

[airtable-JayRansijn]

Thanks @lee-reinhardt!

[tomitrescak]

If I import @emotion/core and emotion as well will not that duplicate the size ?

[Andarist]

Not by that much as you could have expect because a good chunk of of the code is shared between those packages

[tomitrescak]

Thanks!