[material-ui][PaginationItem] Add codemod for deprecated classes

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -164,3 +164,55 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
 +  sx={{ opacity : "0.6" }}
  />
 ```
+
+## PaginationItem
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/pagination-item-classes <path>
+```
+
+### Composed CSS classes
+
+The CSS classes that composed the `variant` and `color` prop values were removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiPaginationItem-textPrimary
++.MuiPaginationItem-text.MuiPaginationItem-colorPrimary
+-.MuiPaginationItem-outlinedPrimary
++.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary
+-.MuiPaginationItem-textSecondary
++.MuiPaginationItem-text.MuiPaginationItem-colorSecondary
+-.MuiPaginationItem-outlinedSecondary
++.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary
+```
+
+```diff
+ import { paginationItemClasses } from '@mui/material/PaginationItem';
+
+ MuiPaginationItem: {
+   styleOverrides: {
+     root: {
+-      [`&.${paginationItemClasses.textPrimary}`]: {
++      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
+         color: 'red',
+        },
+-      [`&.${paginationItemClasses.outlinedPrimary}`]: {
++      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
+         color: 'red',
+        },
+-      [`&.${paginationItemClasses.textSecondary}`]: {
++      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
+         color: 'red',
+        },
+-      [`&.${paginationItemClasses.outlinedSecondary}`]: {
++      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
+         color: 'red',
+        },
+     },
+   },
+ },
+```

docs/translations/api-docs/pagination-item/pagination-item.json

@@ -66,13 +66,13 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead."
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "outlinedSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead."
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "page": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -114,13 +114,13 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead."
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "textSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead."
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     }
   }
 }

packages/mui-codemod/README.md

@@ -191,6 +191,71 @@ npx @mui/codemod@latest deprecations/alert-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`

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -2,6 +2,7 @@ import transformAccordionProps from '../accordion-props';
 import transformAvatarProps from '../avatar-props';
 import transformDividerProps from '../divider-props';
 import transformAccordionClasses from '../accordion-summary-classes';
+import transformPaginationItemClasses from '../pagination-item-classes';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -12,6 +13,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformAvatarProps(file, api, options);
   file.source = transformDividerProps(file, api, options);
   file.source = transformAccordionClasses(file, api, options);
+  file.source = transformPaginationItemClasses(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/all/postcss.config.js

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

packages/mui-codemod/src/deprecations/pagination-item-classes/index.js

@@ -0,0 +1 @@
+export { default } from './pagination-item-classes';

packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js

@@ -0,0 +1,84 @@
+import { classes } from './postcss-plugin';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  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);
+}

packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js

@@ -0,0 +1,78 @@
+import path from 'path';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { jscodeshift } from '../../../testUtils';
+import jsTransform from './pagination-item-classes';
+import { plugin as postcssPlugin } from './postcss-plugin';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+const postcssProcessor = postcss([postcssPlugin]);
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('pagination-item-classes', () => {
+      describe('js-transform', () => {
+        it('transforms props as needed', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/actual.js') },
+            { jscodeshift },
+            { printOptions: { quote: 'double', trailingComma: true } },
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/expected.js') },
+            { jscodeshift },
+            {},
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('css-transform', () => {
+        it('transforms classes as needed', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/actual.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/expected.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('test-cases', () => {
+        it('should not be the same', () => {
+          const actualJS = read('./test-cases/actual.js');
+          const expectedJS = read('./test-cases/expected.js');
+          expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different');
+
+          const actualCSS = read('./test-cases/actual.css');
+          const expectedCSS = read('./test-cases/expected.css');
+          expect(actualCSS).not.to.equal(
+            expectedCSS,
+            'The actual and expected should be different',
+          );
+        });
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js

@@ -0,0 +1,41 @@
+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,
+};