@compiled/codemods

We provide a few codemods for migrating from styled-components and emotion to Compiled. The codemods are implemented with jscodeshift. Compiled codemods are enrolled in the Hypermod CLI tooling for easy usage.

Codemods

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

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

Our codemods will transform the source code into code that utilises @compiled/react. Keep in mind that the change will happen in-place so make sure you're utilising version control or backup the original source.

Emotion to Compiled

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

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

Will convert all usages of Emotion to Compiled. For code that could not be automatically converted a /** TODO(@compiled/react codemod): comment will be placed.

Styled components to Compiled

# Transform single file
npx @hypermod/cli --packages "@compiled/codemods#styled-components-inner-ref-to-ref" /Project/path/to/file

# Transform multiple files
npx @hypermod/cli --packages "@compiled/codemods#styled-components-inner-ref-to-ref" /Project/**/*.tsx

Will convert all usages of Styled Components to Compiled. For code that could not be automatically converted a /** TODO(@compiled/react codemod): comment will be placed.

Suggest changes to this page ➚