@compiled/codemods

codemods

Codemods for easy migration from styled components and emotion.

Usage

Codemods in this repository can be run with the Hypermod.io CLI.

# Transform single file
npx @hypermod/cli --packages @compiled/codemods /Project/path/to/file

# Transform multiple files
npx @hypermod/cli --packages @compiled/codemods /Project/**/*.tsx

Available codemods

• styled-components-to-compiled
• emotion-to-compiled
• styled-components-inner-ref-to-ref

Plugins

Codemods support a simple plugin system where supported implementations can be overridden. The CodemodPlugin interface lists all the supported methods to be re-implemented. See the following example:

import type { API, FileInfo, Options } from 'jscodeshift';
import type { CodemodPlugin } from '@compiled/codemods';

const ExampleCodemodPlugin: CodemodPlugin = {
  name: 'example-codemod-plugin',
  create: (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => ({
    visitor: {
      program({ program }) {
        j(program)
          .find(j.ImportDeclaration)
          .at(-1)
          .get()
          .insertAfter(
            j.importDeclaration(
              [j.importSpecifier(j.identifier('getFeatureFlag'))],
              j.literal('./feature-flags')
            )
          );
      },
    },
  }),
};

export default ExampleCodemodPlugin;