@mui/codemod 6.3.0 → 6.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1242,6 +1242,66 @@ npx @mui/codemod@latest deprecations/input-base-props <path>
1242
1242
  npx @mui/codemod@latest deprecations/input-props <path>
1243
1243
  ```
1244
1244
 
1245
+ #### `linear-progress-classes`
1246
+
1247
+ JS transforms:
1248
+
1249
+ ```diff
1250
+ import { linearProgressClasses } from '@mui/material/LinearProgress';
1251
+
1252
+ MuiLinearProgress: {
1253
+ styleOverrides: {
1254
+ root: {
1255
+ - [`&.${linearProgressClasses.bar1Buffer}`]: {},
1256
+ + [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar1}`]: {},
1257
+ - [`&.${linearProgressClasses.bar1Determinate}`]: {},
1258
+ + [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1}`]: {},
1259
+ - [`&.${linearProgressClasses.bar1Indeterminate}`]: {},
1260
+ + [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar1}`]: {},
1261
+ - [`&.${linearProgressClasses.bar2Buffer}`]: {},
1262
+ + [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar2}`]: {},
1263
+ - [`&.${linearProgressClasses.bar2Indeterminate}`]: {},
1264
+ + [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar2}`]: {},
1265
+ - [`&.${linearProgressClasses.barColorPrimary}`]: {},
1266
+ + [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.bar}`]: {},
1267
+ - [`&.${linearProgressClasses.barColorSecondary}`]: {},
1268
+ + [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.bar}`]: {},
1269
+ - [`&.${linearProgressClasses.dashedColorPrimary}`]: {},
1270
+ + [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.dashed}`]: {},
1271
+ - [`&.${linearProgressClasses.dashedColorSecondary}`]: {},
1272
+ + [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.dashed}`]: {},
1273
+ },
1274
+ },
1275
+ }
1276
+ ```
1277
+
1278
+ CSS transforms:
1279
+
1280
+ ```diff
1281
+ -.MuiLinearProgress-bar1Buffer
1282
+ +.MuiLinearProgress-buffer > .MuiLinearProgress-bar1
1283
+ -.MuiLinearProgress-bar1Determinate
1284
+ +.MuiLinearProgress-determinate > .MuiLinearProgress-bar1
1285
+ -.MuiLinearProgress-bar1Indeterminate
1286
+ +.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1
1287
+ -.MuiLinearProgress-bar2Buffer
1288
+ +.MuiLinearProgress-buffer > .MuiLinearProgress-bar2
1289
+ -.MuiLinearProgress-bar2Indeterminate
1290
+ +.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2
1291
+ -.MuiLinearProgress-barColorPrimary
1292
+ +.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar
1293
+ -.MuiLinearProgress-barColorSecondary
1294
+ +.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar
1295
+ -.MuiLinearProgress-dashedColorPrimary
1296
+ +.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed
1297
+ -.MuiLinearProgress-dashedColorSecondary
1298
+ +.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed
1299
+ ```
1300
+
1301
+ ```bash
1302
+ npx @mui/codemod@latest deprecations/linear-progress-classes <path>
1303
+ ```
1304
+
1245
1305
  #### `modal-props`
1246
1306
 
1247
1307
  ```diff
@@ -1406,6 +1466,54 @@ npx @mui/codemod@latest deprecations/popper-props <path>
1406
1466
  npx @mui/codemod@latest deprecations/outlined-input-props <path>
1407
1467
  ```
1408
1468
 
