@mui/codemod 5.15.11 → 5.15.12

package/node/deprecations/chip-classes/postcss-plugin.js

@@ -0,0 +1,105 @@
+"use strict";
+
+const classes = [{
+  deprecatedClass: '.MuiChip-clickableColorPrimary',
+  replacementSelector: '.MuiChip-clickable.MuiChip-colorPrimary'
+}, {
+  deprecatedClass: '.MuiChip-clickableColorSecondary',
+  replacementSelector: '.MuiChip-clickable.MuiChip-colorSecondary'
+}, {
+  deprecatedClass: '.MuiChip-deletableColorPrimary',
+  replacementSelector: '.MuiChip-deletable.MuiChip-colorPrimary'
+}, {
+  deprecatedClass: '.MuiChip-deletableColorSecondary',
+  replacementSelector: '.MuiChip-deletable.MuiChip-colorSecondary'
+}, {
+  deprecatedClass: '.MuiChip-outlinedPrimary',
+  replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary'
+}, {
+  deprecatedClass: '.MuiChip-outlinedSecondary',
+  replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary'
+}, {
+  deprecatedClass: '.MuiChip-filledPrimary',
+  replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary'
+}, {
+  deprecatedClass: '.MuiChip-filledSecondary',
+  replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary'
+}, {
+  deprecatedClass: ' .MuiChip-avatarSmall',
+  replacementSelector: '.MuiChip-sizeSmall > .MuiChip-avatar'
+}, {
+  deprecatedClass: ' .MuiChip-avatarMedium',
+  replacementSelector: '.MuiChip-sizeMedium > .MuiChip-avatar'
+}, {
+  deprecatedClass: ' .MuiChip-avatarColorPrimary',
+  replacementSelector: '.MuiChip-colorPrimary > .MuiChip-avatar'
+}, {
+  deprecatedClass: ' .MuiChip-avatarColorSecondary',
+  replacementSelector: '.MuiChip-colorSecondary > .MuiChip-avatar'
+}, {
+  deprecatedClass: ' .MuiChip-iconSmall',
+  replacementSelector: '.MuiChip-sizeSmall > .MuiChip-icon'
+}, {
+  deprecatedClass: ' .MuiChip-iconMedium',
+  replacementSelector: '.MuiChip-sizeMedium > .MuiChip-icon'
+}, {
+  deprecatedClass: ' .MuiChip-iconColorPrimary',
+  replacementSelector: '.MuiChip-colorPrimary > .MuiChip-icon'
+}, {
+  deprecatedClass: ' .MuiChip-iconColorSecondary',
+  replacementSelector: '.MuiChip-colorSecondary > .MuiChip-icon'
+}, {
+  deprecatedClass: ' .MuiChip-labelSmall',
+  replacementSelector: '.MuiChip-sizeSmall > .MuiChip-label'
+}, {
+  deprecatedClass: ' .MuiChip-labelMedium',
+  replacementSelector: '.MuiChip-sizeMedium > .MuiChip-label'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconSmall',
+  replacementSelector: '.MuiChip-sizeSmall > .MuiChip-deleteIcon'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconMedium',
+  replacementSelector: '.MuiChip-sizeMedium > .MuiChip-deleteIcon'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconColorPrimary',
+  replacementSelector: '.MuiChip-colorPrimary > .MuiChip-deleteIcon'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconColorSecondary',
+  replacementSelector: '.MuiChip-colorSecondary > .MuiChip-deleteIcon'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconOutlinedColorPrimary',
+  replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconOutlinedColorSecondary',
+  replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconFilledColorPrimary',
+  replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon'
+}, {
+  deprecatedClass: ' .MuiChip-deleteIconFilledColorSecondary',
+  replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon'
+}];
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deperecated Chip 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/chip-classes/postcss.config.js

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

package/node/deprecations/chip-classes/test-cases/actual.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _Chip = require("@mui/material/Chip");
+'&.MuiChip-clickableColorPrimary';
+'&.MuiChip-clickableColorSecondary';
+'&.MuiChip-deletableColorPrimary';
+'&.MuiChip-deletableColorSecondary';
+'&.MuiChip-outlinedPrimary';
+'&.MuiChip-outlinedSecondary';
+'&.MuiChip-filledPrimary';
+'&.MuiChip-filledSecondary';
+'& .MuiChip-avatarSmall';
+'& .MuiChip-avatarMedium';
+'& .MuiChip-avatarColorPrimary';
+'& .MuiChip-avatarColorSecondary';
+'& .MuiChip-iconSmall';
+'& .MuiChip-iconMedium';
+'& .MuiChip-iconColorPrimary';
+'& .MuiChip-iconColorSecondary';
+'& .MuiChip-labelSmall';
+'& .MuiChip-labelMedium';
+'& .MuiChip-deleteIconSmall';
+'& .MuiChip-deleteIconMedium';
+'& .MuiChip-deleteIconColorPrimary';
+'& .MuiChip-deleteIconColorSecondary';
+'& .MuiChip-deleteIconFilledColorPrimary';
+'& .MuiChip-deleteIconFilledColorSecondary';
+'& .MuiChip-deleteIconOutlinedColorPrimary';
+'& .MuiChip-deleteIconOutlinedColorSecondary';
+`&.${_Chip.chipClasses.clickableColorPrimary}`;
+`&.${_Chip.chipClasses.clickableColorSecondary}`;
+`&.${_Chip.chipClasses.deletableColorPrimary}`;
+`&.${_Chip.chipClasses.deletableColorSecondary}`;
+`&.${_Chip.chipClasses.outlinedPrimary}`;
+`&.${_Chip.chipClasses.outlinedSecondary}`;
+`&.${_Chip.chipClasses.filledPrimary}`;
+`&.${_Chip.chipClasses.filledSecondary}`;
+`& .${_Chip.chipClasses.avatarSmall}`;
+`& .${_Chip.chipClasses.avatarMedium}`;
+`& .${_Chip.chipClasses.avatarColorPrimary}`;
+`& .${_Chip.chipClasses.avatarColorSecondary}`;
+`& .${_Chip.chipClasses.iconSmall}`;
+`& .${_Chip.chipClasses.iconMedium}`;
+`& .${_Chip.chipClasses.iconColorPrimary}`;
+`& .${_Chip.chipClasses.iconColorSecondary}`;
+`& .${_Chip.chipClasses.labelSmall}`;
+`& .${_Chip.chipClasses.labelMedium}`;
+`& .${_Chip.chipClasses.deleteIconSmall}`;
+`& .${_Chip.chipClasses.deleteIconMedium}`;
+`& .${_Chip.chipClasses.deleteIconColorPrimary}`;
+`& .${_Chip.chipClasses.deleteIconColorSecondary}`;
+`& .${_Chip.chipClasses.deleteIconFilledColorPrimary}`;
+`& .${_Chip.chipClasses.deleteIconFilledColorSecondary}`;
+`& .${_Chip.chipClasses.deleteIconOutlinedColorPrimary}`;
+`& .${_Chip.chipClasses.deleteIconOutlinedColorSecondary}`;

package/node/deprecations/chip-classes/test-cases/expected.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _Chip = require("@mui/material/Chip");
+"&.MuiChip-clickable.MuiChip-colorPrimary";
+"&.MuiChip-clickable.MuiChip-colorSecondary";
+"&.MuiChip-deletable.MuiChip-colorPrimary";
+"&.MuiChip-deletable.MuiChip-colorSecondary";
+"&.MuiChip-outlined.MuiChip-colorPrimary";
+"&.MuiChip-outlined.MuiChip-colorSecondary";
+"&.MuiChip-filled.MuiChip-colorPrimary";
+"&.MuiChip-filled.MuiChip-colorSecondary";
+"&.MuiChip-sizeSmall > .MuiChip-avatar";
+"&.MuiChip-sizeMedium > .MuiChip-avatar";
+"&.MuiChip-colorPrimary > .MuiChip-avatar";
+"&.MuiChip-colorSecondary > .MuiChip-avatar";
+"&.MuiChip-sizeSmall > .MuiChip-icon";
+"&.MuiChip-sizeMedium > .MuiChip-icon";
+"&.MuiChip-colorPrimary > .MuiChip-icon";
+"&.MuiChip-colorSecondary > .MuiChip-icon";
+"&.MuiChip-sizeSmall > .MuiChip-label";
+"&.MuiChip-sizeMedium > .MuiChip-label";
+"&.MuiChip-sizeSmall > .MuiChip-deleteIcon";
+"&.MuiChip-sizeMedium > .MuiChip-deleteIcon";
+"&.MuiChip-colorPrimary > .MuiChip-deleteIcon";
+"&.MuiChip-colorSecondary > .MuiChip-deleteIcon";
+"&.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon";
+"&.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon";
+"&.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon";
+"&.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon";
+`&.${_Chip.chipClasses.clickable}.${_Chip.chipClasses.colorPrimary}`;
+`&.${_Chip.chipClasses.clickable}.${_Chip.chipClasses.colorSecondary}`;
+`&.${_Chip.chipClasses.deletable}.${_Chip.chipClasses.colorPrimary}`;
+`&.${_Chip.chipClasses.deletable}.${_Chip.chipClasses.colorSecondary}`;
+`&.${_Chip.chipClasses.outlined}.${_Chip.chipClasses.colorPrimary}`;
+`&.${_Chip.chipClasses.outlined}.${_Chip.chipClasses.colorSecondary}`;
+`&.${_Chip.chipClasses.filled}.${_Chip.chipClasses.colorPrimary}`;
+`&.${_Chip.chipClasses.filled}.${_Chip.chipClasses.colorSecondary}`;
+`&.${_Chip.chipClasses.sizeSmall} > .${_Chip.chipClasses.avatar}`;
+`&.${_Chip.chipClasses.sizeMedium} > .${_Chip.chipClasses.avatar}`;
+`&.${_Chip.chipClasses.colorPrimary} > .${_Chip.chipClasses.avatar}`;
+`&.${_Chip.chipClasses.colorSecondary} > .${_Chip.chipClasses.avatar}`;
+`&.${_Chip.chipClasses.sizeSmall} > .${_Chip.chipClasses.icon}`;
+`&.${_Chip.chipClasses.sizeMedium} > .${_Chip.chipClasses.icon}`;
+`&.${_Chip.chipClasses.colorPrimary} > .${_Chip.chipClasses.icon}`;
+`&.${_Chip.chipClasses.colorSecondary} > .${_Chip.chipClasses.icon}`;
+`&.${_Chip.chipClasses.sizeSmall} > .${_Chip.chipClasses.label}`;
+`&.${_Chip.chipClasses.sizeMedium} > .${_Chip.chipClasses.label}`;
+`&.${_Chip.chipClasses.sizeSmall} > .${_Chip.chipClasses.deleteIcon}`;
+`&.${_Chip.chipClasses.sizeMedium} > .${_Chip.chipClasses.deleteIcon}`;
+`&.${_Chip.chipClasses.colorPrimary} > .${_Chip.chipClasses.deleteIcon}`;
+`&.${_Chip.chipClasses.colorSecondary} > .${_Chip.chipClasses.deleteIcon}`;
+`&.${_Chip.chipClasses.filled}.${_Chip.chipClasses.colorPrimary} > .${_Chip.chipClasses.deleteIcon}`;
+`&.${_Chip.chipClasses.filled}.${_Chip.chipClasses.colorSecondary} > .${_Chip.chipClasses.deleteIcon}`;
+`&.${_Chip.chipClasses.outlined}.${_Chip.chipClasses.colorPrimary} > .${_Chip.chipClasses.deleteIcon}`;
+`&.${_Chip.chipClasses.outlined}.${_Chip.chipClasses.colorSecondary} > .${_Chip.chipClasses.deleteIcon}`;

package/node/deprecations/slider-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 _sliderProps.default;
+  }
+});
+var _sliderProps = _interopRequireDefault(require("./slider-props"));

package/node/deprecations/slider-props/slider-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: 'Slider'
+  });
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  components: {
+    Track: ComponentsTrack
+  },
+  componentsProps: {
+    track: componentsTrackProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  slots: {
+    rail: SlotsRail
+  },
+  components: {
+    Track: ComponentsTrack
+  },
+  slotProps: {
+    rail: slotsRailProps
+  },
+  componentsProps: {
+    track: componentsTrackProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  slots: {
+    rail: SlotsRail,
+    track: SlotsTrack
+  },
+  components: {
+    Track: ComponentsTrack
+  },
+  slotProps: {
+    rail: slotsRailProps,
+    track: slotsTrackProps
+  },
+  componentsProps: {
+    track: componentsTrackProps
+  }
+});

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  slots: {
+    track: ComponentsTrack
+  },
+  slotProps: {
+    track: componentsTrackProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  slots: {
+    rail: SlotsRail,
+    track: ComponentsTrack
+  },
+  slotProps: {
+    rail: slotsRailProps,
+    track: componentsTrackProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  slots: {
+    rail: SlotsRail,
+    track: SlotsTrack
+  },
+  slotProps: {
+    rail: slotsRailProps,
+    track: slotsTrackProps
+  }
+});

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

@@ -0,0 +1,52 @@
+"use strict";
+
+fn({
+  MuiSlider: {
+    defaultProps: {
+      components: {
+        Track: ComponentsTrack
+      },
+      componentsProps: {
+        track: componentsTrackProps
+      }
+    }
+  }
+});
+fn({
+  MuiSlider: {
+    defaultProps: {
+      components: {
+        Track: ComponentsTrack
+      },
+      slots: {
+        rail: SlotsRail
+      },
+      componentsProps: {
+        track: componentsTrackProps
+      },
+      slotProps: {
+        rail: slotsRailProps
+      }
+    }
+  }
+});
+fn({
+  MuiSlider: {
+    defaultProps: {
+      components: {
+        Track: ComponentsTrack
+      },
+      slots: {
+        rail: SlotsRail,
+        track: SlotsTrack
+      },
+      componentsProps: {
+        track: componentsTrackProps
+      },
+      slotProps: {
+        rail: slotsRailProps,
+        track: slotsTrackProps
+      }
+    }
+  }
+});

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

@@ -0,0 +1,42 @@
+"use strict";
+
+fn({
+  MuiSlider: {
+    defaultProps: {
+      slots: {
+        track: ComponentsTrack
+      },
+      slotProps: {
+        track: componentsTrackProps
+      }
+    }
+  }
+});
+fn({
+  MuiSlider: {
+    defaultProps: {
+      slots: {
+        track: ComponentsTrack,
+        rail: SlotsRail
+      },
+      slotProps: {
+        track: componentsTrackProps,
+        rail: slotsRailProps
+      }
+    }
+  }
+});
+fn({
+  MuiSlider: {
+    defaultProps: {
+      slots: {
+        track: SlotsTrack,
+        rail: SlotsRail
+      },
+      slotProps: {
+        track: slotsTrackProps,
+        rail: slotsRailProps
+      }
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.15.11",
+  "version": "5.15.12",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -29,12 +29,12 @@
     "@babel/traverse": "^7.23.9",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "postcss": "^8.4.33",
-    "postcss-cli": "^8.0.0",
+    "postcss": "^8.4.35",
+    "postcss-cli": "^8.3.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.11",
+    "@types/chai": "^4.3.12",
     "@types/jscodeshift": "0.11.5",
     "chai": "^4.4.1"
   },