`css` from `@emotion/css` respects `autoLabel` from babel, but `css` from `@emotion/css/create-instance` does not

[cee-chen]

Current behavior:

1. Default @emotion/css behavior: https://codesandbox.io/s/emotion-css-autolabel-working-nqr8sv?file=/src/App.js

   

Note the -testStyles label appended to the end out of the output className.

2. createEmotion() from @emotion/css/create-instance: https://codesandbox.io/s/emotion-css-create-instance-autolabel-not-working-thphs9?file=/src/App.js

   

Note the identical var name/styles, now missing an auto label

To reproduce

See above CodeSandbox links. If you look at the .babelrc setups of both sandboxes, you'll note they both have @emotion/babel-plugin set up with autoLabel: 'always'.

Expected behavior:

I would expect the css generated from @emotion/css to have the same label behavior, regardless of whether it's Emotion's default export or one created by createEmotion({}).

FWIW, it's not totally clear to me whether the default @emotion/css autoLabel behavior is even intentional. If it's not, it would still be great to have parity on this, as I was surprised when I changed my local usage (in order to add a custom stylis plugin/prefixer) and spent a fair amount of time trying to debug whether it was an issue with my code before realizing that it was just how Emotion behaved.

Environment information:

• react version: v18.2.0
• @emotion/css version: v11.11.2
• @emotion/babel-plugin version: v11.11.0

[koukalp]

Hello. I experience the same. Is there a way to solve this?