[codemod] Add styled v6 transformation

[siriwatknp]

This codemod is benefit for Material UI and any project that are using styled v5. The transformation will remove the use of props in the style argument and replace them with variants.

Review suggestion

Please focus on the test cases (not the codemod implementation). Feel free to suggest more test cases that we should cover.

Target components

See the result.

Out-of-scope transformations

• ❌ Dynamic values, for example:

  const ResizableContainer = styled('div', {
     name: 'MuiGauge',
     slot: 'Container',
   })(({ ownerState, theme }) => ({
     width: ownerState.width ?? '100%',
     height: ownerState.height ?? '100%',
   }));

  Since Emotion does not support callback as a value, developers have to manually fix this by using inline style + CSS variables

• ❌ dynamic reference from the theme, e.g. color palette:

   const Test = styled('div')(({ ownerState, theme }) => ({
      backgroundColor: (theme.vars || theme).palette[ownerState.color]?.main,
    }));

---

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-41743--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 83d052b

[mnajdova]

It would be great if we can create a draft POC PR that runs this on our repo (or at least in the @mui/material) package.

[siriwatknp]

It would be great if we can create a draft POC PR that runs this on our repo (or at least in the @mui/material) package.

Here is the PR that runs the codemod on several components https://github.com/mui/material-ui/pull/41766/files#diff-eb5bb0f7d6fd1be741c79c303d033419ee5eefea4124632e06c5b0f4bcf5c0d4

[siriwatknp]

It would be great if we can create a draft POC PR that runs this on our repo (or at least in the @mui/material) package.

Here is the PR that runs the codemod on several components https://github.com/mui/material-ui/pull/41766/files#diff-eb5bb0f7d6fd1be741c79c303d033419ee5eefea4124632e06c5b0f4bcf5c0d4

cc @mnajdova the transformation looks all correct with no visual regression.

[mnajdova]

I think this is a great first iteration. Can we add a description in the README.md under the v6 section? I would recommend writing out examples of what is supported, then when we add more features, we can extend the descrption.

cc @DiegoAndai do we have other place where we keep the descriptions of the codemods available for v6?

[siriwatknp]

I think this is a great first iteration. Can we add a description in the README.md under the v6 section? I would recommend writing out examples of what is supported, then when we add more features, we can extend the descrption.

cc @DiegoAndai do we have other place where we keep the descriptions of the codemods available for v6?

Done.

[DiegoAndai]

cc @DiegoAndai do we have other place where we keep the descriptions of the codemods available for v6?

Not for the codemods specifically, but we already have the migration guides for Material and System, so whenever we add breaking changes, we should point to the corresponding codemods.

[mnajdova]

I left few comments to be checked before merging. The transformations look good 👍

[mnajdova]

Maybe in the future we can add support for aliased imports, e.g.

import { styled as muiStyled } from '@mui/material/styles';

[mnajdova]

can we add comment above this line?

[mnajdova]

This got lost somewhere :)