babel-plugin-emotion-rename
Automatically rename legacy emotion imports to new supported emotion versions
Demo repository with Webpack+Babel+React+Emotion11
How it works
- Scan all imports, try to rename legacy import from
emotion
/ react-emotion
to @emotion/css
- If it used styled, add additional new import
@emotion/styled
- If the emotion.css is used within styled, swap with css method from
@emotion/react
Compatibility:
- Legacy v9 to v11
- Some things may not be working, please checkout with caution!
- If you're using SSR, It's very recommended to also implement
@emotion/css
SSR integration as well for smoother migration
Known issues:
- If you import a variable from another file, and that variable is used within styled/css tagged template literal, then it's currently impossible to statically analyze and rename the import
Install
$ npm install --save-dev babel-plugin-emotion-rename
babelrc
{
"plugins": ["babel-plugin-emotion-rename"]
}
Codemod
- Codemod CLI coming soon, so that we can drop runtime transpilation step.
License
MIT