[codemod] Add jss to tss-react codemod #31802

ryancogswell · 2022-03-14T19:42:05Z

Initial naive implementation. Many more test cases left to add.

I have followed (at least) the PR section of the contributing guide.

Initial naive implementation. Many more test cases left to add.

mui-bot · 2022-03-14T19:48:01Z

No bundle size changes

Generated by 🚫 dangerJS against 264794f

- Now covers @material-ui/core/styles, @material-ui/core, and @mui/styles

ryancogswell · 2022-03-28T19:26:09Z

ryancogswell · 2022-03-30T01:41:26Z

@mnajdova I haven't verified this against my own code base yet so I might have follow-up tweaks once I do, but it now covers all of the scenarios that I am aware of in my code base. The main features it doesn't handle are params to useStyles (we completely avoided dynamic styles in JSS in our code base) and providing a stylesheet name.

mnajdova · 2022-04-06T10:52:49Z

@mnajdova I haven't verified this against my own code base yet so I might have follow-up tweaks once I do, but it now covers all of the scenarios that I am aware of in my code base.

That's great! Should we wait for your verification in your project? I think it's healthy if we have tested it on at least one project.

The main features it doesn't handle are params to useStyles (we completely avoided dynamic styles in JSS in our code base) and providing a stylesheet name.

Alright, I may spend some time this quarter on it, or we could try to find some help from the community of tss-react cc @garronej

All in all great effort @ryancogswell

ryancogswell · 2022-04-19T16:14:43Z

@mnajdova I believe this is now ready to merge.

…rameters - Was previously passing `{}` as the first parameter instead of `undefined`

ryancogswell · 2022-04-29T11:19:18Z

@mnajdova Please let me know if there’s anything I can do to help move the review of this forward.

ryancogswell · 2022-05-02T14:06:20Z

@garronej There are 9 pairs of test files in the mui-codemod/src/v5.0.0/jss-to-tss-react.test directory. Could you please help with the review by looking through each pair (each actual* file has a corresponding expected* file showing what the codemod should produce) of test files to verify that the expected results match what you would expect/recommend.

You can also help by reviewing my changes to the documentation. In particular, I removed your #### Overriding styles - classes prop section. Instead, the comprehensive example includes an example of how the codemod would transform use of the classes prop and includes a link to the tss-react documentation about it.

garronej · 2022-05-02T14:17:18Z

@ryancogswell Yes yes, sorry, I have a lot on my plate but I will definitively have a look ASAP.

ryancogswell · 2022-05-02T14:21:32Z

@garronej Most of the examples are pretty straightforward, and I've already verified that they all work (at least once all the MUI imports are also transformed by other codemods), so I think it will be pretty quick to look through.

garronej

You did an impressive job congratulation 👏🏻🎉
I just added some comments about what, I think, are best practice but feel free to ignore.

packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core-styles.js

packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core.js

...ges/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.tsx

packages/mui-codemod/README.md

ryancogswell · 2022-05-03T14:36:19Z

@garronej Thanks for reviewing things! In looking over the migration guide I noticed a few broken links to your GitHub readme that I just fixed to go to the equivalent docs.tss-react.dev URL, so that will give people a resource for best practices in using tss-react. For now, I think I'll leave my "comprehensive example" as it is -- with the focus being to show what the codemod will do in a more complicated scenario rather than trying to duplicate the best-practices guidance that is in your documentation.

garronej · 2022-05-03T14:37:41Z

Fair enough

ryancogswell · 2022-05-03T14:46:20Z

@garronej And thanks for creating tss-react! Our company's application is migrated to v5 in our testing environment with the intention of moving v5 to production this weekend. We wouldn't be able to make this transition nearly as quickly or confidently if we had needed to move the styles (700 usages of makeStyles) to a different implementation approach and it's nice to be able to make a clean break from the JSS implementation so that our code can be StrictMode compatible going forward.

garronej · 2022-05-07T01:50:05Z

Hi @ryancogswell,
Just so you know there is now an ESLint plugin available for detecting unused classes:
https://docs.tss-react.dev/detecting-unused-classes
I want to document it but I'll wait for this PR to be merged first to avoir conflict.

