@mui/codemod 5.15.10 → 5.15.11

package/README.md

@@ -7,6 +7,7 @@
 
 This repository contains a collection of codemod scripts based for use with
 [jscodeshift](https://github.com/facebook/jscodeshift) that help update the APIs.
+Some of the codemods also run [postcss](https://github.com/postcss/postcss) plugins to update CSS files.
 
 ## Setup & run
 
@@ -91,6 +92,76 @@ A combination of all deprecations.
 npx @mui/codemod@latest deprecations/accordion-props <path>
 ```
 
+#### `accordion-summary-classes`
+
+JS transforms:
+
+```diff
+ import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+
+ MuiAccordionSummary: {
+   styleOverrides: {
+     root: {
+-      [`& .${accordionSummaryClasses.contentGutters}`]: {
++      [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
+```diff
+ MuiAccordionSummary: {
+   styleOverrides: {
+     root: {
+-      '& .MuiAccordionSummary-contentGutters': {
++      '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiAccordionSummary-root .MuiAccordionSummary-contentGutters
++.MuiAccordionSummary-root.MuiAccordionSummary-gutters .MuiAccordionSummary-content
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/accordion-summary-classes <path>
+```
+
+#### `alert-props`
+
+```diff
+ <Alert
+-  components={{ CloseButton: CustomButton }}
++  slots={{ closeButton: CustomButton }}
+-  componentsProps={{ closeButton: { testid: 'test-id' } }}
++  slotProps={{ closeButton: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiAlert: {
+   defaultProps: {
+-    components: { CloseButton: CustomButton }
++    slots: { closeButton: CustomButton },
+-    componentsProps: { closeButton: { testid: 'test-id' }}
++    slotProps: { closeButton: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@latest deprecations/alert-props <path>
+```
+
 #### `avatar-props`
 
 ```diff
@@ -120,6 +191,71 @@ npx @mui/codemod@latest deprecations/accordion-props <path>
 npx @mui/codemod@latest deprecations/divider-props <path>
 ```
 
+#### `pagination-item-classes`
+
+JS transforms:
+
+```diff
+ import { paginationItemClasses } from '@mui/material/PaginationItem';
+
+ MuiPaginationItem: {
+   styleOverrides: {
+     root: {
+-      [`&.${paginationItemClasses.textPrimary}`]: {
++      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
+         color: 'red',
+        },
+-      [`&.${paginationItemClasses.textSecondary}`]: {
++      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
+         color: 'red',
+        },
+-      [`&.${paginationItemClasses.outlinedPrimary}`]: {
++      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
+         color: 'red',
+        },
+-      [`&.${paginationItemClasses.outlinedSecondary}`]: {
++      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
+         color: 'red',
+        },
+-      '&.MuiPaginationItem-textPrimary': {
++      '&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary': {
+         color: 'red',
+        },
+-      '&.MuiPaginationItem-textSecondary': {
++      '&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary': {
+         color: 'red',
+        },
+-      '&.MuiPaginationItem-outlinedPrimary': {
++      '&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary': {
+         color: 'red',
+        },
+-      '&.MuiPaginationItem-outlinedSecondary': {
++      '&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary': {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiPaginationItem-textPrimary
++.MuiPaginationItem-text.MuiPaginationItem-primary
+-.MuiPaginationItem-textSecondary
++.MuiPaginationItem-text.MuiPaginationItem-secondary
+-.MuiPaginationItem-outlinedPrimary
++.MuiPaginationItem-outlined.MuiPaginationItem-primary
+-.MuiPaginationItem-outlinedSecondary
++.MuiPaginationItem-outlined.MuiPaginationItem-secondary
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/pagination-item-classes <path>
+```
+
 ### v5.0.0
 
 #### `base-use-named-exports`
@@ -1234,7 +1370,7 @@ You can find more details about this breaking change in the migration guide.
 
 #### `theme-augment`
 
-Adds `DefaultTheme` module augmentation to typescript projects.
+Adds `DefaultTheme` module augmentation to TypeScript projects.
 
 ```bash
 npx @mui/codemod@latest v5.0.0/theme-augment <path>

package/codemod.js

@@ -5,11 +5,15 @@ const { promises: fs } = require('fs');
 const path = require('path');
 const yargs = require('yargs');
 const jscodeshiftPackage = require('jscodeshift/package.json');
+const postcssCliPackage = require('postcss-cli/package.json');
 
 const jscodeshiftDirectory = path.dirname(require.resolve('jscodeshift'));
 const jscodeshiftExecutable = path.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift);
 
-async function runTransform(transform, files, flags, codemodFlags) {
+const postcssCliDirectory = path.dirname(require.resolve('postcss-cli'));
+const postcssExecutable = path.join(postcssCliDirectory, postcssCliPackage.bin.postcss);
+
+async function runJscodeshiftTransform(transform, files, flags, codemodFlags) {
   const paths = [
     path.resolve(__dirname, './src', `${transform}/index.js`),
     path.resolve(__dirname, './src', `${transform}.js`),
@@ -57,6 +61,8 @@ async function runTransform(transform, files, flags, codemodFlags) {
     flags.parser || 'tsx',
     '--ignore-pattern',
     '**/node_modules/**',
+    '--ignore-pattern',
+    '**/*.css',
   ];
 
   if (flags.dry) {
@@ -80,15 +86,82 @@ async function runTransform(transform, files, flags, codemodFlags) {
   }
 }
 
+const parseCssFilePaths = async (files) => {
+  const cssFiles = await Promise.all(
+    files.map(async (filePath) => {
+      const stat = await fs.stat(filePath);
+      if (stat.isDirectory()) {
+        return `${filePath}/**/*.css`;
+      }
+      if (filePath.endsWith('.css')) {
+        return filePath;
+      }
+
+      return null;
+    }),
+  );
+
+  return cssFiles.filter(Boolean);
+};
+
+async function runPostcssTransform(transform, files) {
+  // local postcss plugins are loaded through config files https://github.com/postcss/postcss-load-config/issues/17#issuecomment-253125559
+  const paths = [
+    path.resolve(__dirname, './src', `${transform}/postcss.config.js`),
+    path.resolve(__dirname, './node', `${transform}/postcss.config.js`),
+  ];
+
+  let configPath;
+  let error;
+  // eslint-disable-next-line no-restricted-syntax
+  for (const item of paths) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      await fs.stat(item);
+      error = undefined;
+      configPath = item;
+      break;
+    } catch (srcPathError) {
+      error = srcPathError;
+      continue;
+    }
+  }
+
+  if (error) {
+    // don't throw if the file is not found, postcss transform is optional
+    if (error?.code !== 'ENOENT') {
+      throw error;
+    }
+  } else {
+    const cssPaths = await parseCssFilePaths(files);
+
+    if (cssPaths.length > 0) {
+      const args = [
+        postcssExecutable,
+        ...cssPaths,
+        '--config',
+        configPath,
+        '--replace',
+        '--verbose',
+      ];
+
+      // eslint-disable-next-line no-console -- debug information
+      console.log(`Executing command: postcss ${args.join(' ')}`);
+      const postcssProcess = childProcess.spawnSync('node', args, { stdio: 'inherit' });
+
+      if (postcssProcess.error) {
+        throw postcssProcess.error;
+      }
+    }
+  }
+}
+
 function run(argv) {
   const { codemod, paths, ...flags } = argv;
+  const files = paths.map((filePath) => path.resolve(filePath));
 
-  return runTransform(
-    codemod,
-    paths.map((filePath) => path.resolve(filePath)),
-    flags,
-    argv._,
-  );
+  runJscodeshiftTransform(codemod, files, flags, argv._);
+  runPostcssTransform(codemod, files);
 }
 
 yargs

package/node/deprecations/accordion-summary-classes/accordion-summary-classes.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _postcssPlugin = require("./postcss-plugin");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  // contentGutters is a special case as it's applied to the content child
+  // but gutters is applied to the parent element, so the gutter class needs to go on the parent
+
+  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/AccordionSummary$/)).forEach(path => {
+    path.node.specifiers.forEach(specifier => {
+      if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'accordionSummaryClasses') {
+        root.find(j.MemberExpression, {
+          object: {
+            name: specifier.local.name
+          },
+          property: {
+            name: 'contentGutters'
+          }
+        }).forEach(memberExpression => {
+          const parent = memberExpression.parentPath.parentPath.value;
+          if (parent.type === j.TemplateLiteral.name) {
+            const memberExpressionIndex = parent.expressions.findIndex(expression => expression === memberExpression.value);
+            const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+            if (precedingTemplateElement.value.raw.endsWith(' .')) {
+              parent.expressions.splice(memberExpressionIndex, 1, j.memberExpression(memberExpression.value.object, j.identifier('gutters')), j.memberExpression(memberExpression.value.object, j.identifier('content')));
+              parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
+                raw: precedingTemplateElement.value.raw.replace(' ', ''),
+                cooked: precedingTemplateElement.value.cooked.replace(' ', '')
+              }, false), j.templateElement({
+                raw: ' .',
+                cooked: ' .'
+              }, false));
+            }
+          }
+        });
+      }
+    });
+  });
+  const selectorRegex = new RegExp(`^& ${_postcssPlugin.deprecatedClass}`);
+  root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
+    path.replace(j.literal(path.value.value.replace(selectorRegex, `&${_postcssPlugin.replacementSelector}`)));
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/accordion-summary-classes/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _accordionSummaryClasses.default;
+  }
+});
+var _accordionSummaryClasses = _interopRequireDefault(require("./accordion-summary-classes"));

package/node/deprecations/accordion-summary-classes/postcss-plugin.js

@@ -0,0 +1,28 @@
+"use strict";
+
+const deprecatedClass = '.MuiAccordionSummary-contentGutters';
+const replacementSelector = '.MuiAccordionSummary-gutters .MuiAccordionSummary-content';
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace ${deprecatedClass} with ${replacementSelector}`,
+    Rule(rule) {
+      const {
+        selector
+      } = rule;
+
+      // contentGutters is a special case as it's applied to the content child
+      // but gutters is applied to the parent element, so the gutter class needs to go on the parent
+
+      const selectorRegex = new RegExp(` ${deprecatedClass}`);
+      if (selector.match(selectorRegex)) {
+        rule.selector = selector.replace(selectorRegex, replacementSelector);
+      }
+    }
+  };
+};
+plugin.postcss = true;
+module.exports = {
+  plugin,
+  deprecatedClass,
+  replacementSelector
+};

package/node/deprecations/accordion-summary-classes/postcss.config.js

@@ -0,0 +1,8 @@
+"use strict";
+
+const {
+  plugin
+} = require('./postcss-plugin');
+module.exports = {
+  plugins: [plugin]
+};

package/node/deprecations/accordion-summary-classes/test-cases/actual.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _AccordionSummary = require("@mui/material/AccordionSummary");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '& .MuiAccordionSummary-contentGutters': {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`& .${_AccordionSummary.accordionSummaryClasses.contentGutters}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`& .${_AccordionSummary.accordionSummaryClasses.contentGutters}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    [`& .${_AccordionSummary.accordionSummaryClasses.contentGutters}`]: {
+      color: 'red'
+    }
+  }
+});

package/node/deprecations/accordion-summary-classes/test-cases/expected.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _AccordionSummary = require("@mui/material/AccordionSummary");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`&.${_AccordionSummary.accordionSummaryClasses.gutters} .${_AccordionSummary.accordionSummaryClasses.content}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`&.${_AccordionSummary.accordionSummaryClasses.gutters} .${_AccordionSummary.accordionSummaryClasses.content}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    [`&.${_AccordionSummary.accordionSummaryClasses.gutters} .${_AccordionSummary.accordionSummaryClasses.content}`]: {
+      color: 'red'
+    }
+  }
+});

