react-mui-jss-styles-to-tss-react-hook-migration
Transform React components using Material UI JSS APIs (e.g., makeStyles/withStyles/createStyles) into strongly typed `tss-react` hook-based styling (`makeStyles` from `tss-react/mui`) in TypeScript React codebases, improving maintainability and type safety while modernizing legacy styling patterns.
# @codemod/react-mui-jss-styles-to-tss-react-hook-migration
Transform React components using Material UI JSS APIs (e.g., makeStyles/withStyles/createStyles) into strongly typed `tss-react` hook-based styling (`makeStyles` from `tss-react/mui`) in TypeScript React codebases, improving maintainability and type safety while modernizing legacy styling patterns.
## Installation
```bash
# Install from registry
codemod run @codemod/react-mui-jss-styles-to-tss-react-hook-migration
# Or run locally
codemod run -w workflow.yaml
```
## Usage
This codemod targets `**/*.{ts,tsx}` files that still import legacy styling helpers from `@material-ui/core/styles`, `@material-ui/styles`, or `@mui/styles`.
It currently rewrites these supported shapes:
- `makeStyles(...)` imports and calls into `makeStyles()(... )` from `tss-react/mui`
- `createStyles(...)` wrappers nested inside supported `makeStyles` or `withStyles` style declarations
- `const classes = useStyles(...)` call sites into `const { classes } = useStyles(...)`
- `withStyles(styles)(Component)` when `Component` is a supported function component with an injected `classes` prop
The transform is intentionally conservative. It skips files when it cannot safely preserve behavior, including:
- files without JSX unless `--param allow-non-react=true` is set
- unsupported or non-local `makeStyles` factories
- `withStyles` class components
- legacy style imports that are present but never used
Examples:
```tsx
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme: Theme) => ({
root: { padding: theme.spacing(2) },
}));
export const A = () => {
const classes = useStyles();
return <div className={classes.root} />;
};
```
becomes:
```tsx
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()((theme) => ({
root: { padding: theme.spacing(2) },
}));
export const A = () => {
const { classes } = useStyles();
return <div className={classes.root} />;
};
```
Useful workflow params:
```bash
codemod workflow run -w . --param allow-non-react=true
codemod workflow run -w . --param transform-withStyles=false
```
## Development
```bash
# Test the transformation
pnpm test
# Type-check the codemod
pnpm run check-types
# Validate the workflow
pnpm dlx codemod@latest workflow validate -w .
# Publish to registry
pnpm dlx codemod@latest login
pnpm dlx codemod@latest publish
```
## License
MIT