@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.
- package/README.md +423 -168
- package/codemod.js +0 -2
- package/node/deprecations/all/deprecations-all.js +34 -26
- package/node/deprecations/all/postcss.config.js +7 -1
- package/node/deprecations/autocomplete-props/autocomplete-props.js +0 -32
- package/node/deprecations/autocomplete-props/test-cases/actual.js +13 -35
- package/node/deprecations/autocomplete-props/test-cases/expected.js +13 -41
- package/node/deprecations/autocomplete-props/test-cases/theme.actual.js +0 -18
- package/node/deprecations/autocomplete-props/test-cases/theme.expected.js +0 -22
- package/node/deprecations/backdrop-props/backdrop-props.js +3 -5
- package/node/deprecations/backdrop-props/test-cases/actual.js +30 -14
- package/node/deprecations/backdrop-props/test-cases/expected.js +23 -13
- package/node/deprecations/backdrop-props/test-cases/theme.actual.js +32 -6
- package/node/deprecations/backdrop-props/test-cases/theme.expected.js +27 -5
- package/node/deprecations/filled-input-props/filled-input-props.js +22 -0
- package/node/deprecations/filled-input-props/index.js +13 -0
- package/node/deprecations/filled-input-props/test-cases/actual.js +60 -0
- package/node/deprecations/filled-input-props/test-cases/expected.js +52 -0
- package/node/deprecations/filled-input-props/test-cases/theme.actual.js +73 -0
- package/node/deprecations/filled-input-props/test-cases/theme.expected.js +65 -0
- package/node/deprecations/input-base-props/index.js +13 -0
- package/node/deprecations/input-base-props/input-base-props.js +22 -0
- package/node/deprecations/input-base-props/test-cases/actual.js +60 -0
- package/node/deprecations/input-base-props/test-cases/expected.js +52 -0
- package/node/deprecations/input-base-props/test-cases/theme.actual.js +73 -0
- package/node/deprecations/input-base-props/test-cases/theme.expected.js +65 -0
- package/node/deprecations/input-props/index.js +13 -0
- package/node/deprecations/input-props/input-props.js +22 -0
- package/node/deprecations/input-props/test-cases/actual.js +60 -0
- package/node/deprecations/input-props/test-cases/expected.js +52 -0
- package/node/deprecations/input-props/test-cases/theme.actual.js +73 -0
- package/node/deprecations/input-props/test-cases/theme.expected.js +65 -0
- package/node/deprecations/modal-props/index.js +13 -0
- package/node/deprecations/modal-props/modal-props.js +22 -0
- package/node/deprecations/modal-props/test-cases/actual.js +43 -0
- package/node/deprecations/modal-props/test-cases/expected.js +40 -0
- package/node/deprecations/modal-props/test-cases/theme.actual.js +56 -0
- package/node/deprecations/modal-props/test-cases/theme.expected.js +53 -0
- package/node/deprecations/outlined-input-props/index.js +13 -0
- package/node/deprecations/outlined-input-props/outlined-input-props.js +22 -0
- package/node/deprecations/outlined-input-props/test-cases/actual.js +60 -0
- package/node/deprecations/outlined-input-props/test-cases/expected.js +52 -0
- package/node/deprecations/outlined-input-props/test-cases/theme.actual.js +73 -0
- package/node/deprecations/outlined-input-props/test-cases/theme.expected.js +65 -0
- package/node/deprecations/step-label-props/step-label-props.js +0 -14
- package/node/deprecations/step-label-props/test-cases/actual.js +0 -23
- package/node/deprecations/step-label-props/test-cases/expected.js +0 -27
- package/node/deprecations/step-label-props/test-cases/theme.actual.js +0 -22
- package/node/deprecations/step-label-props/test-cases/theme.expected.js +0 -28
- package/node/deprecations/tab-classes/index.js +13 -0
- package/node/deprecations/tab-classes/postcss-plugin.js +30 -0
- package/node/deprecations/tab-classes/postcss.config.js +8 -0
- package/node/deprecations/tab-classes/tab-classes.js +53 -0
- package/node/deprecations/tab-classes/test-cases/actual.js +5 -0
- package/node/deprecations/tab-classes/test-cases/expected.js +5 -0
- package/node/deprecations/table-sort-label-classes/index.js +13 -0
- package/node/deprecations/table-sort-label-classes/postcss-plugin.js +33 -0
- package/node/deprecations/table-sort-label-classes/postcss.config.js +8 -0
- package/node/deprecations/table-sort-label-classes/table-sort-label-classes.js +77 -0
- package/node/deprecations/table-sort-label-classes/test-cases/actual.js +7 -0
- package/node/deprecations/table-sort-label-classes/test-cases/expected.js +7 -0
- package/node/util/migrateToVariants.js +91 -43
- package/node/v5.0.0/theme-spacing.test/large-actual.js +1 -1
- package/node/v5.0.0/theme-spacing.test/large-expected.js +1 -1
- package/node/v6.0.0/grid-v2-props/grid-v2-props.js +149 -0
- package/node/v6.0.0/grid-v2-props/index.js +13 -0
- package/node/v6.0.0/grid-v2-props/test-cases/actual.js +85 -0
- package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js +18 -0
- package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js +22 -0
- package/node/v6.0.0/grid-v2-props/test-cases/expected.js +97 -0
- package/node/v6.0.0/styled/test-cases/ConditionalStyled.expected.js +9 -22
- package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.actual.js +39 -0
- package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.expected.js +65 -0
- package/node/v6.0.0/styled/test-cases/LogicalStyled.actual.js +31 -1
- package/node/v6.0.0/styled/test-cases/LogicalStyled.expected.js +39 -1
- package/node/v6.0.0/styled/test-cases/NestedSpread.expected.js +11 -13
- package/node/v6.0.0/sx-prop/sx-v6.js +80 -30
- package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js +14 -0
- package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.expected.js +33 -16
- package/node/v6.0.0/sx-prop/test-cases/sx-dynamic.actual.js +21 -1
- package/node/v6.0.0/sx-prop/test-cases/sx-dynamic.expected.js +19 -1
- package/node/v6.0.0/sx-prop/test-cases/sx-line-break.actual.js +69 -0
- package/node/v6.0.0/sx-prop/test-cases/sx-line-break.expected.js +69 -0
- package/node/v6.0.0/sx-prop/test-cases/sx-value-callback.actual.js +102 -0
- package/node/v6.0.0/sx-prop/test-cases/sx-value-callback.expected.js +111 -0
- 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,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,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,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
|
-
|
|
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
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
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
|
-
|
|
306
|
-
|
|
307
|
-
|
|
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
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
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$
|
|
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$
|
|
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$
|
|
563
|
+
var _data$replaceValue3;
|
|
516
564
|
// to remove the arrow function
|
|
517
565
|
// { ...: theme => `1px solid...` } to { ...: `1px solid...` }
|
|
518
|
-
(_data$
|
|
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/
|
|
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/
|
|
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");
|