@mui/codemod 5.11.11 → 5.11.12
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
|
@@ -62,6 +62,21 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
|
|
|
62
62
|
|
|
63
63
|
### v5.0.0
|
|
64
64
|
|
|
65
|
+
#### `rename-css-variables`
|
|
66
|
+
|
|
67
|
+
Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components.
|
|
68
|
+
|
|
69
|
+
```diff
|
|
70
|
+
- <List sx={{ py: 'var(--List-divider-gap)' }}>
|
|
71
|
+
+ <List sx={{ py: 'var(--ListDivider-gap)' }}>
|
|
72
|
+
- <Switch sx={{ '--Switch-track-width': '40px' }}>
|
|
73
|
+
+ <Switch sx={{ '--Switch-trackWidth': '40px' }}>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```sh
|
|
77
|
+
npx @mui/codemod v5.0.0/rename-css-variables <path>
|
|
78
|
+
```
|
|
79
|
+
|
|
65
80
|
#### `base-hook-imports`
|
|
66
81
|
|
|
67
82
|
Updates the sources of the imports of the MUI Base hooks to adapt to the new directories of the hooks.
|
package/codemod.js
CHANGED
|
File without changes
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = transformer;
|
|
7
|
+
const capitalize = str => {
|
|
8
|
+
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
9
|
+
};
|
|
10
|
+
const JoyComponents = ['Alert', 'AspectRatio', 'Autocomplete', 'AutocompleteListbox', 'AutocompleteOption', 'Avatar', 'AvatarGroup', 'Badge', 'Box', 'Breadcrumbs', 'Button', 'Card', 'CardContent', 'CardCover', 'CardOverflow', 'Checkbox', 'Chip', 'ChipDelete', 'CircularProgress', 'Container', 'CssBaseline', 'Divider', 'FormControl', 'FormHelperText', 'FormLabel', 'Grid', 'IconButton', 'Input', 'LinearProgress', 'Link', 'List', 'ListDivider', 'ListItem', 'ListItemButton', 'ListItemContent', 'ListItemDecorator', 'ListSubheader', 'Menu', 'MenuItem', 'MenuList', 'Modal', 'ModalClose', 'ModalDialog', 'Option', 'Radio', 'RadioGroup', 'ScopedCssBaseline', 'Select', 'Sheet', 'Slider', 'Stack', 'SvgIcon', 'Switch', 'Tab', 'Table', 'TabList', 'TabPanel', 'Tabs', 'Textarea', 'TextField', 'Tooltip', 'Typography'];
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @param {import('jscodeshift').FileInfo} file
|
|
14
|
+
*/
|
|
15
|
+
function transformer(file) {
|
|
16
|
+
return file.source
|
|
17
|
+
// from `--<Component>-<slot>-<property>` to `--<Component>-<slot><Property>`
|
|
18
|
+
.replace(/--([a-zA-Z]+)([-_])([a-zA-Z]+)-([a-zA-Z]+)/gm, (matched, capture1, capture2, capture3, capture4) => {
|
|
19
|
+
if (!JoyComponents.includes(capture1) && !['internal', 'unstable'].includes(capture1)) {
|
|
20
|
+
return matched;
|
|
21
|
+
}
|
|
22
|
+
// turn `--List-item-...` and `--List-divider-...` to `--ListItem-...` and `--ListDivider-...`
|
|
23
|
+
if (capture1 === 'List' && ['divider', 'item'].includes(capture3)) {
|
|
24
|
+
return `--${capture1}${capitalize(capture3)}-${capture4}`;
|
|
25
|
+
}
|
|
26
|
+
return `--${capture1}${capture2}${capture3}${capitalize(capture4)}`;
|
|
27
|
+
})
|
|
28
|
+
// from `--internal-...` to `--unstable_...`
|
|
29
|
+
.replace(/--internal-/gm, '--unstable_');
|
|
30
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
5
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
|
|
6
|
+
sx: {
|
|
7
|
+
py: 'var(--ListDivider-gap)'
|
|
8
|
+
}
|
|
9
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
|
|
10
|
+
sx: {
|
|
11
|
+
'--ListItem-minHeight': '20px'
|
|
12
|
+
}
|
|
13
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
|
|
14
|
+
sx: {
|
|
15
|
+
'--Input-decoratorChildHeight': '10px'
|
|
16
|
+
}
|
|
17
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
|
|
18
|
+
sx: {
|
|
19
|
+
'--Autocomplete-wrapperGap': '10px'
|
|
20
|
+
}
|
|
21
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Switch, {
|
|
22
|
+
sx: {
|
|
23
|
+
'--Switch-trackWidth': '40px'
|
|
24
|
+
}
|
|
25
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
26
|
+
sx: {
|
|
27
|
+
py: 'var(--internal-action-radius)'
|
|
28
|
+
}
|
|
29
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
30
|
+
sx: {
|
|
31
|
+
py: 'var(--unstable_action-radius)'
|
|
32
|
+
}
|
|
33
|
+
})]
|
|
34
|
+
});
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
5
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
|
|
6
|
+
sx: {
|
|
7
|
+
py: 'var(--ListDivider-gap)'
|
|
8
|
+
}
|
|
9
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
|
|
10
|
+
sx: {
|
|
11
|
+
'--ListItem-minHeight': '20px'
|
|
12
|
+
}
|
|
13
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
|
|
14
|
+
sx: {
|
|
15
|
+
'--Input-decoratorChildHeight': '10px'
|
|
16
|
+
}
|
|
17
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
|
|
18
|
+
sx: {
|
|
19
|
+
'--Autocomplete-wrapperGap': '10px'
|
|
20
|
+
}
|
|
21
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Switch, {
|
|
22
|
+
sx: {
|
|
23
|
+
'--Switch-trackWidth': '40px'
|
|
24
|
+
}
|
|
25
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
26
|
+
sx: {
|
|
27
|
+
py: 'var(--unstable_actionRadius)'
|
|
28
|
+
}
|
|
29
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
30
|
+
sx: {
|
|
31
|
+
py: 'var(--unstable_actionRadius)'
|
|
32
|
+
}
|
|
33
|
+
})]
|
|
34
|
+
});
|