Add codemod for imported classes object

mui · Feb 15, 2024 · b000c4b · b000c4b
1 parent 6541692
commit b000c4b
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 2 deletions.
diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/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
@@ -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
@@ -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
@@ -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,10 +32,26 @@ styled(Component)(() => {
   };
 });
 
+styled(Component)(() => {
+  return {
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  };
+});
+
 <AccordionSummary
   sx={{
     '& .MuiAccordionSummary-contentGutters': {
       color: 'red',
     },
   }}
 />;
+
+<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
@@ -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,10 +32,26 @@ styled(Component)(() => {
   };
 });
 
+styled(Component)(() => {
+  return {
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  };
+});
+
 <AccordionSummary
   sx={{
     '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
       color: 'red',
     },
   }}
 />;
+
+<AccordionSummary
+  sx={{
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  }}
+/>;