1469
+ #### `select-classes`
1470
+
1471
+ JS transforms:
1472
+
1473
+ ```diff
1474
+ import { selectClasses } from '@mui/material/Select';
1475
+
1476
+ MuiSelect: {
1477
+ styleOverrides: {
1478
+ root: {
1479
+ - [`& .${selectClasses.iconFilled}`]: {
1480
+ + [`& .${selectClasses.filled} ~ .${selectClasses.icon}`]: {
1481
+ color: 'red',
1482
+ },
1483
+ - [`& .${selectClasses.iconOutlined}`]: {
1484
+ + [`& .${selectClasses.outlined} ~ .${selectClasses.icon}`]: {
1485
+ color: 'red',
1486
+ },
1487
+ - [`& .${selectClasses.iconStandard}`]: {
1488
+ + [`& .${selectClasses.standard} ~ .${selectClasses.icon}`]: {
1489
+ color: 'red',
1490
+ },
1491
+ },
1492
+ },
1493
+ },
1494
+ ```
1495
+
1496
+ CSS transforms:
1497
+
1498
+ ```diff
1499
+ - .MuiSelect-iconFilled
1500
+ + .MuiSelect-filled ~ .MuiSelect-icon
1501
+ ```
1502
+
1503
+ ```diff
1504
+ - .MuiSelect-iconOutlined
1505
+ + .MuiSelect-outlined ~ .MuiSelect-icon
1506
+ ```
1507
+
1508
+ ```diff
1509
+ - .MuiSelect-iconStandard
1510
+ + .MuiSelect-standard ~ .MuiSelect-icon
1511
+ ```
1512
+
1513
+ ```bash
1514
+ npx @mui/codemod@latest deprecations/select-classes <path>
1515
+ ```
1516
+
1409
1517
  #### `slider-props`
1410
1518
 
