babel-plugin-emotion@10.0.13 is broken

Hello,

After upgrading babel-plugin-emotion to the lastest version (10.0.13), we noticed that our build was broken.

After some investigation 🕵️‍♂️ , we noticed that we use a special syntax that makes the plugin to crash during the build step. Here is an example (you can see a complete example in the reproduction repository)

import { css } from "emotion"
import cn from "classnames"

function CustomComponent({someBoolean}) {
    return (
        <div
            className={cn("static classname", {
                [css({ padding: 10 })]: someBoolean,
            })}
        >
            Hello World
        </div>
    )
}

It seems to occur when we use the css function as a computed key of an object.

Here is the message thrown in the console when running yarn build on the reproduction repository:

$ yarn build 
yarn run v1.16.0
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.

./src/App.js
TypeError: Cannot read property 'charAt' of undefined
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The output of our real project is slightly more verbose, can help to debug:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
    TypeError: Cannot read property 'charAt' of undefined
        at getIdentifierName (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:286:22)
        at getLabelFromPath (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:206:19)
        at transformExpressionWithStyles (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:468:19)
        at /xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:589:43
        at Array.forEach (<anonymous>)
        at /xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:581:48
        at Array.forEach (<anonymous>)
        at macro (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:567:29)

I think the bug was introduced in this commit: https://github.com/emotion-js/emotion/commit/7bad392c3dccacb1d9adcaba63438d21030b9fd1#diff-8845e5e5474dfc2bb6c485679ab9dce3

For now, we downgraded babel-plugin-emotion.

To reproduce:

Here is a reproduction repository: https://github.com/titouancreach/babel-plugin-emotion-repro. It was created with create-react-app, then I ejected to be able to add babel-plugin-emotion. You can find the crash by building the project using yarn build.

Version of packages:

• React: 16.8.6 (latest)
• Emotion: 10.0.9 (latest)
• babel-plugin-emotion: 10.0.13 (latest)

Thank you very much!

[titouancreach]

@kevinSuttle no

[titouancreach]

Thanks @JSteunou