@mui/codemod 6.0.0-beta.0 → 6.0.0-beta.1
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/node/v6.0.0/sx-prop/sx-v6.js +33 -11
- package/node/v6.0.0/sx-prop/test-cases/sx-applyStyles.actual.js +89 -0
- package/node/v6.0.0/sx-prop/test-cases/sx-applyStyles.expected.js +82 -0
- package/node/v6.0.0/sx-prop/test-cases/sx-condition.actual.js +93 -0
- package/node/v6.0.0/sx-prop/test-cases/sx-condition.expected.js +90 -0
- package/package.json +4 -4
|
@@ -270,15 +270,37 @@ function sxV6(file, api, options) {
|
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
if (data.node.argument.type === 'ConditionalExpression') {
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
273
|
+
const isSxSpread = data.node.argument.consequent.type === 'Identifier' && data.node.argument.consequent.name === 'sx' || data.node.argument.alternate.type === 'Identifier' && data.node.argument.alternate.name === 'sx';
|
|
274
|
+
if (!isSxSpread) {
|
|
275
|
+
recurseObjectExpression({
|
|
276
|
+
...data,
|
|
277
|
+
node: data.node.argument,
|
|
278
|
+
parentNode: data.node
|
|
279
|
+
});
|
|
280
|
+
wrapSxInArray(data.node.argument);
|
|
281
|
+
if (data.deleteSelf) {
|
|
282
|
+
data.deleteSelf();
|
|
283
|
+
} else {
|
|
284
|
+
(0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
if (data.node.argument.type === 'CallExpression') {
|
|
289
|
+
var _getObjectKey7, _data$node$argument$c;
|
|
290
|
+
if (((_getObjectKey7 = (0, _migrateToVariants.getObjectKey)(data.node.argument.callee)) == null ? void 0 : _getObjectKey7.name) === 'theme' && (_data$node$argument$c = data.node.argument.callee.property) != null && (_data$node$argument$c = _data$node$argument$c.name) != null && _data$node$argument$c.startsWith('apply')) {
|
|
291
|
+
const objIndex = data.node.argument.arguments.findIndex(arg => arg.type === 'ObjectExpression');
|
|
292
|
+
recurseObjectExpression({
|
|
293
|
+
...data,
|
|
294
|
+
node: data.node.argument.arguments[objIndex],
|
|
295
|
+
buildStyle: styleExpression => {
|
|
296
|
+
const newArguments = [...data.node.argument.arguments];
|
|
297
|
+
newArguments[objIndex] = styleExpression;
|
|
298
|
+
return j.arrowFunctionExpression([j.identifier('theme')], {
|
|
299
|
+
...data.node.argument,
|
|
300
|
+
arguments: newArguments
|
|
301
|
+
});
|
|
302
|
+
}
|
|
303
|
+
});
|
|
282
304
|
}
|
|
283
305
|
}
|
|
284
306
|
}
|
|
@@ -368,8 +390,8 @@ function sxV6(file, api, options) {
|
|
|
368
390
|
}
|
|
369
391
|
}
|
|
370
392
|
if ((_data$node$expression = data.node.expressions) != null && _data$node$expression.some(expression => {
|
|
371
|
-
var
|
|
372
|
-
return ((
|
|
393
|
+
var _getObjectKey8, _getObjectKey9;
|
|
394
|
+
return ((_getObjectKey8 = (0, _migrateToVariants.getObjectKey)(expression)) == null ? void 0 : _getObjectKey8.name) === 'theme' || expression.type === 'CallExpression' && ((_getObjectKey9 = (0, _migrateToVariants.getObjectKey)(expression.callee)) == null ? void 0 : _getObjectKey9.name) === 'theme';
|
|
373
395
|
})) {
|
|
374
396
|
rootThemeCallback(data);
|
|
375
397
|
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
|
|
5
|
+
component: "span",
|
|
6
|
+
ref: ref,
|
|
7
|
+
...props,
|
|
8
|
+
disabled: Boolean(disabled),
|
|
9
|
+
onClick: event => {
|
|
10
|
+
if (ref.current) {
|
|
11
|
+
ref.current.scrollIntoView({
|
|
12
|
+
block: 'nearest'
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
if (props.onClick) {
|
|
16
|
+
props.onClick(event);
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
onFocusVisible: event => {
|
|
20
|
+
if (ref.current) {
|
|
21
|
+
ref.current.scrollIntoView({
|
|
22
|
+
block: 'nearest'
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
if (props.onFocusVisible) {
|
|
26
|
+
props.onFocusVisible(event);
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
sx: [theme => ({
|
|
30
|
+
justifyContent: 'flex-start',
|
|
31
|
+
textAlign: 'left',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
borderRadius: 1,
|
|
34
|
+
height: '100%',
|
|
35
|
+
border: '1px solid transparent',
|
|
36
|
+
transitionProperty: 'all',
|
|
37
|
+
transitionDuration: '150ms',
|
|
38
|
+
// color: 'primary.300',
|
|
39
|
+
overflow: 'auto',
|
|
40
|
+
...((!disableBorder || selected) && {
|
|
41
|
+
borderColor: 'grey.100'
|
|
42
|
+
}),
|
|
43
|
+
...(selected && {
|
|
44
|
+
bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
|
|
45
|
+
borderColor: 'primary.300',
|
|
46
|
+
boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
|
|
47
|
+
// color: 'primary.500',
|
|
48
|
+
}),
|
|
49
|
+
...(!selected && {
|
|
50
|
+
'&:hover, &:focus': {
|
|
51
|
+
bgcolor: 'primary.50',
|
|
52
|
+
borderColor: 'primary.100',
|
|
53
|
+
'@media (hover: none)': {
|
|
54
|
+
bgcolor: 'transparent'
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}),
|
|
58
|
+
...theme.applyDarkStyles({
|
|
59
|
+
color: 'primary.800',
|
|
60
|
+
...((!disableBorder || selected) && {
|
|
61
|
+
borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
|
|
62
|
+
}),
|
|
63
|
+
...(!selected && {
|
|
64
|
+
'&:hover, &:focus': {
|
|
65
|
+
bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
|
|
66
|
+
borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
|
|
67
|
+
'@media (hover: none)': {
|
|
68
|
+
bgcolor: 'transparent'
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}),
|
|
72
|
+
...(selected && {
|
|
73
|
+
bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
|
|
74
|
+
borderColor: 'primary.700',
|
|
75
|
+
// color: 'primary.300',
|
|
76
|
+
boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
|
|
77
|
+
})
|
|
78
|
+
}),
|
|
79
|
+
...theme.applyStyles('light', {
|
|
80
|
+
color: 'primary.500',
|
|
81
|
+
...((!disableBorder || selected) && {
|
|
82
|
+
borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
|
|
83
|
+
})
|
|
84
|
+
}),
|
|
85
|
+
'&.Mui-disabled': {
|
|
86
|
+
opacity: 0.4
|
|
87
|
+
}
|
|
88
|
+
}), ...(Array.isArray(sx) ? sx : [sx])]
|
|
89
|
+
});
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
|
|
5
|
+
component: "span",
|
|
6
|
+
ref: ref,
|
|
7
|
+
...props,
|
|
8
|
+
disabled: Boolean(disabled),
|
|
9
|
+
onClick: event => {
|
|
10
|
+
if (ref.current) {
|
|
11
|
+
ref.current.scrollIntoView({
|
|
12
|
+
block: 'nearest'
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
if (props.onClick) {
|
|
16
|
+
props.onClick(event);
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
onFocusVisible: event => {
|
|
20
|
+
if (ref.current) {
|
|
21
|
+
ref.current.scrollIntoView({
|
|
22
|
+
block: 'nearest'
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
if (props.onFocusVisible) {
|
|
26
|
+
props.onFocusVisible(event);
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
sx: [theme => ({
|
|
30
|
+
justifyContent: 'flex-start',
|
|
31
|
+
textAlign: 'left',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
borderRadius: 1,
|
|
34
|
+
height: '100%',
|
|
35
|
+
border: '1px solid transparent',
|
|
36
|
+
transitionProperty: 'all',
|
|
37
|
+
transitionDuration: '150ms',
|
|
38
|
+
// color: 'primary.300',
|
|
39
|
+
overflow: 'auto',
|
|
40
|
+
...theme.applyDarkStyles({
|
|
41
|
+
color: 'primary.800'
|
|
42
|
+
}),
|
|
43
|
+
...theme.applyStyles('light', {
|
|
44
|
+
color: 'primary.500'
|
|
45
|
+
}),
|
|
46
|
+
'&.Mui-disabled': {
|
|
47
|
+
opacity: 0.4
|
|
48
|
+
}
|
|
49
|
+
}), (!disableBorder || selected) && {
|
|
50
|
+
borderColor: 'grey.100'
|
|
51
|
+
}, selected && (theme => ({
|
|
52
|
+
bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
|
|
53
|
+
borderColor: 'primary.300',
|
|
54
|
+
// color: 'primary.500',
|
|
55
|
+
boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
|
|
56
|
+
})), !selected && {
|
|
57
|
+
'&:hover, &:focus': {
|
|
58
|
+
bgcolor: 'primary.50',
|
|
59
|
+
borderColor: 'primary.100',
|
|
60
|
+
'@media (hover: none)': {
|
|
61
|
+
bgcolor: 'transparent'
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}, (!disableBorder || selected) && (theme => theme.applyDarkStyles({
|
|
65
|
+
borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
|
|
66
|
+
})), !selected && (theme => theme.applyDarkStyles({
|
|
67
|
+
'&:hover, &:focus': {
|
|
68
|
+
bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
|
|
69
|
+
borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
|
|
70
|
+
'@media (hover: none)': {
|
|
71
|
+
bgcolor: 'transparent'
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
})), selected && (theme => theme.applyDarkStyles({
|
|
75
|
+
bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
|
|
76
|
+
borderColor: 'primary.700',
|
|
77
|
+
// color: 'primary.300',
|
|
78
|
+
boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
|
|
79
|
+
})), (!disableBorder || selected) && (theme => theme.applyStyles('light', {
|
|
80
|
+
borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
|
|
81
|
+
})), ...(Array.isArray(sx) ? sx : [sx])]
|
|
82
|
+
});
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
var _react = require("react");
|
|
5
|
+
var _it$images$, _productOffer$ui, _productOffer$ui2;
|
|
6
|
+
/*#__PURE__*/(0, _react.createElement)(Card, {
|
|
7
|
+
...otherProps,
|
|
8
|
+
ref: ref,
|
|
9
|
+
key: it.wcId,
|
|
10
|
+
"data-p": it.performance / 100,
|
|
11
|
+
variant: "outlined",
|
|
12
|
+
sx: {
|
|
13
|
+
gap: '0.25rem',
|
|
14
|
+
textDecoration: 'none',
|
|
15
|
+
borderRadius: 0.75,
|
|
16
|
+
background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
|
|
17
|
+
transition: 'all 200ms ease-in-out',
|
|
18
|
+
...(horizontal ? {
|
|
19
|
+
display: 'flex',
|
|
20
|
+
flexDirection: 'row',
|
|
21
|
+
pr: 1
|
|
22
|
+
} : {
|
|
23
|
+
display: 'flex',
|
|
24
|
+
flexDirection: 'column',
|
|
25
|
+
pb: 0.5
|
|
26
|
+
}),
|
|
27
|
+
cursor: 'pointer',
|
|
28
|
+
'&:hover': {
|
|
29
|
+
borderColor: '#99CCFF',
|
|
30
|
+
boxShadow: '0px 4px 16px #DAE2ED',
|
|
31
|
+
transition: 'all 200ms ease-in-out !important'
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
onClick: ev => {
|
|
35
|
+
ev.preventDefault();
|
|
36
|
+
navigate(href);
|
|
37
|
+
}
|
|
38
|
+
}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
|
|
39
|
+
component: Link,
|
|
40
|
+
to: href,
|
|
41
|
+
sx: {
|
|
42
|
+
position: 'relative',
|
|
43
|
+
aspectRatio: '100/55',
|
|
44
|
+
...(horizontal ? {
|
|
45
|
+
maxWidth: '50vw',
|
|
46
|
+
height: {
|
|
47
|
+
sm: '150px',
|
|
48
|
+
md: '170px',
|
|
49
|
+
lg: '210px',
|
|
50
|
+
xl: '250px'
|
|
51
|
+
}
|
|
52
|
+
} : {
|
|
53
|
+
width: '100%'
|
|
54
|
+
})
|
|
55
|
+
},
|
|
56
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
|
|
57
|
+
sizes: imageSizes,
|
|
58
|
+
loading: imageLoading,
|
|
59
|
+
src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
|
|
60
|
+
alt: it.name,
|
|
61
|
+
style: {
|
|
62
|
+
aspectRatio: '100/55',
|
|
63
|
+
...(horizontal ? {
|
|
64
|
+
width: 'auto',
|
|
65
|
+
height: '100%'
|
|
66
|
+
} : {
|
|
67
|
+
width: '100%',
|
|
68
|
+
height: 'auto'
|
|
69
|
+
})
|
|
70
|
+
}
|
|
71
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
|
|
72
|
+
children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
|
|
73
|
+
style: {
|
|
74
|
+
...defaultPromoCodeStyles,
|
|
75
|
+
...productOffer.style,
|
|
76
|
+
...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
|
|
77
|
+
},
|
|
78
|
+
children: productOffer.offerText
|
|
79
|
+
})
|
|
80
|
+
})]
|
|
81
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
|
|
82
|
+
direction: "column",
|
|
83
|
+
sx: {
|
|
84
|
+
flex: 1,
|
|
85
|
+
...(horizontal ? {
|
|
86
|
+
py: 1.5,
|
|
87
|
+
px: 1.5
|
|
88
|
+
} : {
|
|
89
|
+
px: 1,
|
|
90
|
+
pb: 0.5
|
|
91
|
+
})
|
|
92
|
+
}
|
|
93
|
+
}));
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
var _react = require("react");
|
|
5
|
+
var _it$images$, _productOffer$ui, _productOffer$ui2;
|
|
6
|
+
/*#__PURE__*/(0, _react.createElement)(Card, {
|
|
7
|
+
...otherProps,
|
|
8
|
+
ref: ref,
|
|
9
|
+
key: it.wcId,
|
|
10
|
+
"data-p": it.performance / 100,
|
|
11
|
+
variant: "outlined",
|
|
12
|
+
sx: [{
|
|
13
|
+
gap: '0.25rem',
|
|
14
|
+
textDecoration: 'none',
|
|
15
|
+
borderRadius: 0.75,
|
|
16
|
+
background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
|
|
17
|
+
transition: 'all 200ms ease-in-out',
|
|
18
|
+
cursor: 'pointer',
|
|
19
|
+
'&:hover': {
|
|
20
|
+
borderColor: '#99CCFF',
|
|
21
|
+
boxShadow: '0px 4px 16px #DAE2ED',
|
|
22
|
+
transition: 'all 200ms ease-in-out !important'
|
|
23
|
+
}
|
|
24
|
+
}, horizontal ? {
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
pr: 1
|
|
28
|
+
} : {
|
|
29
|
+
display: 'flex',
|
|
30
|
+
flexDirection: 'column',
|
|
31
|
+
pb: 0.5
|
|
32
|
+
}],
|
|
33
|
+
onClick: ev => {
|
|
34
|
+
ev.preventDefault();
|
|
35
|
+
navigate(href);
|
|
36
|
+
}
|
|
37
|
+
}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
|
|
38
|
+
component: Link,
|
|
39
|
+
to: href,
|
|
40
|
+
sx: [{
|
|
41
|
+
position: 'relative',
|
|
42
|
+
aspectRatio: '100/55'
|
|
43
|
+
}, horizontal ? {
|
|
44
|
+
maxWidth: '50vw',
|
|
45
|
+
height: {
|
|
46
|
+
sm: '150px',
|
|
47
|
+
md: '170px',
|
|
48
|
+
lg: '210px',
|
|
49
|
+
xl: '250px'
|
|
50
|
+
}
|
|
51
|
+
} : {
|
|
52
|
+
width: '100%'
|
|
53
|
+
}],
|
|
54
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
|
|
55
|
+
sizes: imageSizes,
|
|
56
|
+
loading: imageLoading,
|
|
57
|
+
src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
|
|
58
|
+
alt: it.name,
|
|
59
|
+
style: {
|
|
60
|
+
aspectRatio: '100/55',
|
|
61
|
+
...(horizontal ? {
|
|
62
|
+
width: 'auto',
|
|
63
|
+
height: '100%'
|
|
64
|
+
} : {
|
|
65
|
+
width: '100%',
|
|
66
|
+
height: 'auto'
|
|
67
|
+
})
|
|
68
|
+
}
|
|
69
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
|
|
70
|
+
children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
|
|
71
|
+
style: {
|
|
72
|
+
...defaultPromoCodeStyles,
|
|
73
|
+
...productOffer.style,
|
|
74
|
+
...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
|
|
75
|
+
},
|
|
76
|
+
children: productOffer.offerText
|
|
77
|
+
})
|
|
78
|
+
})]
|
|
79
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
|
|
80
|
+
direction: "column",
|
|
81
|
+
sx: [{
|
|
82
|
+
flex: 1
|
|
83
|
+
}, horizontal ? {
|
|
84
|
+
py: 1.5,
|
|
85
|
+
px: 1.5
|
|
86
|
+
} : {
|
|
87
|
+
px: 1,
|
|
88
|
+
pb: 0.5
|
|
89
|
+
}]
|
|
90
|
+
}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/codemod",
|
|
3
|
-
"version": "6.0.0-beta.
|
|
3
|
+
"version": "6.0.0-beta.1",
|
|
4
4
|
"bin": "./codemod.js",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "MUI Team",
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
"url": "https://opencollective.com/mui-org"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@babel/core": "^7.24.
|
|
28
|
-
"@babel/runtime": "^7.24.
|
|
29
|
-
"@babel/traverse": "^7.24.
|
|
27
|
+
"@babel/core": "^7.24.8",
|
|
28
|
+
"@babel/runtime": "^7.24.8",
|
|
29
|
+
"@babel/traverse": "^7.24.8",
|
|
30
30
|
"jscodeshift": "^0.16.1",
|
|
31
31
|
"jscodeshift-add-imports": "^1.0.10",
|
|
32
32
|
"postcss": "^8.4.39",
|