1411
1519
  ```diff
@@ -23,11 +23,13 @@ var _imageListItemBarClasses = _interopRequireDefault(require("../image-list-ite
23
23
  var _inputBaseProps = _interopRequireDefault(require("../input-base-props"));
24
24
  var _inputProps = _interopRequireDefault(require("../input-props"));
25
25
  var _listItemTextProps = _interopRequireDefault(require("../list-item-text-props"));
26
+ var _linearProgressClasses = _interopRequireDefault(require("../linear-progress-classes"));
26
27
  var _modalProps = _interopRequireDefault(require("../modal-props"));
27
28
  var _outlinedInputProps = _interopRequireDefault(require("../outlined-input-props"));
28
29
  var _paginationItemClasses = _interopRequireDefault(require("../pagination-item-classes"));
29
30
  var _speedDialProps = _interopRequireDefault(require("../speed-dial-props"));
30
31
  var _tableSortLabelClasses = _interopRequireDefault(require("../table-sort-label-classes"));
32
+ var _selectClasses = _interopRequireDefault(require("../select-classes"));
31
33
  var _stepConnectorClasses = _interopRequireDefault(require("../step-connector-classes"));
32
34
  var _stepContentProps = _interopRequireDefault(require("../step-content-props"));
33
35
  var _stepLabelProps = _interopRequireDefault(require("../step-label-props"));
@@ -36,6 +38,7 @@ var _tabClasses = _interopRequireDefault(require("../tab-classes"));
36
38
  var _toggleButtonGroupClasses = _interopRequireDefault(require("../toggle-button-group-classes"));
37
39
  var _tooltipProps = _interopRequireDefault(require("../tooltip-props"));
38
40
  var _tablePaginationProps = _interopRequireDefault(require("../table-pagination-props"));
41
+ var _cardHeaderProps = _interopRequireDefault(require("../card-header-props"));
39
42
  /**
40
43
  * @param {import('jscodeshift').FileInfo} file
41
44
  * @param {import('jscodeshift').API} api
@@ -59,6 +62,7 @@ function deprecationsAll(file, api, options) {
59
62
  file.source = (0, _inputBaseProps.default)(file, api, options);
60
63
  file.source = (0, _inputProps.default)(file, api, options);
61
64
  file.source = (0, _listItemTextProps.default)(file, api, options);
65
+ file.source = (0, _linearProgressClasses.default)(file, api, options);
62
66
  file.source = (0, _modalProps.default)(file, api, options);
63
67
  file.source = (0, _outlinedInputProps.default)(file, api, options);
64
68
  file.source = (0, _paginationItemClasses.default)(file, api, options);
@@ -68,9 +72,11 @@ function deprecationsAll(file, api, options) {
68
72
  file.source = (0, _stepLabelProps.default)(file, api, options);
69
73
  file.source = (0, _tableSortLabelClasses.default)(file, api, options);
70
74
  file.source = (0, _textFieldProps.default)(file, api, options);
75
+ file.source = (0, _selectClasses.default)(file, api, options);
71
76
  file.source = (0, _tabClasses.default)(file, api, options);
72
77
  file.source = (0, _toggleButtonGroupClasses.default)(file, api, options);
73
78
  file.source = (0, _tooltipProps.default)(file, api, options);
74
79
  file.source = (0, _tablePaginationProps.default)(file, api, options);
80
+ file.source = (0, _cardHeaderProps.default)(file, api, options);
75
81
  return file.source;
76
82
  }
@@ -27,12 +27,18 @@ const {
27
27
  const {
28
28
  plugin: circularProgressClassesPlugin
29
29
  } = require('../circular-progress-classes/postcss-plugin');
30
+ const {
31
+ plugin: linearProgressClassesPlugin
32
+ } = require('../linear-progress-classes/postcss-plugin');
30
33
  const {
31
34
  plugin: tabClassesPlugin
32
35
  } = require('../tab-classes/postcss-plugin');
33
36
  const {
34
37
  plugin: tableSortLabelClassesPlugin
35
38
  } = require('../table-sort-label-classes/postcss-plugin');
39
+ const {
40
+ plugin: selectClassesPlugin
41
+ } = require('../select-classes/postcss-plugin');
36
42
  module.exports = {
37
- plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin, tabClassesPlugin, tableSortLabelClassesPlugin]
43
+ plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, linearProgressClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin, tabClassesPlugin, tableSortLabelClassesPlugin, selectClassesPlugin]
38
44
  };
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = transformer;
8
+ var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
9
+ /**
10
+ * @param {import('jscodeshift').FileInfo} file
11
+ * @param {import('jscodeshift').API} api
12
+ */
13
+ function transformer(file, api, options) {
14
+ const j = api.jscodeshift;
15
+ const root = j(file.source);
16
+ const printOptions = options.printOptions;
17
+ (0, _movePropIntoSlotProps.default)(j, {
18
+ root,
19
+ componentName: 'CardHeader',
20
+ propName: 'titleTypographyProps',
21
+ slotName: 'title'
22
+ });
23
+ (0, _movePropIntoSlotProps.default)(j, {
24
+ root,
25
+ componentName: 'CardHeader',
26
+ propName: 'subheaderTypographyProps',
27
+ slotName: 'subheader'
28
+ });
29
+ return root.toSource(printOptions);
30
+ }
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _cardHeaderProps.default;
11
+ }
12
+ });
13
+ var _cardHeaderProps = _interopRequireDefault(require("./card-header-props"));
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _CardHeader = _interopRequireDefault(require("@mui/material/CardHeader"));
5
+ var _material = require("@mui/material");
6
+ var _jsxRuntime = require("react/jsx-runtime");
7
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
8
+ titleTypographyProps: {
9
+ variant: 'h6'
10
+ },
11
+ subheaderTypographyProps: {
12
+ variant: 'body2'
13
+ }
14
+ });
15
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
16
+ titleTypographyProps: {
17
+ variant: 'h6'
18
+ },
19
+ subheaderTypographyProps: {
20
+ variant: 'body2'
21
+ },
22
+ slotProps: {
23
+ title: {
24
+ variant: 'h1'
25
+ },
26
+ subheader: {
27
+ variant: 'h2'
28
+ }
29
+ }
30
+ });
31
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
32
+ titleTypographyProps: {
33
+ variant: 'h6'
34
+ },
35
+ subheaderTypographyProps: {
36
+ variant: 'body2'
37
+ },
38
+ slotProps: {
39
+ title: {
40
+ sx: {
41
+ color: 'red'
42
+ }
43
+ },
44
+ subheader: {
45
+ sx: {
46
+ color: 'red'
47
+ }
48
+ }
49
+ }
50
+ });
51
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardHeader, {
52
+ titleTypographyProps: {
53
+ variant: 'h6'
54
+ },
55
+ subheaderTypographyProps: {
56
+ variant: 'body2'
57
+ }
58
+ });
59
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomCardHeader, {
60
+ titleTypographyProps: {
61
+ variant: 'h6'
62
+ },
63
+ subheaderTypographyProps: {
64
+ variant: 'body2'
65
+ }
66
+ });
@@ -0,0 +1,78 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _CardHeader = _interopRequireDefault(require("@mui/material/CardHeader"));
5
+ var _material = require("@mui/material");
6
+ var _jsxRuntime = require("react/jsx-runtime");
7
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
8
+ slotProps: {
9
+ title: {
10
+ variant: 'h6'
11
+ },
12
+ subheader: {
13
+ variant: 'body2'
14
+ }
15
+ }
16
+ });
17
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
18
+ slotProps: {
19
+ title: {
20
+ ...{
21
+ variant: 'h6'
22
+ },
23
+ ...{
24
+ variant: 'h1'
25
+ }
26
+ },
27
+ subheader: {
28
+ ...{
29
+ variant: 'body2'
30
+ },
31
+ ...{
32
+ variant: 'h2'
33
+ }
34
+ }
35
+ }
36
+ });
37
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
38
+ slotProps: {
39
+ title: {
40
+ ...{
41
+ variant: 'h6'
42
+ },
43
+ ...{
44
+ sx: {
45
+ color: 'red'
46
+ }
47
+ }
48
+ },
49
+ subheader: {
50
+ ...{
51
+ variant: 'body2'
52
+ },
53
+ ...{
54
+ sx: {
55
+ color: 'red'
56
+ }
57
+ }
58
+ }
59
+ }
60
+ });
61
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardHeader, {
62
+ slotProps: {
63
+ title: {
64
+ variant: 'h6'
65
+ },
66
+ subheader: {
67
+ variant: 'body2'
68
+ }
69
+ }
70
+ });
71
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomCardHeader, {
72
+ titleTypographyProps: {
73
+ variant: 'h6'
74
+ },
75
+ subheaderTypographyProps: {
76
+ variant: 'body2'
77
+ }
78
+ });
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _linearProgressClasses.default;
11
+ }
12
+ });
13
+ var _linearProgressClasses = _interopRequireDefault(require("./linear-progress-classes"));
@@ -0,0 +1,77 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = transformer;
7
+ var _postcssPlugin = require("./postcss-plugin");
8
+ /**
9
+ * @param {import('jscodeshift').FileInfo} file
10
+ * @param {import('jscodeshift').API} api
11
+ */
12
+ function transformer(file, api, options) {
13
+ const j = api.jscodeshift;
14
+ const root = j(file.source);
15
+ const printOptions = options.printOptions;
16
+ _postcssPlugin.classes.forEach(({
17
+ deprecatedClass,
18
+ replacementSelector
19
+ }) => {
20
+ const replacementSelectorPrefix = '&';
21
+ root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/LinearProgress$/)).forEach(path => {
22
+ path.node.specifiers.forEach(specifier => {
23
+ if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'linearProgressClasses') {
24
+ const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');
25
+ root.find(j.MemberExpression, {
26
+ object: {
27
+ name: specifier.local.name
28
+ },
29
+ property: {
30
+ name: deprecatedAtomicClass
31
+ }
32
+ }).forEach(memberExpression => {
33
+ const parent = memberExpression.parentPath.parentPath.value;
34
+ if (parent.type === j.TemplateLiteral.name) {
35
+ const memberExpressionIndex = parent.expressions.findIndex(expression => expression === memberExpression.value);
36
+ const precedingTemplateElement = parent.quasis[memberExpressionIndex];
37
+ const atomicClasses = replacementSelector.replaceAll('MuiLinearProgress-', '').replaceAll(replacementSelectorPrefix, '').replaceAll(' > ', '').split('.').filter(Boolean);
38
+ if (precedingTemplateElement.value.raw.endsWith(deprecatedClass.startsWith(' ') ? `${replacementSelectorPrefix} .` : `${replacementSelectorPrefix}.`)) {
39
+ const atomicClassesArgs = [memberExpressionIndex, 1, ...atomicClasses.map(atomicClass => j.memberExpression(memberExpression.value.object, j.identifier(atomicClass)))];
40
+ parent.expressions.splice(...atomicClassesArgs);
41
+ if (replacementSelector.includes(' > ')) {
42
+ const quasisArgs = [memberExpressionIndex, 1, j.templateElement({
43
+ raw: precedingTemplateElement.value.raw.replace(' ', ''),
44
+ cooked: precedingTemplateElement.value.cooked.replace(' ', '')
45
+ }, false), j.templateElement({
46
+ raw: ' > .',
47
+ cooked: ' > .'
48
+ }, false)];
49
+ if (atomicClasses.length === 3) {
50
+ quasisArgs.splice(3, 0, j.templateElement({
51
+ raw: '.',
52
+ cooked: '.'
53
+ }, false));
54
+ }
55
+ parent.quasis.splice(...quasisArgs);
56
+ } else {
57
+ parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
58
+ raw: precedingTemplateElement.value.raw,
59
+ cooked: precedingTemplateElement.value.cooked
60
+ }, false), j.templateElement({
61
+ raw: '.',
62
+ cooked: '.'
63
+ }, false));
64
+ }
65
+ }
66
+ }
67
+ });
68
+ }
69
+ });
70
+ });
71
+ const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`);
72
+ root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
73
+ path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelectorPrefix}${replacementSelector}`)));
74
+ });
75
+ });
76
+ return root.toSource(printOptions);
77
+ }
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+
3
+ const classes = [{
4
+ deprecatedClass: ' .MuiLinearProgress-bar1Buffer',
5
+ replacementSelector: '.MuiLinearProgress-buffer > .MuiLinearProgress-bar1'
6
+ }, {
7
+ deprecatedClass: ' .MuiLinearProgress-bar1Determinate',
8
+ replacementSelector: '.MuiLinearProgress-determinate > .MuiLinearProgress-bar1'
9
+ }, {
10
+ deprecatedClass: ' .MuiLinearProgress-bar1Indeterminate',
11
+ replacementSelector: '.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1'
12
+ }, {
13
+ deprecatedClass: ' .MuiLinearProgress-bar2Buffer',
14
+ replacementSelector: '.MuiLinearProgress-buffer > .MuiLinearProgress-bar2'
15
+ }, {
16
+ deprecatedClass: ' .MuiLinearProgress-bar2Indeterminate',
17
+ replacementSelector: '.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2'
18
+ }, {
19
+ deprecatedClass: ' .MuiLinearProgress-barColorPrimary',
20
+ replacementSelector: '.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar'
21
+ }, {
22
+ deprecatedClass: ' .MuiLinearProgress-barColorSecondary',
23
+ replacementSelector: '.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar'
24
+ }, {
25
+ deprecatedClass: ' .MuiLinearProgress-dashedColorPrimary',
26
+ replacementSelector: '.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed'
27
+ }, {
28
+ deprecatedClass: ' .MuiLinearProgress-dashedColorSecondary',
29
+ replacementSelector: '.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed'
30
+ }];
31
+ const plugin = () => {
32
+ return {
33
+ postcssPlugin: `Replace deprecated LinearProgress classes with new classes`,
34
+ Rule(rule) {
35
+ const {
36
+ selector
37
+ } = rule;
38
+ classes.forEach(({
39
+ deprecatedClass,
40
+ replacementSelector
41
+ }) => {
42
+ const selectorRegex = new RegExp(`${deprecatedClass}`);
43
+ if (selector.match(selectorRegex)) {
44
+ rule.selector = selector.replace(selectorRegex, replacementSelector);
45
+ }
46
+ });
47
+ }
48
+ };
49
+ };
50
+ plugin.postcss = true;
51
+ module.exports = {
52
+ plugin,
53
+ classes
54
+ };
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ const {
4
+ plugin
5
+ } = require('./postcss-plugin');
6
+ module.exports = {
7
+ plugins: [plugin]
8
+ };
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ var _LinearProgress = require("@mui/material/LinearProgress");
4
+ '& .MuiLinearProgress-bar1Buffer';
5
+ '& .MuiLinearProgress-bar1Determinate';
6
+ '& .MuiLinearProgress-bar1Indeterminate';
7
+ '& .MuiLinearProgress-bar2Buffer';
8
+ '& .MuiLinearProgress-bar2Indeterminate';
9
+ '& .MuiLinearProgress-barColorPrimary';
10
+ '& .MuiLinearProgress-barColorSecondary';
11
+ '& .MuiLinearProgress-dashedColorPrimary';
12
+ '& .MuiLinearProgress-dashedColorSecondary';
13
+ `& .${_LinearProgress.linearProgressClasses.bar1Buffer}`;
14
+ `& .${_LinearProgress.linearProgressClasses.bar1Determinate}`;
15
+ `& .${_LinearProgress.linearProgressClasses.bar1Indeterminate}`;
16
+ `& .${_LinearProgress.linearProgressClasses.bar2Buffer}`;
17
+ `& .${_LinearProgress.linearProgressClasses.bar2Indeterminate}`;
18
+ `& .${_LinearProgress.linearProgressClasses.barColorPrimary}`;
19
+ `& .${_LinearProgress.linearProgressClasses.barColorSecondary}`;
20
+ `& .${_LinearProgress.linearProgressClasses.dashedColorPrimary}`;
21
+ `& .${_LinearProgress.linearProgressClasses.dashedColorSecondary}`;
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ var _LinearProgress = require("@mui/material/LinearProgress");
4
+ '&.MuiLinearProgress-buffer > .MuiLinearProgress-bar1';
5
+ '&.MuiLinearProgress-determinate > .MuiLinearProgress-bar1';
6
+ '&.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1';
7
+ '&.MuiLinearProgress-buffer > .MuiLinearProgress-bar2';
8
+ '&.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2';
9
+ '&.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar';
10
+ '&.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar';
11
+ '&.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed';
12
+ '&.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed';
13
+ `&.${_LinearProgress.linearProgressClasses.buffer} > .${_LinearProgress.linearProgressClasses.bar1}`;
14
+ `&.${_LinearProgress.linearProgressClasses.determinate} > .${_LinearProgress.linearProgressClasses.bar1}`;
15
+ `&.${_LinearProgress.linearProgressClasses.indeterminate} > .${_LinearProgress.linearProgressClasses.bar1}`;
16
+ `&.${_LinearProgress.linearProgressClasses.buffer} > .${_LinearProgress.linearProgressClasses.bar2}`;
17
+ `&.${_LinearProgress.linearProgressClasses.indeterminate} > .${_LinearProgress.linearProgressClasses.bar2}`;
18
+ `&.${_LinearProgress.linearProgressClasses.colorPrimary} > .${_LinearProgress.linearProgressClasses.bar}`;
19
+ `&.${_LinearProgress.linearProgressClasses.colorSecondary} > .${_LinearProgress.linearProgressClasses.bar}`;
20
+ `&.${_LinearProgress.linearProgressClasses.colorPrimary} > .${_LinearProgress.linearProgressClasses.dashed}`;
21
+ `&.${_LinearProgress.linearProgressClasses.colorSecondary} > .${_LinearProgress.linearProgressClasses.dashed}`;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _selectClasses.default;
11
+ }
12
+ });
13
+ var _selectClasses = _interopRequireDefault(require("./select-classes"));
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ const classes = [{
4
+ deprecatedClass: ' .MuiSelect-iconFilled',
5
+ replacementSelector: ' .MuiSelect-filled ~ .MuiSelect-icon'
6
+ }, {
7
+ deprecatedClass: ' .MuiSelect-iconOutlined',
8
+ replacementSelector: ' .MuiSelect-outlined ~ .MuiSelect-icon'
9
+ }, {
10
+ deprecatedClass: ' .MuiSelect-iconStandard',
11
+ replacementSelector: ' .MuiSelect-standard ~ .MuiSelect-icon'
12
+ }];
13
+ const plugin = () => {
14
+ return {
15
+ postcssPlugin: `Replace deprecated Select classes with new classes`,
16
+ Rule(rule) {
17
+ const {
18
+ selector
19
+ } = rule;
20
+ classes.forEach(({
21
+ deprecatedClass,
22
+ replacementSelector
23
+ }) => {
24
+ const selectorRegex = new RegExp(`${deprecatedClass.trim()}$`);
25
+ if (selector.match(selectorRegex)) {
26
+ rule.selector = selector.replace(selectorRegex, replacementSelector);
27
+ }
28
+ });
29
+ }
30
+ };
31
+ };
32
+ plugin.postcss = true;
33
+ module.exports = {
34
+ plugin,
35
+ classes
36
+ };
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ const {
4
+ plugin
5
+ } = require('./postcss-plugin');
6
+ module.exports = {
7
+ plugins: [plugin]
8
+ };
@@ -0,0 +1,77 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = transformer;
7
+ var _postcssPlugin = require("./postcss-plugin");
8
+ /**
9
+ * @param {import('jscodeshift').FileInfo} file
10
+ * @param {import('jscodeshift').API} api
11
+ */
12
+ function transformer(file, api, options) {
13
+ const j = api.jscodeshift;
14
+ const root = j(file.source);
15
+ const printOptions = options.printOptions;
16
+ _postcssPlugin.classes.forEach(({
17
+ deprecatedClass,
18
+ replacementSelector
19
+ }) => {
20
+ const replacementSelectorPrefix = '&';
21
+ root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/Select$/)).forEach(path => {
22
+ path.node.specifiers.forEach(specifier => {
23
+ if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'selectClasses') {
24
+ const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');
25
+ root.find(j.MemberExpression, {
26
+ object: {
27
+ name: specifier.local.name
28
+ },
29
+ property: {
30
+ name: deprecatedAtomicClass
31
+ }
32
+ }).forEach(memberExpression => {
33
+ const parent = memberExpression.parentPath.parentPath.value;
34
+ if (parent.type === j.TemplateLiteral.name) {
35
+ const memberExpressionIndex = parent.expressions.findIndex(expression => expression === memberExpression.value);
36
+ const precedingTemplateElement = parent.quasis[memberExpressionIndex];
37
+ const atomicClasses = replacementSelector.replaceAll('MuiSelect-', '').replaceAll(replacementSelectorPrefix, '').replaceAll(' ~ ', '').split('.').map(className => className.trim()).filter(Boolean);
38
+ if (precedingTemplateElement.value.raw.endsWith(deprecatedClass.startsWith(' ') ? `${replacementSelectorPrefix} .` : `${replacementSelectorPrefix}.`)) {
39
+ const atomicClassesArgs = [memberExpressionIndex, 1, ...atomicClasses.map(atomicClass => j.memberExpression(memberExpression.value.object, j.identifier(atomicClass)))];
40
+ parent.expressions.splice(...atomicClassesArgs);
41
+ if (replacementSelector.includes(' ~ ')) {
42
+ const quasisArgs = [memberExpressionIndex, 1, j.templateElement({
43
+ raw: precedingTemplateElement.value.raw,
44
+ cooked: precedingTemplateElement.value.cooked.replace(' ', '')
45
+ }, false), j.templateElement({
46
+ raw: ' ~ .',
47
+ cooked: ' ~ .'
48
+ }, false)];
49
+ if (atomicClasses.length === 3) {
50
+ quasisArgs.splice(3, 0, j.templateElement({
51
+ raw: '.',
52
+ cooked: '.'
53
+ }, false));
54
+ }
55
+ parent.quasis.splice(...quasisArgs);
56
+ } else {
57
+ parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
58
+ raw: precedingTemplateElement.value.raw,
59
+ cooked: precedingTemplateElement.value.cooked
60
+ }, false), j.templateElement({
61
+ raw: '.',
62
+ cooked: '.'
63
+ }, false));
64
+ }
65
+ }
66
+ }
67
+ });
68
+ }
69
+ });
70
+ });
71
+ const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}$`);
72
+ root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
73
+ path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelectorPrefix}${replacementSelector}`)));
74
+ });
75
+ });
76
+ return root.toSource(printOptions);
77
+ }
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ var _Select = require("@mui/material/Select");
4
+ '& .MuiSelect-iconFilled';
5
+ '& .MuiSelect-iconOutlined';
6
+ '& .MuiSelect-iconStandard';
7
+ `& .${_Select.selectClasses.iconFilled}`;
8
+ `& .${_Select.selectClasses.iconOutlined}`;
9
+ `& .${_Select.selectClasses.iconStandard}`;
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ var _Select = require("@mui/material/Select");
4
+ "& .MuiSelect-filled ~ .MuiSelect-icon";
5
+ "& .MuiSelect-outlined ~ .MuiSelect-icon";
6
+ "& .MuiSelect-standard ~ .MuiSelect-icon";
7
+ `& .${_Select.selectClasses.filled} ~ .${_Select.selectClasses.icon}`;
8
+ `& .${_Select.selectClasses.outlined} ~ .${_Select.selectClasses.icon}`;
9
+ `& .${_Select.selectClasses.standard} ~ .${_Select.selectClasses.icon}`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/codemod",
3
- "version": "6.3.0",
3
+ "version": "6.4.0",
4
4
  "bin": "./codemod.js",
5
5
  "private": false,
6
6
  "author": "MUI Team",
@@ -26,8 +26,8 @@
26
26
  "dependencies": {
27
27
  "@babel/core": "^7.26.0",
28
28
  "@babel/runtime": "^7.26.0",
29
- "@babel/traverse": "^7.26.4",
30
- "jscodeshift": "^17.1.1",
29
+ "@babel/traverse": "^7.26.5",
30
+ "jscodeshift": "^17.1.2",
31
31
  "jscodeshift-add-imports": "^1.0.11",
32
32
  "postcss": "^8.4.49",
33
33
  "postcss-cli": "^11.0.0",