package/node/deprecations/alert-props/alert-props.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _replaceComponentsWithSlots = _interopRequireDefault(require("../utils/replaceComponentsWithSlots"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  (0, _replaceComponentsWithSlots.default)(j, {
+    root,
+    componentName: 'Alert'
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/alert-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _alertProps.default;
+  }
+});
+var _alertProps = _interopRequireDefault(require("./alert-props"));

package/node/deprecations/alert-props/test-cases/actual.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  components: {
+    CloseButton: ComponentsButton
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon
+  },
+  components: {
+    CloseButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  components: {
+    CloseButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: slotsButtonProps
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps
+  }
+});

package/node/deprecations/alert-props/test-cases/expected.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeButton: ComponentsButton
+  },
+  slotProps: {
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: slotsButtonProps
+  }
+});

package/node/deprecations/alert-props/test-cases/theme.actual.js

@@ -0,0 +1,52 @@
+"use strict";
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: {
+        CloseButton: ComponentsButton
+      },
+      componentsProps: {
+        closeButton: componentsButtonProps
+      }
+    }
+  }
+});
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: {
+        CloseButton: ComponentsButton
+      },
+      slots: {
+        closeIcon: SlotsIcon
+      },
+      componentsProps: {
+        closeButton: componentsButtonProps
+      },
+      slotProps: {
+        closeIcon: slotsIconProps
+      }
+    }
+  }
+});
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: {
+        CloseButton: ComponentsButton
+      },
+      slots: {
+        closeIcon: SlotsIcon,
+        closeButton: SlotsButton
+      },
+      componentsProps: {
+        closeButton: componentsButtonProps
+      },
+      slotProps: {
+        closeIcon: slotsIconProps,
+        closeButton: slotsButtonProps
+      }
+    }
+  }
+});

package/node/deprecations/alert-props/test-cases/theme.expected.js

@@ -0,0 +1,42 @@
+"use strict";
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: ComponentsButton
+      },
+      slotProps: {
+        closeButton: componentsButtonProps
+      }
+    }
+  }
+});
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: ComponentsButton,
+        closeIcon: SlotsIcon
+      },
+      slotProps: {
+        closeButton: componentsButtonProps,
+        closeIcon: slotsIconProps
+      }
+    }
+  }
+});
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: SlotsButton,
+        closeIcon: SlotsIcon
+      },
+      slotProps: {
+        closeButton: slotsButtonProps,
+        closeIcon: slotsIconProps
+      }
+    }
+  }
+});

package/node/deprecations/all/deprecations-all.js

@@ -8,6 +8,8 @@ exports.default = deprecationsAll;
 var _accordionProps = _interopRequireDefault(require("../accordion-props"));
 var _avatarProps = _interopRequireDefault(require("../avatar-props"));
 var _dividerProps = _interopRequireDefault(require("../divider-props"));
+var _accordionSummaryClasses = _interopRequireDefault(require("../accordion-summary-classes"));
+var _paginationItemClasses = _interopRequireDefault(require("../pagination-item-classes"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -16,5 +18,7 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _accordionProps.default)(file, api, options);
   file.source = (0, _avatarProps.default)(file, api, options);
   file.source = (0, _dividerProps.default)(file, api, options);
+  file.source = (0, _accordionSummaryClasses.default)(file, api, options);
+  file.source = (0, _paginationItemClasses.default)(file, api, options);
   return file.source;
 }

