npm - @mui/codemod - Versions diffs - 5.8.0 → 5.8.4 - Mend

@mui/codemod 5.8.0 → 5.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +55 -55
package/codemod.js +0 -0
package/node/v5.0.0/jss-to-tss-react.js +8 -5
package/node/v5.0.0/jss-to-tss-react.test/actual-from-mui-styles-makeStyles.js +53 -0
package/node/v5.0.0/jss-to-tss-react.test/actual-todo-comments.js +8 -0
package/node/v5.0.0/jss-to-tss-react.test/expected-from-mui-styles-makeStyles.js +57 -0
package/node/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js +11 -1
package/node/v5.0.0/modal-props.js +1 -1
package/node/v5.0.0/modal-props.test/expected.js +1 -1
package/package.json +2 -2

package/README.md CHANGED Viewed

@@ -145,7 +145,7 @@ Imports and inserts `adaptV4Theme` into `createTheme` (or `createMuiTheme`)
 npx @mui/codemod v5.0.0/adapter-v4 <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#theme).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
 #### `autocomplete-rename-closeicon`
@@ -162,7 +162,7 @@ Renames `Autocomplete`'s `closeIcon` prop to `clearIcon`.
 npx @mui/codemod v5.0.0/autocomplete-rename-closeicon  <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#autocomplete).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#autocomplete).
 #### `autocomplete-rename-option`
@@ -181,7 +181,7 @@ Renames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.
 npx @mui/codemod v5.0.0/autocomplete-rename-option  <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#autocomplete).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#autocomplete).
 #### `avatar-circle-circular`
@@ -200,7 +200,7 @@ Updates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circu
 npx @mui/codemod v5.0.0/avatar-circle-circular <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#avatar).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#avatar).
 #### `badge-overlap-value`
@@ -235,7 +235,7 @@ Renames the badge's props.
 npx @mui/codemod v5.0.0/badge-overlap-value <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#badge).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#badge).
 #### `box-borderradius-values`
@@ -254,7 +254,7 @@ Updates the Box API from separate system props to `sx`.
 npx @mui/codemod v5.0.0/box-borderradius-values <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#box).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box).
 #### `box-rename-css`
@@ -269,7 +269,7 @@ Renames the Box `css` prop to `sx`
 npx @mui/codemod v5.0.0/box-rename-css <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#box).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box).
 #### `box-rename-gap`
@@ -290,7 +290,7 @@ Renames the Box `grid*Gap` props.
 npx @mui/codemod v5.0.0/box-rename-gap <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#box).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box).
 #### `button-color-prop`
@@ -307,7 +307,7 @@ Removes the outdated `color` prop values.
 npx @mui/codemod v5.0.0/button-color-prop <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#button).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#button).
 #### `chip-variant-prop`
@@ -324,7 +324,7 @@ Removes the Chip `variant` prop if the value is `"default"`.
 npx @mui/codemod v5.0.0/chip-variant-prop <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#chip).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#chip).
 #### `circularprogress-variant`
@@ -341,7 +341,7 @@ Renames the CircularProgress `static` variant to `determinate`.
 npx @mui/codemod v5.0.0/circularprogress-variant <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#circularprogress).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#circularprogress).
 #### `collapse-rename-collapsedheight`
@@ -360,7 +360,7 @@ Renames `Collapse`'s `collapsedHeight` prop to `collapsedSize`.
 npx @mui/codemod v5.0.0/collapse-rename-collapsedheight <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#collapse).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#collapse).
 #### `component-rename-prop`
@@ -418,7 +418,7 @@ Remove `disableBackdropClick` prop from `<Dialog>`
 npx @mui/codemod v5.0.0/dialog-props <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#dialog).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#dialog).
 #### `dialog-title-props`
@@ -433,11 +433,11 @@ Remove `disableTypography` prop from `<DialogTitle>`
 npx @mui/codemod v5.0.0/dialog-title-props <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#dialog).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#dialog).
 #### `emotion-prepend-cache`
