Emotion: babel-plugin-emotion labelFormat has no effect

[jooj123]

• emotion version: 9.2.8
• react version: 16.4.2
• babel-plugin-emotion version 9.2.8

Add this to my plugins section:

[
  'emotion',
  { labelFormat: '[filename]--[local]' },
]

has no effect on classnames

What happened:

The resulting css classnames are still like:

Reproduction:

See above config.

Note: If i add other config like sourceMap: true this works (adds source maps the babel-ed output)

[jooj123]

Bump - does this work for anyone else ? Ideally want control over this when working in development mode so I can find classnames via inspector easily

[emattias]

I have this problem when I use the css prop:

<div css={{color: 'red'}} >

but I do get the label when using the css() function directly

import { css } from 'emotion'
<div className={css({color: 'red'})} >

[emattias]

Could we have an option where the babel plugin looks for usage of css() and adds an import { css } from 'emotion' similar to how babel-plugin-react-require works with React import as an alternative (or full replacement) to the css prop?

The css() function is a more flexible solution that has a clear interface with react (through the className prop). Since it just provides a class name for you to do what you please with it can be used together with for example material-ui classes api: https://github.com/mui-org/material-ui/blob/v3.1.0/docs/src/pages/customization/overrides/ClassesState.js#L32-L35 which the css prop can not.

[jooj123]

my usage is like:

const stuff = css`
  color: red;
`;

<div className={stuff} >

And it doesnt work - I would have thought that would be the same as your second example that works for you ?

Im not sure what the solution (or even the source of the issue) is to this as I dont know enough about the emotion code base to comment

[mitchellhamilton]

@jooj123 You need to add autoLabel: true to your babel-plugin-emotion config

Could we have an option where the babel plugin looks for usage of css() and adds an import { css } from 'emotion' similar to how babel-plugin-react-require works with React import as an alternative (or full replacement) to the css prop?

Why not just import it? Auto-importing could confuse people who are new to a codebase and don't know where the css function comes from.

[emattias]

My thinking is that the css function is something that is used so much (often every file that has jsx) so it would warrant an auto import, like babel-plugin-react-require does for the React import.

Why not just import it? Auto-importing could confuse people who are new to a codebase and don't know where the css function comes from.

Couldn't you say the same with the css prop?

[mitchellhamilton]

Couldn't you say the same with the css prop?

Yes and that's part of why the css prop is changing with emotion 10 so it has to imported and you have to set the jsx pragma

[jooj123]

@mitchellhamilton adding autoLabel: true made no difference (I am using it in conjunction with labelFormat: '[filename]--[local]',)
Any other suggestions?

[erikmueller]

You need to add autoLabel: true to your babel-plugin-emotion config

If I read the docs correctly the default of autoLabel should be determined by NODE_ENV. So I expected only having "emotion" as a plugin should (in dev) set autoLabel: true, labelFormat: "[local]". However it seems to do nothing.

Also: shouldn't what @jooj123 tried at first also work in development (since autoLabel is true in dev)?

[jooj123]

autoLabel: true by itself seems to work now for some reason (and labelFormat defaults to [local]) - closing

[amaidah]

Everything seems to work great with:

"emotion": "^9.2.12",
"emotion-server": "^9.2.12",

"babel-plugin-emotion": "^9.2.11",