Skip to content

@emotion/babel-plugin incompatible with Babel 8 #3386

Description

@tylercraft

@emotion/babel-plugin calls path.hoist() in transformCssCallExpression, but that method was removed from @babel/traverse in v8. Any project that upgrades to Babel 8 breaks at build time with no path forward other than pinning Babel back to 7.

Reproduction

  1. Project on @emotion/babel-plugin@11.13.5
  2. Upgrade @babel/core (which pulls @babel/traverse@8) to v8
  3. Run any build that compiles a file using css, styled, or a css JSX prop

Result:

TypeError: <file>.tsx: path.hoist is not a function
      at transformCssCallExpression (@emotion/babel-plugin/dist/emotion-babel-plugin.cjs.js:1086:10)
      at cssTransformer (@emotion/babel-plugin/dist/emotion-babel-plugin.cjs.js:1159:3)
      at @emotion/babel-plugin/dist/emotion-babel-plugin.cjs.js:847:11
      at Array.forEach (<anonymous>)
      ...
      at macroWrapper (babel-plugin-macros/dist/index.js:57:12)
      at PluginPass.ImportDeclaration (@emotion/babel-plugin/dist/emotion-babel-plugin.cjs.js:1371:9)

An @emotion/babel-plugin release that targets @babel/traverse @8's API (replacing path.hoist() with the
equivalent - probably manual extraction + insertion at the program scope since that's what hoist did under the hood). Happy to send a PR if there's a quick pointer to the intended replacement strategy.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions