Export cx from @emotion/core

[FezVrasta]

Hi, would you accept a PR that makes cx a top level export from @emotion/core?

Right now to use it you have to either use <ClassName> or the emotion package.

[Andarist]

It's not a good idea within current design, because cx is eager whereas css from @emotion/core core is lazy-ish (it constructs an object, it doesnt insert the styles to the DOM, it also doesnt produce final class name - this happens in jsx).

cx just cant combine regular classes with css output outside of the render functions.

[FezVrasta]

Thanks for the answer, does it mean that the cx exposed by emotion is different from the one of ClassNames?

[Andarist]

Yes.

emotion/packages/core/src/class-names.js

Lines 106 to 111 in 554a29d

	let cx = (...args: Array<ClassNameArg>) => {
	if (hasRendered && process.env.NODE_ENV !== 'production') {
	throw new Error('cx can only be used during render')
	}
	return merge(context.registered, css, classnames(args))
	}

emotion/packages/create-emotion/src/index.js

Lines 104 to 106 in 554a29d

	let cx = (...args) => {
	return merge(cache.registered, css, classnames(args))
	}

[FezVrasta]

Oh ok I see, it makes sense then. Sorry for the waste of time!

[Eastonium]

I'm currently trying to use vanilla emotion's cx as a direct replacement for the classnames library. I'm not using it on styles generated by emotion, just for strings + objects. Should I still switch to using the cx provided by the ClassNames component's render prop function? Honestly I'm hesitant because the ClassNames component with its render function is awfully bulky and ugly.