react-stylename-codemod

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:

1. Renames the styleName attribute to className in JSX elements.
2. Modifies the className value to use the imported styles object.
3. Replaces multiple class names in a styleName attribute with a clsx expression.
4. Adds the clsx import if not already present.
5. Renames the import identifier for clsx if it's not 'clsx'.
6. Updates the SCSS import statements to import the CSS modules as 'styles'.
7. Removes the className attribute from JSX elements if they also have a styleName attribute.

---

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:

1. Node.js 10.13.0 or later
2. jscodeshift v0.13.0

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:

1. The cn import has been renamed to clsx.
2. The SCSS import has been updated to import the CSS module as 'styles'.
3. The styleName attribute has been replaced with a className
4. The clsx expression now utilizes the styles object.