-Adds `prepend: true` to emotion `createCache`
+Adds `prepend: true` to Emotion `createCache`
 ```diff
 const cache = emotionCreateCache({
@@ -458,7 +458,7 @@ Renames `ExpansionPanel*` to `Accordion*`
 npx @mui/codemod v5.0.0/expansion-panel-component <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#expansionpanel).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#expansionpanel).
 #### `fab-variant`
@@ -471,7 +471,7 @@ You can find more details about this breaking change in [the migration guide](ht
 npx @mui/codemod v5.0.0/fab-variant <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#fab).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#fab).
 #### `fade-rename-alpha`
@@ -491,7 +491,7 @@ Renames the `fade` style utility import and calls to `alpha`.
 npx @mui/codemod v5.0.0/fade-rename-alpha <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#styles).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#styles).
 #### `grid-justify-justifycontent`
@@ -508,7 +508,7 @@ Renames `Grid`'s `justify` prop to `justifyContent`.
 npx @mui/codemod v5.0.0/grid-justify-justifycontent <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#grid).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#grid).
 #### `grid-list-component`
@@ -518,7 +518,7 @@ Renames `GridList*` to `ImageList*`
 npx @mui/codemod v5.0.0/grid-list-component <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#gridlist).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#gridlist).
 #### `icon-button-size`
@@ -535,7 +535,7 @@ Adds `size="large"` if `size` is not defined to get the same appearance as v4.
 npx @mui/codemod v5.0.0/icon-button-size <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#iconbutton).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#iconbutton).
 #### `jss-to-styled`
@@ -600,10 +600,10 @@ export const MyCard = () => {
 npx @mui/codemod v5.0.0/jss-to-styled <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#1-use-styled-or-sx-api).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#1-use-styled-or-sx-api).
 > **Note:** This approach converts the first element in the return statement into styled component but also increases CSS specificity to override nested children.
-> This codemod should be adopted after handling all breaking changes, [check out the migration documentation](https://mui.com/material-ui/guides/migration-v4/)
+> This codemod should be adopted after handling all breaking changes, [check out the migration documentation](https://mui.com/material-ui/migration/migration-v4/).
 #### `jss-to-tss-react`
@@ -685,7 +685,7 @@ The following scenarios are not currently handled by this codemod and will be ma
 - If an arrow function at the rule level contains a code block (i.e. contains an explicit `return`
   statement) rather than just an object expression, it will not be converted.
-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).
+You can find more details about migrating from JSS to tss-react in [the migration guide](https://mui.com/migration/migrating-from-jss/#2-use-tss-react).
 #### `link-underline-hover`
@@ -697,10 +697,10 @@ Apply `underline="hover"` to `<Link />` that does not define `underline` prop (t
 ```
 ```sh
-npx @mui/codemod v5.0.0/icon-button-size <path>
+npx @mui/codemod v5.0.0/link-underline-hover <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#link).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#link).
 #### `material-ui-styles`
@@ -751,7 +751,7 @@ Renames `Omit` import from `@material-ui/types` to `DistributiveOmit`
 npx @mui/codemod v5.0.0/material-ui-types <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#material-ui-types).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#material-ui-types).
 #### `modal-props`
@@ -768,7 +768,7 @@ Removes `disableBackdropClick` and `onEscapeKeyDown` from `<Modal>`
 npx @mui/codemod v5.0.0/modal-props <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#modal).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#modal).
 #### `moved-lab-modules`
@@ -794,13 +794,13 @@ npx @mui/codemod v5.0.0/moved-lab-modules <path>
 You can find more details about this breaking change in the migration guide.
-- [Alert](https://mui.com/material-ui/guides/migration-v4/#alert)
-- [Autocomplete](https://mui.com/material-ui/guides/migration-v4/#autocomplete)
-- [AvatarGroup](https://mui.com/material-ui/guides/migration-v4/#avatar)
-- [Pagination](https://mui.com/material-ui/guides/migration-v4/#pagination)
-- [Skeleton](https://mui.com/material-ui/guides/migration-v4/#skeleton)
-- [SpeedDial](https://mui.com/material-ui/guides/migration-v4/#speeddial)
-- [ToggleButton](https://mui.com/material-ui/guides/migration-v4/#togglebutton)
+- [Alert](https://mui.com/material-ui/migration/v5-component-changes/#alert)
+- [Autocomplete](https://mui.com/material-ui/migration/v5-component-changes/#autocomplete)
+- [AvatarGroup](https://mui.com/material-ui/migration/v5-component-changes/#avatar)
+- [Pagination](https://mui.com/material-ui/migration/v5-component-changes/#pagination)
+- [Skeleton](https://mui.com/material-ui/migration/v5-component-changes/#skeleton)
+- [SpeedDial](https://mui.com/material-ui/migration/v5-component-changes/#speeddial)
+- [ToggleButton](https://mui.com/material-ui/migration/v5-component-changes/#togglebutton)
 #### `pagination-round-circular`
@@ -817,7 +817,7 @@ Renames `Pagination*`'s `shape` values from 'round' to 'circular'.
 npx @mui/codemod v5.0.0/pagination-round-circular <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#pagination).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#pagination).
 #### `optimal-imports`
@@ -844,7 +844,7 @@ Removes `RootRef` from the codebase.
 npx @mui/codemod v5.0.0/root-ref <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#rootref).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#rootref).
 #### `skeleton-variant`
@@ -859,7 +859,7 @@ You can find more details about this breaking change in [the migration guide](ht
 npx @mui/codemod v5.0.0/skeleton-variant <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#skeleton).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#skeleton).
 #### `styled-engine-provider`
@@ -869,7 +869,7 @@ Applies `StyledEngineProvider` to the files that contains `ThemeProvider`.
 npx @mui/codemod v5.0.0/styled-engine-provider <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#style-library).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-style-changes/#style-library).
 #### `table-props`
@@ -895,7 +895,7 @@ Renames props in `Table*` components.
 npx @mui/codemod v5.0.0/table-props <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#table).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#table).
 #### `tabs-scroll-buttons`
@@ -914,7 +914,7 @@ Renames the `Tabs`'s `scrollButtons` prop values.
 npx @mui/codemod v5.0.0/tabs-scroll-buttons <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#tabs).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#tabs).
 #### `textarea-minmax-rows`
@@ -935,8 +935,8 @@ npx @mui/codemod v5.0.0/textarea-minmax-rows <path>
 You can find more details about this breaking change in the migration guide.
-- [TextareaAutosize](https://mui.com/material-ui/guides/migration-v4/#textareaautoresize)
-- [TextField](https://mui.com/material-ui/guides/migration-v4/#textfield)
+- [TextareaAutosize](https://mui.com/material-ui/migration/v5-component-changes/#textareaautoresize)
+- [TextField](https://mui.com/material-ui/migration/v5-component-changes/#textfield)
 #### `theme-augment`
@@ -946,7 +946,7 @@ Adds `DefaultTheme` module augmentation to typescript projects.
 npx @mui/codemod v5.0.0/theme-augment <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#material-ui-styles).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#material-ui-styles).
 #### `theme-breakpoints`
@@ -965,7 +965,7 @@ Updates breakpoint values to match new logic. ⚠️ This mod is not idempotent,
 npx @mui/codemod v5.0.0/theme-breakpoints <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#theme).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
 #### `theme-breakpoints-width`
@@ -975,7 +975,7 @@ Renames `theme.breakpoints.width('md')` to `theme.breakpoints.values.md`.
 npx @mui/codemod v5.0.0/theme-breakpoints-width <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#theme).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
 #### `theme-options`
@@ -1003,7 +1003,7 @@ Renames `type` to `mode`.
 npx @mui/codemod v5.0.0/theme-palette-mode <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#theme).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
 #### `theme-provider`
@@ -1013,7 +1013,7 @@ Renames `MuiThemeProvider` to `ThemeProvider`.
 npx @mui/codemod v5.0.0/theme-provider <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#material-ui-core-styles).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#material-ui-core-styles).
 #### `theme-spacing`
@@ -1032,7 +1032,7 @@ Removes the 'px' suffix from some template strings.
 npx @mui/codemod v5.0.0/theme-spacing <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#theme).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
 #### `theme-typography-round`
@@ -1047,7 +1047,7 @@ Renames `theme.typography.round($number)` to `Math.round($number * 1e5) / 1e5`.
 npx @mui/codemod v5.0.0/theme-typography-round <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#theme).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
 #### `top-level-imports`
@@ -1117,7 +1117,7 @@ Updates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to
 npx @mui/codemod v5.0.0/use-transitionprops <path>
 ```
