Codemod to transform styleName to className prop

This is a codemod, written using jscodeshift. It's built to simplify code migration from babel-plugin-react-css-modules

How it works

This codemod performs the following transformations to the source code:

Note: Files that do not contain import "./ModuleName.scss" attribute will not be modified. This is to prevent the codemod from modifying files that do not use "babel-plugin-react-css-modules" syntax.

Pre-requisites

This codemod requires the following:

Usage

# with npm
npm add react-stylename-codemod

# with yarn
yarn add react-stylename-codemod

# with pnpm
pnpm add react-stylename-codemod

To use this codemod, simply run the following command:

jscodeshift -t path/to/this/codemod.ts path/to/your/source/code

#example
jscodeshift -t node_modules/react-stylename-codemod/stylename-codemod.ts ./src/* --extensions=tsx

Please note that this codemod assumes the use of the styles object imported from the SCSS files and the clsx library for handling multiple or conditional class names. Make sure to install the clsx library if you haven't already:

yarn install clsx

⚠️ After running the codemod, make sure to test your application thoroughly to ensure that the styling is working as expected.

Example transformation

Before:

import React from "react";
import cn from "clsx";
import "./MyComponent.scss";

const MyComponent = ({ isActive, className }) => {
  return (
    <div
      className={cn(className, { "active-class": isActive })}
      styleName="camelCase kebab-case"
    >
      Hello World
    </div>
  );
};

export default MyComponent;

After:

import React from 'react';
import clsx from 'clsx';
import styles from './MyComponent.scss';

const MyComponent = ({ isActive, className }) => {
  return (
    <div
      className={clsx(
        className,
        { [styles['active-class']]: isActive },
        styles.camelCase,
        styles.['kebab-case']
      )}
    >
      Hello World
    </div>
  );
};

export default MyComponent;

In this example, the following transformations have occurred: