@mui/codemod 6.0.0-alpha.9 → 6.0.0-beta.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.
Files changed (86) hide show
  1. package/README.md +423 -168
  2. package/codemod.js +0 -2
  3. package/node/deprecations/all/deprecations-all.js +34 -26
  4. package/node/deprecations/all/postcss.config.js +7 -1
  5. package/node/deprecations/autocomplete-props/autocomplete-props.js +0 -32
  6. package/node/deprecations/autocomplete-props/test-cases/actual.js +13 -35
  7. package/node/deprecations/autocomplete-props/test-cases/expected.js +13 -41
  8. package/node/deprecations/autocomplete-props/test-cases/theme.actual.js +0 -18
  9. package/node/deprecations/autocomplete-props/test-cases/theme.expected.js +0 -22
  10. package/node/deprecations/backdrop-props/backdrop-props.js +3 -5
  11. package/node/deprecations/backdrop-props/test-cases/actual.js +30 -14
  12. package/node/deprecations/backdrop-props/test-cases/expected.js +23 -13
  13. package/node/deprecations/backdrop-props/test-cases/theme.actual.js +32 -6
  14. package/node/deprecations/backdrop-props/test-cases/theme.expected.js +27 -5
  15. package/node/deprecations/filled-input-props/filled-input-props.js +22 -0
  16. package/node/deprecations/filled-input-props/index.js +13 -0
  17. package/node/deprecations/filled-input-props/test-cases/actual.js +60 -0
  18. package/node/deprecations/filled-input-props/test-cases/expected.js +52 -0
  19. package/node/deprecations/filled-input-props/test-cases/theme.actual.js +73 -0
  20. package/node/deprecations/filled-input-props/test-cases/theme.expected.js +65 -0
  21. package/node/deprecations/input-base-props/index.js +13 -0
  22. package/node/deprecations/input-base-props/input-base-props.js +22 -0
  23. package/node/deprecations/input-base-props/test-cases/actual.js +60 -0
  24. package/node/deprecations/input-base-props/test-cases/expected.js +52 -0
  25. package/node/deprecations/input-base-props/test-cases/theme.actual.js +73 -0
  26. package/node/deprecations/input-base-props/test-cases/theme.expected.js +65 -0
  27. package/node/deprecations/input-props/index.js +13 -0
  28. package/node/deprecations/input-props/input-props.js +22 -0
  29. package/node/deprecations/input-props/test-cases/actual.js +60 -0
  30. package/node/deprecations/input-props/test-cases/expected.js +52 -0
  31. package/node/deprecations/input-props/test-cases/theme.actual.js +73 -0
  32. package/node/deprecations/input-props/test-cases/theme.expected.js +65 -0
  33. package/node/deprecations/modal-props/index.js +13 -0
  34. package/node/deprecations/modal-props/modal-props.js +22 -0
  35. package/node/deprecations/modal-props/test-cases/actual.js +43 -0
  36. package/node/deprecations/modal-props/test-cases/expected.js +40 -0
  37. package/node/deprecations/modal-props/test-cases/theme.actual.js +56 -0
  38. package/node/deprecations/modal-props/test-cases/theme.expected.js +53 -0
  39. package/node/deprecations/outlined-input-props/index.js +13 -0
  40. package/node/deprecations/outlined-input-props/outlined-input-props.js +22 -0
  41. package/node/deprecations/outlined-input-props/test-cases/actual.js +60 -0
  42. package/node/deprecations/outlined-input-props/test-cases/expected.js +52 -0
  43. package/node/deprecations/outlined-input-props/test-cases/theme.actual.js +73 -0
  44. package/node/deprecations/outlined-input-props/test-cases/theme.expected.js +65 -0
  45. package/node/deprecations/step-label-props/step-label-props.js +0 -14
  46. package/node/deprecations/step-label-props/test-cases/actual.js +0 -23
  47. package/node/deprecations/step-label-props/test-cases/expected.js +0 -27
  48. package/node/deprecations/step-label-props/test-cases/theme.actual.js +0 -22
  49. package/node/deprecations/step-label-props/test-cases/theme.expected.js +0 -28
  50. package/node/deprecations/tab-classes/index.js +13 -0
  51. package/node/deprecations/tab-classes/postcss-plugin.js +30 -0
  52. package/node/deprecations/tab-classes/postcss.config.js +8 -0
  53. package/node/deprecations/tab-classes/tab-classes.js +53 -0
  54. package/node/deprecations/tab-classes/test-cases/actual.js +5 -0
  55. package/node/deprecations/tab-classes/test-cases/expected.js +5 -0
  56. package/node/deprecations/table-sort-label-classes/index.js +13 -0
  57. package/node/deprecations/table-sort-label-classes/postcss-plugin.js +33 -0
  58. package/node/deprecations/table-sort-label-classes/postcss.config.js +8 -0
  59. package/node/deprecations/table-sort-label-classes/table-sort-label-classes.js +77 -0
  60. package/node/deprecations/table-sort-label-classes/test-cases/actual.js +7 -0
  61. package/node/deprecations/table-sort-label-classes/test-cases/expected.js +7 -0
  62. package/node/util/migrateToVariants.js +91 -43
  63. package/node/v5.0.0/theme-spacing.test/large-actual.js +1 -1
  64. package/node/v5.0.0/theme-spacing.test/large-expected.js +1 -1
  65. package/node/v6.0.0/grid-v2-props/grid-v2-props.js +149 -0
  66. package/node/v6.0.0/grid-v2-props/index.js +13 -0
  67. package/node/v6.0.0/grid-v2-props/test-cases/actual.js +85 -0
  68. package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js +18 -0
  69. package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js +22 -0
  70. package/node/v6.0.0/grid-v2-props/test-cases/expected.js +97 -0
  71. package/node/v6.0.0/styled/test-cases/ConditionalStyled.expected.js +9 -22
  72. package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.actual.js +39 -0
  73. package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.expected.js +65 -0
  74. package/node/v6.0.0/styled/test-cases/LogicalStyled.actual.js +31 -1
  75. package/node/v6.0.0/styled/test-cases/LogicalStyled.expected.js +39 -1
  76. package/node/v6.0.0/styled/test-cases/NestedSpread.expected.js +11 -13
  77. package/node/v6.0.0/sx-prop/sx-v6.js +80 -30
  78. package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js +14 -0
  79. package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.expected.js +33 -16
  80. package/node/v6.0.0/sx-prop/test-cases/sx-dynamic.actual.js +21 -1
  81. package/node/v6.0.0/sx-prop/test-cases/sx-dynamic.expected.js +19 -1
  82. package/node/v6.0.0/sx-prop/test-cases/sx-line-break.actual.js +69 -0
  83. package/node/v6.0.0/sx-prop/test-cases/sx-line-break.expected.js +69 -0
  84. package/node/v6.0.0/sx-prop/test-cases/sx-value-callback.actual.js +102 -0
  85. package/node/v6.0.0/sx-prop/test-cases/sx-value-callback.expected.js +111 -0
  86. package/package.json +7 -7