-You can find more details about this breaking change in [the migration guide](/material-ui/guides/migration-v4/#dialog).
+You can find more details about this breaking change in [the migration guide](/material-ui/migration/v5-component-changes/#dialog).
 #### `variant-prop`
@@ -1153,7 +1153,7 @@ Removes imported `withMobileDialog`, and inserts hardcoded version to prevent ap
 ```diff
 - import withMobileDialog from '@material-ui/core/withMobileDialog';
-+ // FIXME checkout https://mui.com/guides/migration-v4/#dialog
++ // FIXME checkout https://mui.com/material-ui/migration/v5-component-changes/#dialog
 + const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="lg" fullScreen={false} />;
 ```
@@ -1161,7 +1161,7 @@ Removes imported `withMobileDialog`, and inserts hardcoded version to prevent ap
 npx @mui/codemod v5.0.0/with-mobile-dialog <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#dialog).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#dialog).
 #### `with-width`
@@ -1177,7 +1177,7 @@ Removes `withWidth` import, and inserts hardcoded version to prevent application
 npx @mui/codemod v5.0.0/with-width <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#material-ui-core-styles).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-style-changes/#material-ui-core-styles).
 #### `mui-replace`
@@ -1238,7 +1238,7 @@ Replace every occurrence of `material-ui` related package with the new package n
 npx @mui/codemod v5.0.0/mui-replace <path>
 ```
-You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#update-material-ui-version).
+You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/migration-v4/#update-material-ui-version).
 ### v4.0.0

package/codemod.js CHANGED Viewed

File without changes

package/node/v5.0.0/jss-to-tss-react.js CHANGED Viewed

@@ -11,7 +11,7 @@ function transformNestedKeys(j, comments, propValueNode, ruleRegEx, nestedKeys)
     var _prop$value, _prop$value2;
     if (((_prop$value = prop.value) == null ? void 0 : _prop$value.type) === 'ObjectExpression') {
-      if (typeof prop.key.value === 'string') {
+      if (typeof prop.key.value === 'string' && ruleRegEx !== null) {
         let ruleIndex = prop.key.value.search(ruleRegEx);
         let searchStartIndex = 0;
         const elements = [];
@@ -80,10 +80,13 @@ function transformStylesExpression(j, comments, stylesExpression, nestedKeys, se
   if (objectExpression !== undefined) {
     objectExpression.properties.forEach(prop => {
-      var _prop$key;
+      var _prop$key, _prop$key2;
       if ((_prop$key = prop.key) != null && _prop$key.name) {
         ruleNames.push(prop.key.name);
+      } else if (((_prop$key2 = prop.key) == null ? void 0 : _prop$key2.value) === '@global') {
+        comments.push(j.commentLine(` TODO jss-to-tss-react codemod: '@global' is not supported by tss-react.`, true));
+        comments.push(j.commentLine(` See https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override for alternatives.`, true));
       }
     });
     let ruleRegExString = '(';
@@ -95,7 +98,7 @@ function transformStylesExpression(j, comments, stylesExpression, nestedKeys, se
       ruleRegExString += `\\$${ruleName}`;
     });
     ruleRegExString += ')';
-    const ruleRegEx = new RegExp(ruleRegExString, 'g');
+    const ruleRegEx = ruleNames.length === 0 ? null : new RegExp(ruleRegExString, 'g');
     objectExpression.properties.forEach(prop => {
       if (prop.value) {
         if (prop.value.type !== 'ObjectExpression') {
@@ -234,11 +237,11 @@ function transformer(file, api, options) {
         path.replace(j.importDeclaration(specifiersToMove, j.stringLiteral('tss-react/mui')), specifiersToStay.length > 0 ? j.importDeclaration(specifiersToStay, j.stringLiteral(importSource)) : undefined);
         importsChanged = true;
       }
-    } else if (importSource === '@material-ui/styles/makeStyles') {
+    } else if (importSource === '@material-ui/styles/makeStyles' || importSource === '@mui/styles/makeStyles') {
       foundMakeStyles = true;
       path.replace(j.importDeclaration([j.importSpecifier(j.identifier('makeStyles'))], j.stringLiteral('tss-react/mui')));
       importsChanged = true;
-    } else if (importSource === '@material-ui/styles/withStyles') {
+    } else if (importSource === '@material-ui/styles/withStyles' || importSource === '@mui/styles/withStyles') {
       foundWithStyles = true;
       path.replace(j.importDeclaration([j.importSpecifier(j.identifier('withStyles'))], j.stringLiteral('tss-react/mui')));
       importsChanged = true;

package/node/v5.0.0/jss-to-tss-react.test/actual-from-mui-styles-makeStyles.js ADDED Viewed

@@ -0,0 +1,53 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+var _react = _interopRequireDefault(require("react"));
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _InnerComponent;
+const useStyles = (0, _makeStyles.default)({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+const useStyles2 = (0, _makeStyles.default)({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    "& $test2": {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+});
+function InnerComponent() {
+  const classes = useStyles2();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test2,
+    children: "Inner Test"
+  });
+}
+function ComponentUsingStyles(props) {
+  const classes = useStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.test,
+    children: ["Test", _InnerComponent || (_InnerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {}))]
+  });
+}

package/node/v5.0.0/jss-to-tss-react.test/actual-todo-comments.js CHANGED Viewed

@@ -48,6 +48,14 @@ const useStyles3 = (0, _core.makeStyles)({
     };
   }
 });
+const useGlobalStyles = (0, _core.makeStyles)(() => ({
+  '@global': {
+    '.sample': {
+      backgroundColor: "purple",
+      color: "white"
+    }
+  }
+}));
 function InnerComponent() {
   const classes = useStyles2();

package/node/v5.0.0/jss-to-tss-react.test/expected-from-mui-styles-makeStyles.js ADDED Viewed

@@ -0,0 +1,57 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+var _react = _interopRequireDefault(require("react"));
+var _mui = require("tss-react/mui");
+var _jsxRuntime = require("react/jsx-runtime");
+var _InnerComponent;
+const useStyles = (0, _mui.makeStyles)()({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+const useStyles2 = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    [`& .${classes.test2}`]: {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+}));
+function InnerComponent() {
+  const {
+    classes
+  } = useStyles2();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test2,
+    children: "Inner Test"
+  });
+}
+function ComponentUsingStyles(props) {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.test,
+    children: ["Test", _InnerComponent || (_InnerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {}))]
+  });
+}

package/node/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js CHANGED Viewed

@@ -51,7 +51,17 @@ const useStyles3 = (0, _mui.makeStyles)()({
       color: "lime"
     };
   }
-});
+}); // TODO jss-to-tss-react codemod: '@global' is not supported by tss-react.
+// See https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override for alternatives.
+const useGlobalStyles = (0, _mui.makeStyles)()(() => ({
+  '@global': {
+    '.sample': {
+      backgroundColor: "purple",
+      color: "white"
+    }
+  }
+}));
 function InnerComponent() {
   const {

package/node/v5.0.0/modal-props.js CHANGED Viewed

@@ -34,7 +34,7 @@ function transformer(file, api, options) {
   }).toSource(printOptions);
   if (hasDisableBackdropClick || hasDisableBackdropClick) {
-    source = source.replace(/(<Modal)([\s\S]*>)/gm, `$1// You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#modal)${_os.EOL}$2`);
+    source = source.replace(/(<Modal)([\s\S]*>)/gm, `$1// You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#modal)${_os.EOL}$2`);
   }
   if (hasDisableBackdropClick) {

package/node/v5.0.0/modal-props.test/expected.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/
 (0, _jsxRuntime.jsx)(Modal // `handleOnEscapeKeyDown` is removed by codemod.
 // `disableBackdropClick` is removed by codemod.
-// You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/guides/migration-v4/#modal)
+// You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#modal)
 , {
   onClose: handleClose
 });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.8.0",
+  "version": "5.8.4",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -35,7 +35,7 @@
     "@babel/traverse": "^7.17.3",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "yargs": "^17.4.1"
+    "yargs": "^17.5.1"
   },
   "devDependencies": {
     "@types/jscodeshift": "0.11.5"