💄 glamorous → 👩‍🎤 emotion

This codemod was created to help migrate an existing React or Preact codebase from glamorous to emotion in light of this issue on glamorous.

Here's a demo of the codemod in action. The upper-left quadrant is glamorous code, the lower-right quadrant is the transformed code.

Features

This codemod follows the glamorous to emotion migration guide on the glamorous repo. Particularly, it rewrites the following:

You'll need to use babel-codemod to apply this codemod to your existing codebase. It should be pretty straightforward:

First, install this plugin: yarn add babel-plugin-glamorous-to-emotion -D
Then run it: npx babel-codemod --plugin glamorous-to-emotion "src/**/*.js" or a similar variation depending on your directory structure.

This will put you fully in emotion-land.

You may also pass a --plugin-options argument to the babel-codemod command. Here are the available options:

withBabelPlugin=true

Tells the plugin that your emotion setup includes the emotion-babel-plugin. Without this option, <glamorous.Div marginTop={5}/> gets translated to <div className={css({marginTop: 5})}>.

If this option is enabled, it will be transformed to <div css={{marginTop: 5}}>.
preact=true

Uses import styled from "preact-emotion" instead of import styled from "react-emotion"

I sincerely hope it helps you migrate your codebase! Please open issues for areas where it doesn't quite help and we'll sort it out.

The following people are awesome for their open source work and should be acknowledged as such.

@tkh44 for writing emotion.
@kentcdodds for writing glamorous.
@cbhoweth, @coldpour, @mitchellhamilton, @roystons for writing the migration guide.
@jamiebuilds for an incredible Babel handbook.