https://github.com/antonybudianto/babel-plugin-emotion-rename

Babel plugin to rename old Emotion 9 imports to new Emotion 11 imports
https://github.com/antonybudianto/babel-plugin-emotion-rename

emotion emotion11 react-emotion

Last synced: about 1 month ago
JSON representation

Babel plugin to rename old Emotion 9 imports to new Emotion 11 imports

• Host: GitHub
• URL: https://github.com/antonybudianto/babel-plugin-emotion-rename
• Owner: antonybudianto
• License: mit
• Created: 2022-09-23T07:06:23.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T00:24:55.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T02:10:19.078Z (about 1 month ago)
• Topics: emotion, emotion11, react-emotion
• Language: TypeScript
• Homepage:
• Size: 43.9 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# babel-plugin-emotion-rename [![npm][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/babel-plugin-emotion-rename.svg?style=flat

[npm-url]: https://npmjs.org/package/babel-plugin-emotion-rename

> Automatically rename legacy emotion imports to new supported emotion versions

[Demo repository with Webpack+Babel+React+Emotion11](https://github.com/antonybudianto/demo-emotion)

## 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

```js

{

  "plugins": ["babel-plugin-emotion-rename"]

}

```

## Codemod

- Codemod CLI coming soon, so that we can drop runtime transpilation step.

## License

MIT