[material-ui][Select] Deprecate composed classes

docs/pages/material-ui/api/select.json

@@ -90,7 +90,8 @@
       "key": "iconFilled",
       "className": "MuiSelect-iconFilled",
       "description": "Styles applied to the icon component if `variant=\"filled\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "iconOpen",
@@ -102,13 +103,15 @@
       "key": "iconOutlined",
       "className": "MuiSelect-iconOutlined",
       "description": "Styles applied to the icon component if `variant=\"outlined\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "iconStandard",
       "className": "MuiSelect-iconStandard",
       "description": "Styles applied to the icon component if `variant=\"standard\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "multiple",

docs/translations/api-docs/select/select.json

@@ -92,7 +92,8 @@
     "iconFilled": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the icon component",
-      "conditions": "<code>variant=\"filled\"</code>"
+      "conditions": "<code>variant=\"filled\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/select/#select-classes-icon\">.MuiSelect-icon</a> and <a href=\"/material-ui/api/select/#select-classes-filled\">.MuiSelect-filled</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "iconOpen": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -102,12 +103,14 @@
     "iconOutlined": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the icon component",
-      "conditions": "<code>variant=\"outlined\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/select/#select-classes-icon\">.MuiSelect-icon</a> and <a href=\"/material-ui/api/select/#select-classes-outlined\">.MuiSelect-outlined</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "iconStandard": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the icon component",
-      "conditions": "<code>variant=\"standard\"</code>"
+      "conditions": "<code>variant=\"standard\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/select/#select-classes-icon\">.MuiSelect-icon</a> and <a href=\"/material-ui/api/select/#select-classes-standard\">.MuiSelect-standard</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "multiple": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

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

@@ -22,6 +22,7 @@ import transformStepLabelProps from '../step-label-props';
 import transformTextFieldProps from '../text-field-props';
 import transformTabClasses from '../tab-classes';
 import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
+import transformSelectClasses from '../select-classes';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -52,6 +53,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformTextFieldProps(file, api, options);
   file.source = transformTabClasses(file, api, options);
   file.source = transformToggleButtonGroupClasses(file, api, options);
+  file.source = transformSelectClasses(file, api, options);
 
   return file.source;
 }

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

@@ -19,6 +19,7 @@ const { plugin: tabClassesPlugin } = require('../tab-classes/postcss-plugin');
 const {
   plugin: tableSortLabelClassesPlugin,
 } = require('../table-sort-label-classes/postcss-plugin');
