jscodeshift codemod for Emotion CSS code that converts `styled('p')` expression to `styled.p` expressions etc.

README.md

This is for those using Emotion CSS

1. Install jscodeshift
2. jscodeshift -t codemod__emotion_styled.js DIRECTORY_TO_RECURSIVELY_MOD

Limitations: only works for styled calls that have exactly one argument.

Thanks to Andrew Levine for their great intro to codemods here: https://medium.com/@andrew_levine/writing-your-very-first-codemod-with-jscodeshift-7a24c4ede31b

codemod__emotion_styled.js

/**
 * Converts each `styled('p')` expression to a `styled.p` expression etc.
 */
function convertExpressions(j, root) {
  root
    .find(j.CallExpression, {
      callee: {
        type: 'Identifier',
        name: 'styled',
      },
    })
    .filter(
      p =>
        p.value.arguments.length === 1 &&
        p.value.arguments[0].type === 'Literal' &&
        typeof p.value.arguments[0].value === 'string'
    )
    .replaceWith(p => `styled.${p.value.arguments[0].value}`)
}

export default function transformer(file, api) {
  const j = api.jscodeshift
  const root = j(file.source)

  convertExpressions(j, root)

  return root.toSource()
}