package/node/deprecations/all/postcss.config.js

@@ -0,0 +1,11 @@
+"use strict";
+
+const {
+  plugin: accordionSummaryClassesPlugin
+} = require('../accordion-summary-classes/postcss-plugin');
+const {
+  plugin: paginationItemClassesPlugin
+} = require('../pagination-item-classes/postcss-plugin');
+module.exports = {
+  plugins: [accordionSummaryClassesPlugin, paginationItemClassesPlugin]
+};

package/node/deprecations/pagination-item-classes/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _paginationItemClasses.default;
+  }
+});
+var _paginationItemClasses = _interopRequireDefault(require("./pagination-item-classes"));

package/node/deprecations/pagination-item-classes/pagination-item-classes.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _postcssPlugin = require("./postcss-plugin");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  _postcssPlugin.classes.forEach(({
+    deprecatedClass,
+    replacementSelector
+  }) => {
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/PaginationItem$/)).forEach(path => {
+      path.node.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'paginationItemClasses') {
+          const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', '');
+          root.find(j.MemberExpression, {
+            object: {
+              name: specifier.local.name
+            },
+            property: {
+              name: deprecatedAtomicClass
+            }
+          }).forEach(memberExpression => {
+            const parent = memberExpression.parentPath.parentPath.value;
+            if (parent.type === j.TemplateLiteral.name) {
+              const memberExpressionIndex = parent.expressions.findIndex(expression => expression === memberExpression.value);
+              const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+              const atomicClasses = replacementSelector.replaceAll('MuiPaginationItem-', '').replaceAll('&.', '').split('.').filter(Boolean);
+              if (precedingTemplateElement.value.raw.endsWith('&.')) {
+                parent.expressions.splice(memberExpressionIndex, 1, j.memberExpression(memberExpression.value.object, j.identifier(atomicClasses[0])), j.memberExpression(memberExpression.value.object, j.identifier(atomicClasses[1])));
+                parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
+                  raw: precedingTemplateElement.value.raw,
+                  cooked: precedingTemplateElement.value.cooked
+                }, false), j.templateElement({
+                  raw: '.',
+                  cooked: '.'
+                }, false));
+              }
+            }
+          });
+        }
+      });
+    });
+    const selectorRegex = new RegExp(`^&${deprecatedClass}`);
+    root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
+      path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`)));
+    });
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/pagination-item-classes/postcss-plugin.js

@@ -0,0 +1,39 @@
+"use strict";
+
+const classes = [{
+  deprecatedClass: '.MuiPaginationItem-textPrimary',
+  replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorPrimary'
+}, {
+  deprecatedClass: '.MuiPaginationItem-textSecondary',
+  replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorSecondary'
+}, {
+  deprecatedClass: '.MuiPaginationItem-outlinedPrimary',
+  replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary'
+}, {
+  deprecatedClass: '.MuiPaginationItem-outlinedSecondary',
+  replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary'
+}];
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deperecated PaginationItem classes with new classes`,
+    Rule(rule) {
+      const {
+        selector
+      } = rule;
+      classes.forEach(({
+        deprecatedClass,
+        replacementSelector
+      }) => {
+        const selectorRegex = new RegExp(`${deprecatedClass}`);
+        if (selector.match(selectorRegex)) {
+          rule.selector = selector.replace(selectorRegex, replacementSelector);
+        }
+      });
+    }
+  };
+};
+plugin.postcss = true;
+module.exports = {
+  plugin,
+  classes
+};

