From b000c4b247aa51ba8a427b37570610efd9574865 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Thu, 15 Feb 2024 11:32:49 -0300
Subject: [PATCH] Add codemod for imported classes object

---
 .../migrating-from-deprecated-apis.md         |  6 ++-
 packages/mui-codemod/README.md                | 15 ++++++
 .../accordion-summary-classes.js              | 47 +++++++++++++++++++
 .../test-cases/actual.js                      | 30 ++++++++++++
 .../test-cases/expected.js                    | 30 ++++++++++++
 5 files changed, 126 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 0df55491ec672c..cb06f952f07491 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -76,11 +76,13 @@ Bear in mind that the `.MuiAccordionSummary-gutters` class is applied to the com
 ```
 
 ```diff
+ import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+
  MuiAccordionSummary: {
    styleOverrides: {
      root: {
--      '& .MuiAccordionSummary-contentGutters': {
-+      '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+-      [`& .${accordionSummaryClasses.contentGutters}`]: {
++      [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
          color: 'red',
         },
      },
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index bc867412d13b3d..709373675e397c 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -96,6 +96,21 @@ npx @mui/codemod@latest deprecations/accordion-props <path>
 
 JS transforms:
 
+```diff
+ import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+
+ MuiAccordionSummary: {
+   styleOverrides: {
+     root: {
+-      [`& .${accordionSummaryClasses.contentGutters}`]: {
++      [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
 ```diff
  MuiAccordionSummary: {
    styleOverrides: {
diff --git a/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js b/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js
index 80f8ad24cbce19..b6883c7d3d497a 100644
--- a/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js
+++ b/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js
@@ -12,6 +12,53 @@ export default function transformer(file, api, options) {
   // 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(`^& ${deprecatedClass}`);
   root
     .find(
diff --git a/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/actual.js
index 4f1edf0d09f365..f4da57c34507b7 100644
--- a/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/actual.js
+++ b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/actual.js
@@ -1,3 +1,5 @@
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+
 fn({
   MuiAccordionSummary: {
     styleOverrides: {
@@ -10,6 +12,18 @@ fn({
   },
 });
 
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`& .${accordionSummaryClasses.contentGutters}`]: {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
 styled(Component)(() => {
   return {
     '& .MuiAccordionSummary-contentGutters': {
@@ -18,6 +32,14 @@ styled(Component)(() => {
   };
 });
 
+styled(Component)(() => {
+  return {
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  };
+});
+
 <AccordionSummary
   sx={{
     '& .MuiAccordionSummary-contentGutters': {
@@ -25,3 +47,11 @@ styled(Component)(() => {
     },
   }}
 />;
+
+<AccordionSummary
+  sx={{
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/expected.js
index 5330b08ad48059..ab562312896429 100644
--- a/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/expected.js
+++ b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/expected.js
@@ -1,3 +1,5 @@
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+
 fn({
   MuiAccordionSummary: {
     styleOverrides: {
@@ -10,6 +12,18 @@ fn({
   },
 });
 
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
 styled(Component)(() => {
   return {
     '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
@@ -18,6 +32,14 @@ styled(Component)(() => {
   };
 });
 
+styled(Component)(() => {
+  return {
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  };
+});
+
 <AccordionSummary
   sx={{
     '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
@@ -25,3 +47,11 @@ styled(Component)(() => {
     },
   }}
 />;
+
+<AccordionSummary
+  sx={{
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  }}
+/>;