@@ -18,27 +18,4 @@ var _jsxRuntime = require("react/jsx-runtime");
18
18
  componentsProps: {
19
19
  label: componentsLabelProps
20
20
  }
21
- });
22
- /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
23
- componentsProps: {
24
- label: componentsLabelProps
25
- },
26
- StepIconProps: StepIconProps
27
- });
28
- /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
29
- slots: {
30
- label: SlotsLabel
31
- },
32
- slotProps: {
33
- label: slotLabelProps
34
- },
35
- componentsProps: {
36
- label: componentsLabelProps
37
- },
38
- StepIconComponent: StepIconComponent,
39
- StepIconProps: StepIconProps
40
- });
41
- /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
42
- StepIconComponent: StepIconComponent,
43
- StepIconProps: StepIconProps
44
21
  });
@@ -18,31 +18,4 @@ var _jsxRuntime = require("react/jsx-runtime");
18
18
  ...slotLabelProps
19
19
  }
20
20
  }
21
- });
22
- /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
23
- slotProps: {
24
- label: componentsLabelProps,
25
- stepIcon: StepIconProps
26
- }
27
- });
28
- /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
29
- slots: {
30
- label: SlotsLabel,
31
- stepIcon: StepIconComponent
32
- },
33
- slotProps: {
34
- label: {
35
- ...componentsLabelProps,
36
- ...slotLabelProps
37
- },
38
- stepIcon: StepIconProps
39
- }
40
- });
41
- /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
42
- slots: {
43
- stepIcon: StepIconComponent
44
- },
45
- slotProps: {
46
- stepIcon: StepIconProps
47
- }
48
21
  });