package/node/deprecations/pagination-item-classes/postcss.config.js

@@ -0,0 +1,8 @@
+"use strict";
+
+const {
+  plugin
+} = require('./postcss-plugin');
+module.exports = {
+  plugins: [plugin]
+};

package/node/deprecations/pagination-item-classes/test-cases/actual.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _PaginationItem = require("@mui/material/PaginationItem");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        '&.MuiPaginationItem-textPrimary': {
+          color: 'red'
+        },
+        '&.MuiPaginationItem-textSecondary': {
+          color: 'red'
+        },
+        '&.MuiPaginationItem-outlinedPrimary': {
+          color: 'red'
+        },
+        '&.MuiPaginationItem-outlinedSecondary': {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        [`&.${_PaginationItem.paginationItemClasses.textPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.textSecondary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlinedPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlinedSecondary}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    '&.MuiPaginationItem-textPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-textSecondary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedSecondary': {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`&.${_PaginationItem.paginationItemClasses.textPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.textSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedSecondary}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    '&.MuiPaginationItem-textPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-textSecondary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedSecondary': {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    [`&.${_PaginationItem.paginationItemClasses.textPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.textSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedSecondary}`]: {
+      color: 'red'
+    }
+  }
+});

package/node/deprecations/pagination-item-classes/test-cases/expected.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _PaginationItem = require("@mui/material/PaginationItem");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
+          color: 'red'
+        },
+        "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
+          color: 'red'
+        },
+        "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
+          color: 'red'
+        },
+        "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    }
+  }
+});

