Codemod for migration from `@material-ui/styles`'s `makeStyles` to `tss-react`

[garronej]

Codemod for migration from `@material-ui/styles`'s `makeStyles` to `tss-react`

[garronej]

Hi @mnajdova,
I am off today but trust that I will try and see what's feasable.

[garronej]

I don't forget this. I am just having a hard time to feeing up time to work on it.

[garronej]

Hi @mnajdova,
In the PR of @olee there is a new way of implementing nested selectors that will make it easier to implement the codemod because it is closed to what we where used to in JSS.
I will come back to this issue once this PR lands.

[garronej]

Hi @ryandagg,
I am waiting for v3 to get peer reviewed then I will tacle this.

[garronej]

Hi @mnajdova,
I finally got to it.

as I remember it is required to create the utility in the project

Correct but I created an alternative index that allows mui users to import makeStyles and withStyles directly like that:

import { makeStyles, withStyles } from "tss-react/mui";

I'll keep you updated.

[ryancogswell]

@garronej @mnajdova The app I work on has over 500 usages of makeStyles, so I'm going to start working on the codemod. I'll only be able to devote occasional blocks of time to this, but we are planning to migrate our app to v5 within the next quarter so I should finish it within the next couple months. I'll be focusing on just the patterns that occur within our code, but that will cover enough cases to create a solid foundation to add more cases to.

I haven't used jscodeshift before, but the examples already in https://github.com/mui/material-ui/tree/master/packages/mui-codemod/src/v5.0.0 give me enough to speed my learning along.

You can follow my progress here: #31802

[garronej]

Hi @mnajdova,
V3 is out. I might be too optimistic but I think we should be able to write a fully automated migration script.
Where should we start? Could tel me more about this codemode package of yours?

Best

[mnajdova]

Nice! This is great news!

Regardint he codemod, we use jscodeshift for the transformation. For v5, we have a set of codemods we are running under one codemod (preset-safe), but I think the one that is for migrating the makeStyles can be a standalone codemod, similar to how the jss-to-styled is implemented. We could probably re-use lots of the logic there, at least for looking up the calls to the makeStyles, withStyles API. The transformation should be much simpler in the case of migrating to tss-react. One thing we should think about is, where would people import the makeStyles util from. I am saying this because as much as I remember it is required to create the utility in the project, so the import should be coming from a local file (maybe this import path can be specified in the arguments when calling the codemod).

Regarding testing the codemods, you can add an example original file and how the file should look after the transformation. For example see the v5.0.0/jss-to-styled.test directory. These are then being compared in the jss-to-styled.test.js.

All codemods related to v5 are in https://github.com/mui-org/material-ui/tree/master/packages/mui-codemod/src/v5.0.0

Feel free to start working in this package directly, and ping me if you have more questions. I will try to help however I can.

[paales]

Not trying to put you under any unrealistic pressure :) Just grateful that you are building this and I'm looking forward to it.

If in due time we are actually moving to material ui 5 I'll see if the manual transition makes sense :)

[paales]

In my experience it wasn't too much work! It is very doable and the documentation written is pretty nice :)

[garronej]

@ryancogswell thank you for tackling this.
Let me know if you have any question or doubt about what the expected output should be. I'll make myself available in the best delay.

[mnajdova]

Hi @mnajdova,
I am off today but trust that I will try and see what's feasible.

That sounds great, feel free to ping me when you have time to look over this together. We already have a codemod package with most of the things set up, we can test out things there.

[mnajdova]

@garronej perfect! I will be following the updates here.

[ryandagg]

I would love this codemod. I've spent 2 hours trying to implement it myself and nearly all styles are broken in ways that make no sense.
EDIT: not sure what happened. Stashed changes and re-applied and now barely broken, and in understandable ways. Needed to restart dev server? Not sure.

[paales]

Really looking forward to this :) We're waiting to upgrade to material-ui 5 because we want to use this cool library and having to manually convert everything by hand is quite a lot of work.

[garronej]

Really looking forward to this :) We're waiting to upgrade to material-ui 5 because we want to use this cool library and having to manually convert everything by hand is quite a lot of work.

Hi @paales , I'm trying to make time whenever I can but it could takes time before the codemod is ready.
However, unless the component count of your project is in the thousand the update should be pretty quick, even by hand.

Here you can find examples of before/after.

Best

[garronej]

I'll close it, at least for now.
I have too much on my plate.
I'll focus on keeping the v4 to v5 migration guide up to date.

Sorry to whoever has been waiting for this.

[garronej]

Thank you for the nice feedback!

[mnajdova]

@ryancogswell sounds perfect, thanks for starting the effort.