+const { plugin: selectClassesPlugin } = require('../select-classes/postcss-plugin');
 
 module.exports = {
   plugins: [
@@ -33,5 +34,6 @@ module.exports = {
     toggleButtonGroupClassesPlugin,
     tabClassesPlugin,
     tableSortLabelClassesPlugin,
+    selectClassesPlugin,
   ],
 };

packages/mui-codemod/src/deprecations/select-classes/index.js

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

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

@@ -0,0 +1,37 @@
+const classes = [
+  {
+    deprecatedClass: ' .MuiSelect-iconFilled',
+    replacementSelector: ' .MuiSelect-filled ~ .MuiSelect-icon',
+  },
+  {
+    deprecatedClass: ' .MuiSelect-iconOutlined',
+    replacementSelector: ' .MuiSelect-outlined ~ .MuiSelect-icon',
+  },
+  {
+    deprecatedClass: ' .MuiSelect-iconStandard',
+    replacementSelector: ' .MuiSelect-standard ~ .MuiSelect-icon',
+  },
+];
+
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deprecated Select classes with new classes`,
+    Rule(rule) {
+      const { selector } = rule;
+
+      classes.forEach(({ deprecatedClass, replacementSelector }) => {
+        const selectorRegex = new RegExp(`${deprecatedClass.trim()}$`);
+
+        if (selector.match(selectorRegex)) {
+          rule.selector = selector.replace(selectorRegex, replacementSelector);
+        }
+      });
+    },
+  };
+};
+plugin.postcss = true;
+
+module.exports = {
+  plugin,
+  classes,
+};

packages/mui-codemod/src/deprecations/select-classes/postcss.config.js

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

packages/mui-codemod/src/deprecations/select-classes/select-classes.js

@@ -0,0 +1,125 @@
+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 }) => {
+    const replacementSelectorPrefix = '&';
+    root
+      .find(j.ImportDeclaration)
+      .filter((path) => path.node.source.value.match(/^@mui\/material\/Select$/))
+      .forEach((path) => {
+        path.node.specifiers.forEach((specifier) => {
+          if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'selectClasses') {
+            const deprecatedAtomicClass = deprecatedClass.replace(
+              `${deprecatedClass.split('-')[0]}-`,
+              '',
+            );
+            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('MuiSelect-', '')
+                    .replaceAll(replacementSelectorPrefix, '')
+                    .replaceAll(' ~ ', '')
+                    .split('.')
+                    .map((className) => className.trim())
+                    .filter(Boolean);
+
+                  if (
+                    precedingTemplateElement.value.raw.endsWith(
+                      deprecatedClass.startsWith(' ')
+                        ? `${replacementSelectorPrefix} .`
+                        : `${replacementSelectorPrefix}.`,
+                    )
+                  ) {
+                    const atomicClassesArgs = [
+                      memberExpressionIndex,
+                      1,
+                      ...atomicClasses.map((atomicClass) =>
+                        j.memberExpression(
+                          memberExpression.value.object,
+                          j.identifier(atomicClass),
+                        ),
+                      ),
+                    ];
+                    parent.expressions.splice(...atomicClassesArgs);
+
+                    if (replacementSelector.includes(' ~ ')) {
+                      const quasisArgs = [
+                        memberExpressionIndex,
+                        1,
+                        j.templateElement(
+                          {
+                            raw: precedingTemplateElement.value.raw,
+                            cooked: precedingTemplateElement.value.cooked.replace(' ', ''),
+                          },
+                          false,
+                        ),
+                        j.templateElement({ raw: ' ~ .', cooked: ' ~ .' }, false),
+                      ];
+
+                      if (atomicClasses.length === 3) {
+                        quasisArgs.splice(
+                          3,
+                          0,
+                          j.templateElement({ raw: '.', cooked: '.' }, false),
+                        );
+                      }
+
+                      parent.quasis.splice(...quasisArgs);
+                    } else {
+                      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(`${replacementSelectorPrefix}${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,
+              `${replacementSelectorPrefix}${replacementSelector}`,
+            ),
+          ),
+        );
+      });
+  });
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/select-classes/select-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 './select-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('toggle-button-group-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/select-classes/test-cases/actual.css

@@ -0,0 +1,11 @@
+.MuiSelect-iconFilled {
+  color: red;
+}
+
+.MuiSelect-iconOutlined {
+  color: red;
+}
+
+.MuiSelect-iconStandard {
+  color: red;
+}

packages/mui-codemod/src/deprecations/select-classes/test-cases/actual.js

@@ -0,0 +1,8 @@
+import { selectClasses } from '@mui/material/Select';
+
+('& .MuiSelect-iconFilled');
+('& .MuiSelect-iconOutlined');
+('& .MuiSelect-iconStandard');
+`& .${selectClasses.iconFilled}`;
+`& .${selectClasses.iconOutlined}`;
+`& .${selectClasses.iconStandard}`;

packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.css

@@ -0,0 +1,11 @@
+.MuiSelect-filled ~ .MuiSelect-icon {
+  color: red;
+}
+
+ .MuiSelect-outlined ~ .MuiSelect-icon {
+  color: red;
+}
+
+ .MuiSelect-standard ~ .MuiSelect-icon {
+  color: red;
+}

packages/mui-codemod/src/deprecations/select-classes/test-cases/expected.js

@@ -0,0 +1,8 @@
+import { selectClasses } from '@mui/material/Select';
+
+("& .MuiSelect-filled ~ .MuiSelect-icon");
+("& .MuiSelect-outlined ~ .MuiSelect-icon");
+("& .MuiSelect-standard ~ .MuiSelect-icon");
+`& .${selectClasses.filled} ~ .${selectClasses.icon}`;
+`& .${selectClasses.outlined} ~ .${selectClasses.icon}`;
+`& .${selectClasses.standard} ~ .${selectClasses.icon}`;

packages/mui-material/src/Select/Select.test.js

@@ -1754,4 +1754,12 @@ describe('<Select />', () => {
 
     expect(getByRole('combobox')).not.toHaveFocus();
   });
+
+  it('outlined icon should be selected from below css selectors', () => {
+    const { container } = render(<Select value="" />);
+    expect(container.querySelector('.MuiSelect-iconOutlined')).not.to.equal(null);
+    expect(
+      container.querySelector('.MuiSelect-outlined ~ .MuiSelect-icon'),
+    ).not.to.equal(null);
+  });
 });