package/node/deprecations/utils/replaceComponentsWithSlots.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = replaceComponentsWithSlots;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+var _findComponentDefaultProps = _interopRequireDefault(require("../../util/findComponentDefaultProps"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+function componentsKeyToSlotsKey(str) {
+  return str[0].toLowerCase() + str.slice(1);
+}
+function replaceJsxComponentsProp(j, elementPath) {
+  const element = elementPath.node;
+  const index = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'components');
+  if (index !== -1) {
+    const removed = element.openingElement.attributes.splice(index, 1);
+    const camelCaseComponents = removed[0].value.expression.properties.reduce((acc, prop) => {
+      return (0, _extends2.default)({}, acc, {
+        [componentsKeyToSlotsKey(prop.key.name)]: prop.value
+      });
+    }, {});
+    let hasNode = false;
+    element.openingElement.attributes.forEach(attr => {
+      var _attr$name;
+      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slots') {
+        hasNode = true;
+        const slots = attr.value.expression.properties.reduce((acc, prop) => {
+          return (0, _extends2.default)({}, acc, {
+            [prop.key.name]: prop.value
+          });
+        }, {});
+        Object.entries(camelCaseComponents).forEach(([slot, value]) => {
+          if (!slots[slot]) {
+            (0, _assignObject.default)(j, {
+              target: attr,
+              key: slot,
+              expression: value
+            });
+          }
+        });
+      }
+    });
+    if (!hasNode) {
+      (0, _appendAttribute.default)(j, {
+        target: element,
+        attributeName: 'slots',
+        expression: j.objectExpression(Object.entries(camelCaseComponents).map(([slot, value]) => {
+          return j.objectProperty(j.identifier(slot), value);
+        }))
+      });
+    }
+  }
+}
+function replaceJsxComponentsPropsProp(j, element) {
+  const index = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'componentsProps');
+  if (index !== -1) {
+    const removed = element.openingElement.attributes.splice(index, 1);
+    let hasNode = false;
+    element.openingElement.attributes.forEach(attr => {
+      var _attr$name2;
+      if (((_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name) === 'slotProps') {
+        hasNode = true;
+        const slotProps = attr.value.expression.properties.reduce((acc, prop) => {
+          return (0, _extends2.default)({}, acc, {
+            [prop.key.name]: prop.value
+          });
+        }, {});
+        removed[0].value.expression.properties.forEach(prop => {
+          if (!slotProps[prop.key.name]) {
+            (0, _assignObject.default)(j, {
+              target: attr,
+              key: prop.key.name,
+              expression: prop.value
+            });
+          }
+        });
+      }
+    });
+    if (!hasNode) {
+      (0, _appendAttribute.default)(j, {
+        target: element,
+        attributeName: 'slotProps',
+        expression: removed[0].value.expression
+      });
+    }
+  }
+}
+function replaceDefaultPropsComponentsProp(j, defaultPropsPathCollection) {
+  defaultPropsPathCollection.find(j.ObjectProperty, {
+    key: {
+      name: 'components'
+    }
+  }).forEach(path => {
+    const {
+      properties: defaultPropsProperties
+    } = path.parent.value;
+    const components = path.value.value.properties.reduce((acc, prop) => {
+      return (0, _extends2.default)({}, acc, {
+        [componentsKeyToSlotsKey(prop.key.name)]: prop.value
+      });
+    }, {});
+    const existingSlots = defaultPropsProperties.find(prop => prop.key.name === 'slots');
+    const slots = existingSlots ? existingSlots.value.properties.reduce((acc, prop) => {
+      return (0, _extends2.default)({}, acc, {
+        [prop.key.name]: prop.value
+      });
+    }, {}) : {};
+    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+      return j.objectProperty(j.identifier(slot), value);
+    }));
+    if (existingSlots) {
+      existingSlots.value = updatedSlots;
+    } else {
+      defaultPropsProperties.push(j.property('init', j.identifier('slots'), updatedSlots));
+    }
+    path.prune();
+  });
+}
+function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) {
+  defaultPropsPathCollection.find(j.ObjectProperty, {
+    key: {
+      name: 'componentsProps'
+    }
+  }).forEach(path => {
+    const {
+      properties: defaultPropsProperties
+    } = path.parent.value;
+    const components = path.value.value.properties.reduce((acc, prop) => {
+      return (0, _extends2.default)({}, acc, {
+        [prop.key.name]: prop.value
+      });
+    }, {});
+    const existingSlots = defaultPropsProperties.find(prop => prop.key.name === 'slotProps');
+    const slots = existingSlots ? existingSlots.value.properties.reduce((acc, prop) => {
+      return (0, _extends2.default)({}, acc, {
+        [prop.key.name]: prop.value
+      });
+    }, {}) : {};
+    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+      return j.objectProperty(j.identifier(slot), value);
+    }));
+    if (existingSlots) {
+      existingSlots.value = updatedSlots;
+    } else {
+      defaultPropsProperties.push(j.property('init', j.identifier('slotProps'), updatedSlots));
+    }
+    path.prune();
+  });
+}
+
+/**
+ * Replaces components and componentsProps props with slots and slotProps.
+ * Handles local object and variable declaration.
+ * If the slots prop exists, it will add the components to the slots.
+ * If there are duplicated values, the slots values will be used.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ element: import('jscodeshift').JSXElement }} options
+ *
+ * @example <Component componentsProps={{ root: { 'testid': 'root-id'} }} /> => <Component slotProps={{ root: { 'testid': 'root-id'} }} />
+ */
+function replaceComponentsWithSlots(j, options) {
+  const {
+    root,
+    componentName
+  } = options;
+  (0, _findComponentJSX.default)(j, {
+    root,
+    componentName
+  }, elementPath => {
+    replaceJsxComponentsProp(j, elementPath);
+    replaceJsxComponentsPropsProp(j, elementPath.node);
+  });
+  const defaultPropsPathCollection = (0, _findComponentDefaultProps.default)(j, {
+    root,
+    componentName
+  });
+  replaceDefaultPropsComponentsProp(j, defaultPropsPathCollection);
+  replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection);
+}

package/node/util/findComponentDefaultProps.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = findComponentDefaultProps;
+/**
+ * Find all the default props path of a given component name.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ root: import('jscodeshift').Collection; componentName: string }} options
+ * @returns {import('jscodeshift').Collection}
+ *
+ */
+function findComponentDefaultProps(j, options) {
+  const {
+    root,
+    componentName
+  } = options;
+  const defaultPropsPathCollection = root.find(j.ObjectProperty, {
+    key: {
+      name: `Mui${componentName}`
+    }
+  }).find(j.ObjectProperty, {
+    key: {
+      name: 'defaultProps'
+    }
+  });
+  return defaultPropsPathCollection;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.15.10",
+  "version": "5.15.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -29,6 +29,8 @@
     "@babel/traverse": "^7.23.9",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
+    "postcss": "^8.4.33",
+    "postcss-cli": "^8.0.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {