use API className={css}

[xialvjun]

In README.md at 2018.05.08，
to use emotion/next, we can only use either jsx or styled.xxx.

I don't like any of them.

Can we have an api className={css``}?

[emmatown]

Could you explain why you prefer className={css``}? One of the main reasons for emotion-js/next was to move style insertion into the React tree and this can't happen by using className={css``}.

[xialvjun]

Well, I see, className={css``} is impossible.

Then how about:

// wrong because it's global... or we can just use it as global
<Style css={`.abc { color: red; }`}>
  <div className="abc">123</div>
</Style>


<Style css={`background:blue; & .abc { color: red; }`}>
  {css => <div className={css.default}><div className={css.abc}>123</div></div>}
</Style>

// or

<Style css={`background:blue; & .abc { color: red; }`}>
  {className => <div className={className}><div className="abc">123</div></div>}
</Style>

I don't like jsx is just because I don't think jsx function is not clean.

I don't like styled.xxx is because I need to define extra Component.

[emmatown]

I don't think the API you're proposing would be very good and I think that they would cause problems because both of your examples force you to name a class which is something that we're trying to avoid. Also, the first example would cause problems if you use the same class name down further down the tree. The second example would be difficult to implement well because of the way emotion works and supporting that would make it less performant. It would also create many edge cases, for example what if the selector is #some-id?

Could explain why you think jsx is not clean?