Best regards.

mnajdova · 2022-05-10T12:25:04Z

I am going to do a review on this tomorrow, looks promising @ryancogswell :)

mnajdova

I couldn't wait till tomorrow :D Just small details added, looks great overall.

mnajdova · 2022-05-10T13:33:21Z

packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test.js

+        const expected = read('./jss-to-tss-react.test/expected-from-material-ui-core-styles.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+      it('should be idempotent', () => {


Nice, if we add more features, people would be able to just run the new codemod version again 👍

mnajdova · 2022-05-10T13:33:57Z

docs/data/material/guides/migration-v4/migration-v4.md

 :::error
 **WARNING**: You should drop [`clsx`](https://www.npmjs.com/package/clsx) in favor of [`cx`](https://emotion.sh/docs/@emotion/css#cx).
 The key advantage of `cx` is that it detects emotion generated class names ensuring styles are overwritten in the correct order.
+The default precedence of styles from multiple CSS classes is different between JSS and tss-react and some manual re-ordering of `cx` parameters


I've pushed a commit here for applying some changes from master. Would be great if you can double check if this is the changed content on the migration guide (LGTM btw)

I did a merge of those migration guide changes yesterday, but I should have installed the merge tool that I use at work onto my home computer. I used my IDE's merge resolution instead and looks like it didn't behave the way I thought and lost a lot of the changes that I thought I was merging in. Thanks for fixing it.

Some of my previous migration guide changes were lost during your fix of my bad merge. I've reapplied those changes now.

mnajdova · 2022-05-10T13:39:57Z

packages/mui-codemod/README.md

+npx @mui/codemod v5.0.0/jss-to-tss-react <path>
+```
+
+You can find more details about migrating from JSS to tss-react in [the migration guide](https://mui.com/guides/migration-v4/#2-use-tss-react).


Would be great if we can list here things that are not supported, for example the "TODOs" added in expected-todo-comments.js.

This will make sure we are transparent and will help future contributors to take features one by one and add them as part of the codemod.

I've added documentation about the scenarios that produce TODO comments.

…the codemod

…my bad merge resolution

mnajdova

Great job @ryancogswell! Can't wait to share this with the community :)

garronej · 2022-05-11T07:51:45Z

Thank you very much @ryancogswell, you did a great job!

[codemod] Add jss to tss-react codemod

3823dcd

Initial naive implementation. Many more test cases left to add.

ryancogswell mentioned this pull request Mar 14, 2022

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

Closed

ryancogswell mentioned this pull request Mar 14, 2022

migrating the styles #28990

Closed

Prettier

430fc65

ryancogswell mentioned this pull request Mar 14, 2022

jss-to-tss codemod #30179

Closed

danilo-leal added the package: codemod Specific to @mui/codemod label Mar 14, 2022

ryancogswell added 6 commits March 15, 2022 08:46

Add second makeStyles call and add sandbox links

345f302

Add test cases for additional import possibilities

070ade2

- Now covers @material-ui/core/styles, @material-ui/core, and @mui/styles

Add failing test for TypeScript with nested selectors

113abbb

Remove createStyles from imports

22bf666

Remove usages of createStyles

6267946

Fully handle one TypeScript case with nested selectors

c4ca5e3

ryancogswell added 8 commits March 28, 2022 17:05

Add and handle additional cases for nested selectors

8f6f5db

Address lint errors

5c22b87

Handle nested selectors without arrow function

8723b10

Add naive withStyles transformation

1142657

Address lint error

c556b4b

Handle nested selectors for withStyles

05f5e93

Handle inline styles for withStyles

f7e1474

Add test case with an arrow function with a code block

94f3f80

ryancogswell marked this pull request as ready for review March 30, 2022 00:38

ryancogswell added 2 commits March 29, 2022 20:18

Add support for @material-ui/styles/makeStyles imports

814513e

Add documentation for jss-to-tss-react codemod

a48db98

ryancogswell requested a review from mnajdova March 30, 2022 01:36

Prettier

7ea397d

This comment was marked as outdated.

Sign in to view

ryancogswell added 2 commits April 19, 2022 11:29

Merge branch 'master' into jssToTssReact

f84957c

Cleanup after resolving merge conflicts

a9f87f3

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 19, 2022

ryancogswell added 3 commits April 21, 2022 09:09

Add todo comment for exported hooks since usages won't be converted

28c1703

Address lint error

dde9f3c

Fix first useStyles parameter when passing classes prop and no pa…

734d362

…rameters - Was previously passing `{}` as the first parameter instead of `undefined`

Detect default export of style hook to add comment

5096566

garronej approved these changes May 2, 2022

View reviewed changes

Update documentation links to go to docs.tss-react.dev instead of GitHub

cbc8124

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 6, 2022

Merge branch 'master' into jssToTssReact

59b8a45

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 8, 2022

Apply master callout changes in the migration guide

d625dc5

mnajdova reviewed May 10, 2022

View reviewed changes

ryancogswell and others added 3 commits May 10, 2022 09:41

Add documentation about specific scenarios that are not supported by …

f20875f

…the codemod

Reapply my migration guide changes that were overwritten when fixing …

5ce079c

…my bad merge resolution

Merge branch 'master' into jssToTssReact

264794f

mnajdova approved these changes May 11, 2022

View reviewed changes

mnajdova merged commit 2c4f912 into mui:master May 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[codemod] Add jss to tss-react codemod #31802

[codemod] Add jss to tss-react codemod #31802

ryancogswell commented Mar 14, 2022

mui-bot commented Mar 14, 2022 •

edited

ryancogswell commented Mar 28, 2022 •

edited

ryancogswell commented Mar 30, 2022 •

edited

mnajdova commented Apr 6, 2022

This comment was marked as outdated.

ryancogswell commented Apr 19, 2022 •

edited

ryancogswell commented Apr 29, 2022

ryancogswell commented May 2, 2022 •

edited

garronej commented May 2, 2022

ryancogswell commented May 2, 2022

garronej left a comment

ryancogswell commented May 3, 2022

garronej commented May 3, 2022

ryancogswell commented May 3, 2022

garronej commented May 7, 2022

mnajdova commented May 10, 2022

mnajdova left a comment

mnajdova May 10, 2022

mnajdova May 10, 2022

ryancogswell May 10, 2022

ryancogswell May 10, 2022

mnajdova May 10, 2022

ryancogswell May 10, 2022

mnajdova left a comment

garronej commented May 11, 2022

[codemod] Add jss to tss-react codemod #31802

[codemod] Add jss to tss-react codemod #31802

Conversation

ryancogswell commented Mar 14, 2022

mui-bot commented Mar 14, 2022 • edited

ryancogswell commented Mar 28, 2022 • edited

ryancogswell commented Mar 30, 2022 • edited

mnajdova commented Apr 6, 2022

This comment was marked as outdated.

ryancogswell commented Apr 19, 2022 • edited

ryancogswell commented Apr 29, 2022

ryancogswell commented May 2, 2022 • edited

garronej commented May 2, 2022

ryancogswell commented May 2, 2022

garronej left a comment

Choose a reason for hiding this comment

ryancogswell commented May 3, 2022

garronej commented May 3, 2022

ryancogswell commented May 3, 2022

garronej commented May 7, 2022

mnajdova commented May 10, 2022

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova May 10, 2022

Choose a reason for hiding this comment

mnajdova May 10, 2022

Choose a reason for hiding this comment

ryancogswell May 10, 2022

Choose a reason for hiding this comment

ryancogswell May 10, 2022

Choose a reason for hiding this comment

mnajdova May 10, 2022

Choose a reason for hiding this comment

ryancogswell May 10, 2022

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

garronej commented May 11, 2022

mui-bot commented Mar 14, 2022 •

edited

ryancogswell commented Mar 28, 2022 •

edited

ryancogswell commented Mar 30, 2022 •

edited

ryancogswell commented Apr 19, 2022 •

edited

ryancogswell commented May 2, 2022 •

edited