@@ -20,26 +20,4 @@ fn({
20
20
  }
21
21
  }
22
22
  }
23
- });
24
- fn({
25
- MuiStepLabel: {
26
- defaultProps: {
27
- StepIconComponent: StepIconComponent,
28
- StepIconProps: StepIconProps
29
- }
30
- }
31
- });
32
- fn({
33
- MuiStepLabel: {
34
- defaultProps: {
35
- componentsProps: {
36
- label: componentsLabelProps
37
- },
38
- slotProps: {
39
- label: slotLabelProps
40
- },
41
- StepIconComponent: StepIconComponent,
42
- StepIconProps: StepIconProps
43
- }
44
- }
45
23
  });
@@ -20,32 +20,4 @@ fn({
20
20
  }
21
21
  }
22
22
  }
23
- });
24
- fn({
25
- MuiStepLabel: {
26
- defaultProps: {
27
- slots: {
28
- stepIcon: StepIconComponent
29
- },
30
- slotProps: {
31
- stepIcon: StepIconProps
32
- }
33
- }
34
- }
35
- });
36
- fn({
37
- MuiStepLabel: {
38
- defaultProps: {
39
- slotProps: {
40
- label: {
41
- ...componentsLabelProps,
42
- ...slotLabelProps
43
- },
44
- stepIcon: StepIconProps
45
- },
46
- slots: {
47
- stepIcon: StepIconComponent
48
- }
49
- }
50
- }
51
23
  });
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _tabClasses.default;
11
+ }
12
+ });
13
+ var _tabClasses = _interopRequireDefault(require("./tab-classes"));
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ const classes = [{
4
+ deprecatedClass: ' .MuiTab-iconWrapper',
5
+ replacementSelector: ' .MuiTab-icon'
6
+ }];
7
+ const plugin = () => {
8
+ return {
9
+ postcssPlugin: `Replace deprecated Tab classes with new classes`,
10
+ Rule(rule) {
11
+ const {
12
+ selector
13
+ } = rule;
14
+ classes.forEach(({
15
+ deprecatedClass,
16
+ replacementSelector
17
+ }) => {
18
+ const selectorRegex = new RegExp(`${deprecatedClass}$`);
19
+ if (selector.match(selectorRegex)) {
20
+ rule.selector = selector.replace(selectorRegex, replacementSelector);
21
+ }
22
+ });
23
+ }
24
+ };
25
+ };
26
+ plugin.postcss = true;
27
+ module.exports = {
28
+ plugin,
29
+ classes
30
+ };
@@ -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,53 @@
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\/Tab$/)).forEach(path => {
22
+ path.node.specifiers.forEach(specifier => {
23
+ if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tabClasses') {
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 = ['icon'];
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
+ }
42
+ }
43
+ });
44
+ }
45
+ });
46
+ });
47
+ const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}$`);
48
+ root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
49
+ path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelectorPrefix}${replacementSelector}`)));
50
+ });
51
+ });
52
+ return root.toSource(printOptions);
53
+ }
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ var _Tab = require("@mui/material/Tab");
4
+ '& .MuiTab-iconWrapper';
5
+ `& .${_Tab.tabClasses.iconWrapper}`;
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ var _Tab = require("@mui/material/Tab");
4
+ "& .MuiTab-icon";
5
+ `& .${_Tab.tabClasses.icon}`;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _tableSortLabelClasses.default;
11
+ }
12
+ });
13
+ var _tableSortLabelClasses = _interopRequireDefault(require("./table-sort-label-classes"));
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ const classes = [{
4
+ deprecatedClass: ' .MuiTableSortLabel-iconDirectionDesc',
5
+ replacementSelector: '.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon'
6
+ }, {
7
+ deprecatedClass: ' .MuiTableSortLabel-iconDirectionAsc',
8
+ replacementSelector: '.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon'
9
+ }];
10
+ const plugin = () => {
11
+ return {
12
+ postcssPlugin: `Replace deprecated TableSortLabel classes with new classes`,
13
+ Rule(rule) {
14
+ const {
15
+ selector
16
+ } = rule;
17
+ classes.forEach(({
18
+ deprecatedClass,
19
+ replacementSelector
20
+ }) => {
21
+ const selectorRegex = new RegExp(`${deprecatedClass}$`);
22
+ if (selector.match(selectorRegex)) {
23
+ rule.selector = selector.replace(selectorRegex, replacementSelector);
24
+ }
25
+ });
26
+ }
27
+ };
28
+ };
29
+ plugin.postcss = true;
30
+ module.exports = {
31
+ plugin,
32
+ classes
33
+ };
@@ -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\/TableSortLabel$/)).forEach(path => {
22
+ path.node.specifiers.forEach(specifier => {
23
+ if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tableSortLabelClasses') {
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('MuiTableSortLabel-', '').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,7 @@
1
+ "use strict";
2
+
3
+ var _TableSortLabel = require("@mui/material/TableSortLabel");
4
+ '& .MuiTableSortLabel-iconDirectionDesc';
5
+ '& .MuiTableSortLabel-iconDirectionAsc';
6
+ `& .${_TableSortLabel.tableSortLabelClasses.iconDirectionDesc}`;
7
+ `& .${_TableSortLabel.tableSortLabelClasses.iconDirectionAsc}`;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ var _TableSortLabel = require("@mui/material/TableSortLabel");
4
+ "&.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon";
5
+ "&.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon";
6
+ `&.${_TableSortLabel.tableSortLabelClasses.directionDesc} > .${_TableSortLabel.tableSortLabelClasses.icon}`;
7
+ `&.${_TableSortLabel.tableSortLabelClasses.directionAsc} > .${_TableSortLabel.tableSortLabelClasses.icon}`;
@@ -163,6 +163,11 @@ function migrateToVariants(j, styles) {
163
163
  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
164
164
  const objectToArrowFunction = getObjectToArrowFunction(j);
165
165
 
166
+ /**
167
+ * A map of used variable with its original name
168
+ */
169
+ const parameterMap = {};
170
+
166
171
  /**
167
172
  *
168
173
  * @param {import('jscodeshift').Identifier | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
@@ -199,6 +204,21 @@ function migrateToVariants(j, styles) {
199
204
  });
200
205
  return result;
201
206
  }
207
+ function resolveParamName(name) {
208
+ if (typeof name !== 'string') {
209
+ if (name.type === 'Identifier' && parameterMap[name.name]) {
210
+ if (parameterMap[name.name].includes('-')) {
211
+ return j.stringLiteral(parameterMap[name.name]);
212
+ }
213
+ return {
214
+ ...name,
215
+ name: parameterMap[name.name]
216
+ };
217
+ }
218
+ return name;
219
+ }
220
+ return parameterMap[name] || name;
221
+ }
202
222
 
203
223
  /**
204
224
  *
@@ -213,25 +233,25 @@ function migrateToVariants(j, styles) {
213
233
  };
214
234
  function assignProperties(_node) {
215
235
  if (_node.type === 'BinaryExpression') {
216
- variables.add(getObjectKey(_node.left).name);
236
+ variables.add(resolveParamName(getObjectKey(_node.left).name));
217
237
  if (_node.operator === '===') {
218
- properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
238
+ properties.push(j.objectProperty(resolveParamName(getIdentifierKey(_node.left)), _node.right));
219
239
  } else {
220
240
  isAllEqual = false;
221
241
  }
222
242
  }
223
243
  if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
224
244
  isAllEqual = false;
225
- variables.add(getObjectKey(_node).name);
245
+ variables.add(resolveParamName(getObjectKey(_node).name));
226
246
  }
227
247
  if (_node.type === 'UnaryExpression') {
228
248
  isAllEqual = false;
229
249
  if (_node.argument.type === 'UnaryExpression') {
230
250
  // handle `!!variable`
231
- variables.add(getObjectKey(_node.argument.argument).name);
251
+ variables.add(resolveParamName(getObjectKey(_node.argument.argument).name));
232
252
  } else {
233
253
  // handle `!variable`
234
- variables.add(getObjectKey(_node.argument).name);
254
+ variables.add(resolveParamName(getObjectKey(_node.argument).name));
235
255
  }
236
256
  }
237
257
  }
@@ -267,7 +287,7 @@ function migrateToVariants(j, styles) {
267
287
  const currentArrow = currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
268
288
  const variables = new Set();
269
289
  [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach(param => {
270
- variables.add(param.key.name);
290
+ variables.add(resolveParamName(param.key.name));
271
291
  });
272
292
  return buildArrowFunctionAST(variables, j.logicalExpression('&&', parentArrow.body, currentArrow.body));
273
293
  }
@@ -278,7 +298,24 @@ function migrateToVariants(j, styles) {
278
298
  style.params.forEach(param => {
279
299
  if (param.type === 'ObjectPattern') {
280
300
  param.properties.forEach(prop => {
281
- parameters.add(prop.key.name);
301
+ if (prop.type === 'ObjectProperty') {
302
+ let paramName;
303
+ if (prop.value.type === 'Identifier') {
304
+ paramName = prop.value.name;
305
+ }
306
+ if (prop.value.type === 'AssignmentPattern') {
307
+ paramName = prop.value.left.name;
308
+ }
309
+ if (paramName) {
310
+ parameters.add(paramName);
311
+ if (prop.key.type === 'Identifier') {
312
+ parameterMap[paramName] = prop.key.name;
313
+ }
314
+ if (prop.key.type === 'StringLiteral') {
315
+ parameterMap[paramName] = prop.key.value;
316
+ }
317
+ }
318
+ }
282
319
  });
283
320
  }
284
321
  if (param.type === 'Identifier') {
@@ -294,25 +331,32 @@ function migrateToVariants(j, styles) {
294
331
  } else if (style.body.type === 'ConditionalExpression') {
295
332
  // skip ConditionalExpression
296
333
  } else {
297
- let objectExpression = style.body;
298
- let counter = 0;
299
- while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
300
- counter += 1;
301
- if (objectExpression.type === 'BlockStatement') {
302
- objectExpression = objectExpression.body.find(item => item.type === 'ReturnStatement').argument;
303
- }
334
+ const expressions = [];
335
+ if (style.body.type === 'ArrayExpression') {
336
+ expressions.push(...style.body.elements);
337
+ } else {
338
+ expressions.push(style.body);
304
339
  }
305
- recurseObjectExpression({
306
- node: objectExpression,
307
- buildStyle: createBuildStyle()
340
+ expressions.forEach(objectExpression => {
341
+ let counter = 0;
342
+ while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
343
+ counter += 1;
344
+ if (objectExpression.type === 'BlockStatement') {
345
+ objectExpression = objectExpression.body.find(item => item.type === 'ReturnStatement').argument;
346
+ }
347
+ }
348
+ recurseObjectExpression({
349
+ node: objectExpression,
350
+ buildStyle: createBuildStyle()
351
+ });
352
+ if (variants.length && objectExpression.type === 'ObjectExpression') {
353
+ objectExpression.properties.push(j.objectProperty(j.identifier('variants'), j.arrayExpression(variants.filter(variant => {
354
+ const props = variant.properties.find(prop => prop.key.name === 'props');
355
+ const styleVal = variant.properties.find(prop => prop.key.name === 'style');
356
+ return props && styleVal && (!styleVal.value.properties || styleVal.value.properties.length > 0) && (props.value.type === 'ArrowFunctionExpression' || props.value.properties.length > 0);
357
+ }))));
358
+ }
308
359
  });
309
- if (variants.length) {
310
- objectExpression.properties.push(j.objectProperty(j.identifier('variants'), j.arrayExpression(variants.filter(variant => {
311
- const props = variant.properties.find(prop => prop.key.name === 'props');
312
- const styleVal = variant.properties.find(prop => prop.key.name === 'style');
313
- return props && styleVal && (!styleVal.value.properties || styleVal.value.properties.length > 0) && (props.value.type === 'ArrowFunctionExpression' || props.value.properties.length > 0);
314
- }))));
315
- }
316
360
  }
317
361
  function recurseObjectExpression(data) {
318
362
  if (data.node.type === 'ObjectExpression') {
@@ -440,7 +484,6 @@ function migrateToVariants(j, styles) {
440
484
  leftName = (_getObjectKey5 = getObjectKey(data.node.test.argument)) == null ? void 0 : _getObjectKey5.name;
441
485
  }
442
486
  if (parameters.has(leftName) && leftName !== 'theme') {
443
- var _data$parentNode;
444
487
  let props = buildProps(data.node.test);
445
488
  if (data.props) {
446
489
  props = mergeProps(data.props, props);
@@ -451,32 +494,37 @@ function migrateToVariants(j, styles) {
451
494
  style: styleVal
452
495
  };
453
496
  variants.push(buildObjectAST(variant));
454
-
455
- // create another variant with inverted condition
456
- let props2 = buildProps(inverseBinaryExpression(data.node.test));
457
- if (data.props) {
458
- props2 = mergeProps(data.props, props2);
459
- }
460
- const styleVal2 = data.buildStyle(data.node.alternate);
461
- const variant2 = {
462
- props: props2,
463
- style: styleVal2
464
- };
465
- variants.push(buildObjectAST(variant2));
466
- if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression') {
467
- removeProperty(data.parentNode, data.node);
497
+ if (data.node.consequent.type === 'ObjectExpression' && data.node.alternate.type === 'ObjectExpression') {
498
+ var _data$parentNode;
499
+ // create another variant with inverted condition
500
+ let props2 = buildProps(inverseBinaryExpression(data.node.test));
501
+ if (data.props) {
502
+ props2 = mergeProps(data.props, props2);
503
+ }
504
+ const styleVal2 = data.buildStyle(data.node.alternate);
505
+ const variant2 = {
506
+ props: props2,
507
+ style: styleVal2
508
+ };
509
+ variants.push(buildObjectAST(variant2));
510
+ if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression') {
511
+ removeProperty(data.parentNode, data.node);
512
+ }
513
+ } else {
514
+ var _data$replaceValue;
515
+ (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, data.node.alternate);
468
516
  }
469
517
  }
470
518
  if (leftName === 'theme' && ((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression' && ((_data$node$test = data.node.test) == null ? void 0 : _data$node$test.type) === 'BinaryExpression' && isThemePaletteMode(data.node.test.left)) {
471
519
  if (data.node.consequent.type !== 'ObjectExpression' && data.node.alternate.type !== 'ObjectExpression') {
472
- var _data$replaceValue;
520
+ var _data$replaceValue2;
473
521
  if (data.modeStyles) {
474
522
  if (!data.modeStyles[data.node.test.right.value]) {
475
523
  data.modeStyles[data.node.test.right.value] = [];
476
524
  }
477
525
  data.modeStyles[data.node.test.right.value].push(j.objectProperty(data.key, data.node.consequent));
478
526
  }
479
- (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, data.node.alternate);
527
+ (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, data.node.alternate);
480
528
  }
481
529
  }
482
530
  }
@@ -512,10 +560,10 @@ function migrateToVariants(j, styles) {
512
560
  data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
513
561
  });
514
562
  if (data.key) {
515
- var _data$replaceValue2;
563
+ var _data$replaceValue3;
516
564
  // to remove the arrow function
517
565
  // { ...: theme => `1px solid...` } to { ...: `1px solid...` }
518
- (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, data.node);
566
+ (_data$replaceValue3 = data.replaceValue) == null || _data$replaceValue3.call(data, data.node);
519
567
  }
520
568
  }
521
569
  }
@@ -24,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
24
24
  var _styles = require("@mui/material/styles");
25
25
  var _config = require("docs/config");
26
26
  var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
27
- var _i18n = require("docs/src/modules/utils/i18n");
27
+ var _i18n = require("@mui/docs/i18n");
28
28
  var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
29
29
  var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
30
30
  var _jsxRuntime = require("react/jsx-runtime");
@@ -24,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
24
24
  var _styles = require("@mui/material/styles");
25
25
  var _config = require("docs/config");
26
26
  var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
27
- var _i18n = require("docs/src/modules/utils/i18n");
27
+ var _i18n = require("@mui/docs/i18n");
28
28
  var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
29
29
  var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
30
30
  var _jsxRuntime = require("react/jsx-runtime");