@emotion/babel-plugin's autoLabel outputting verbose classNames in production by default

[neefrehman]

Current behavior:

Using @emotion/babel-plugin is generating longer classNames than expected in production. I can see that after build each component has two classNames: one longer one that contains the component name and references it's styles, and one shorter one that is only a hash, and has no references to any styles. Changing the config for this option to never improved things, but still contained the (seemingly) extraneous className? Results from testing below:

Method	Generated classNames in production
Without babel plugin	css-1vj8at2
With default (dev-only)	css-1qtu1e0-StyledHomePage e1lgw2vu1
With never	css-1445odi e1lgw2vu1

From a quick look at the source code I think the problem lies here:

emotion/packages/babel-plugin/src/utils/get-styled-options.js

Line 33 in fa97767

let label = autoLabel !== 'never' ? getLabelFromPath(path, state, t) : null

I think a fix might be to use something like:

const shouldLabel = autoLabel !== 'never' || (autoLabel === 'dev-only' && process.env.NODE_ENV === "development")
let label = shouldLabel ? getLabelFromPath(path, state, t) : null

Although that would still add the extraneous className when set to never (like e1lgw2vu1 above), I'm not sure if that's a separate bug?

To reproduce:

1. Clone this minimal reproduction repo
2. run npm run build && npm run start
3. Check the generated classes
4. Rinse and repeat after changing the settings in .babelrc

Expected behavior:

A production build with the babel plugin should output only the least verbose classNames for elements.

Environment information:

• react version: 17.0.1
• next version: 10.0.3
• @emotion/react version: 11.1.1
• @emotion/styled version: 11.0.0
• @emotion/babel-plugin version: 11.0.0

[Andarist]

If you are running your site in production and you are seeing labels added with the default dev-only then it is a bug - I will take a look at this.

As to the other class name that seems to be extraneous - it's a "stable" class name that allows this: https://emotion.sh/docs/styled#targeting-another-emotion-component