@mui/codemod 9.0.0 → 9.0.1

package/README.md

@@ -2545,6 +2545,13 @@ Compared to the v6 codemod, the v9 version also handles:
 +<Link href="#" sx={{ color: "text.secondary" }} />
 ```
 
+You can also pass `--jsx` to specify JSX element names directly, bypassing import detection.
+This is useful for projects using auto-import plugins (for example `unplugin-auto-import`) where Material UI components are available without explicit import statements:
+
+```bash
+npx @mui/codemod@latest v9.0.0/system-props <path> -- --jsx=Box,Typography,Stack,Link,Grid,DialogContentText
+```
+
 ### v7.0.0
 
 #### `theme-color-functions`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "author": "MUI Team",
   "description": "Codemod scripts for Material UI.",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "@mui/material-v5": "npm:@mui/material@5.18.0",
     "jscodeshift": "^17.1.2",
     "jscodeshift-add-imports": "^1.0.11",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.13",
     "postcss-cli": "^11.0.1",
     "yargs": "^17.7.2"
   },

package/v5.0.0/jss-to-styled.test/fifth.actual.js

@@ -33,7 +33,7 @@ const useStyles = (0, _makeStyles.default)(theme => {
       flexDirection: 'column',
       position: 'relative',
       alignItems: 'center',
-      // Fix IE11 issue
+      // Fix IE 11 issue
       marginRight: 0,
       marginLeft: 0,
       padding: theme.spacing(0, 2)

package/v5.0.0/jss-to-styled.test/fifth.expected.js

@@ -43,7 +43,7 @@ const Root = (0, _styles.styled)('div')(({
       flexDirection: 'column',
       position: 'relative',
       alignItems: 'center',
-      // Fix IE11 issue
+      // Fix IE 11 issue
       marginRight: 0,
       marginLeft: 0,
       padding: theme.spacing(0, 2)

package/v5.0.0/jss-to-styled.test/second.actual.js

@@ -31,7 +31,7 @@ const useStyles = (0, _makeStyles.default)(theme => ({
     flexDirection: 'column',
     position: 'relative',
     alignItems: 'center',
-    // Fix IE11 issue
+    // Fix IE 11 issue
     marginRight: 0,
     marginLeft: 0,
     padding: `0 ${theme.spacing(2)}`

package/v5.0.0/jss-to-styled.test/second.expected.js

@@ -41,7 +41,7 @@ const Root = (0, _styles.styled)('div')(({
     flexDirection: 'column',
     position: 'relative',
     alignItems: 'center',
-    // Fix IE11 issue
+    // Fix IE 11 issue
     marginRight: 0,
     marginLeft: 0,
     padding: `0 ${theme.spacing(2)}`

package/v6.0.0/styled/test-cases/NestedSpread.actual.js

@@ -7,7 +7,7 @@ const Component = styled('div')(({
   const palette = (theme.vars || theme).palette?.[ownerState.color];
   return {
     overflow: 'visible',
-    // Explicitly set the default value to solve a bug on IE11.
+    // Explicitly set the default value to solve a bug on IE 11.
     color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest

package/v6.0.0/styled/test-cases/NestedSpread.expected.js

@@ -5,7 +5,7 @@ const Component = styled('div')(({
 }) => {
   const palette = (theme.vars || theme).palette?.[ownerState.color];
   return {
-    // Explicitly set the default value to solve a bug on IE11.
+    // Explicitly set the default value to solve a bug on IE 11.
     overflow: 'visible',
     color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {

package/v9.0.0/system-props/removeSystemProps.js

@@ -156,7 +156,24 @@ function removeSystemProps(file, api, options) {
     }
   };
   const elementReplacement = {};
-  root.find(j.ImportDeclaration, decl => decl.source.value.includes('@mui')).forEach(decl => {
+  if (options.jsx) {
+    options.jsx.split(',').forEach(name => {
+      const trimmed = name.trim();
+      if (!trimmed) {
+        return;
+      }
+      deprecatedElements.push(trimmed);
+      if (customReplacement[trimmed]) {
+        elementReplacement[trimmed] = customReplacement[trimmed];
+      }
+    });
+  }
+  const packageName = options.packageName;
+  const importSources = ['@mui'];
+  if (packageName) {
+    importSources.push(packageName);
+  }
+  root.find(j.ImportDeclaration, decl => typeof decl.source.value === 'string' && importSources.some(source => decl.source.value === source || decl.source.value.startsWith(`${source}/`))).forEach(decl => {
     decl.node.specifiers.forEach(spec => {
       if (spec.type === 'ImportSpecifier') {
         const name = spec.imported.name;

package/v9.0.0/system-props/test-cases/system-props-jsx-custom.actual.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+// --jsx accepts arbitrary component names (e.g. DialogTitle, Skeleton, SvgIcon)
+/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogTitle, {
+  display: "flex",
+  alignItems: "center",
+  children: "Title"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+  height: 60,
+  width: 100,
+  mb: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(SvgIcon, {
+  width: "1rem",
+  height: "1rem"
+});

package/v9.0.0/system-props/test-cases/system-props-jsx-custom.expected.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+// --jsx accepts arbitrary component names (e.g. DialogTitle, Skeleton, SvgIcon)
+/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogTitle, {
+  sx: {
+    display: "flex",
+    alignItems: "center"
+  },
+  children: "Title"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+  sx: {
+    height: 60,
+    width: 100,
+    mb: 2
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(SvgIcon, {
+  sx: {
+    width: "1rem",
+    height: "1rem"
+  }
+});

package/v9.0.0/system-props/test-cases/system-props-jsx.actual.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+// No import statements — components are auto-imported
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  display: "flex",
+  gap: 2,
+  p: 3,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Typography, {
+    fontSize: 14,
+    fontWeight: 600,
+    children: "Hello"
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "row",
+  spacing: 2,
+  mt: 1
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+  color: "inherit",
+  href: "https://mui.com/",
+  mb: 2,
+  children: "MUI"
+});
+const sx = {
+  display: 'flex'
+};
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  m: 2,
+  sx: sx
+});

package/v9.0.0/system-props/test-cases/system-props-jsx.expected.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+// No import statements — components are auto-imported
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    display: "flex",
+    gap: 2,
+    p: 3
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Typography, {
+    sx: {
+      fontSize: 14,
+      fontWeight: 600
+    },
+    children: "Hello"
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "row",
+  spacing: 2,
+  sx: {
+    mt: 1
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+  color: "inherit",
+  href: "https://mui.com/",
+  sx: {
+    mb: 2
+  },
+  children: "MUI"
+});
+const sx = {
+  display: 'flex'
+};
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: [{
+    m: 2
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});

package/v9.0.0/system-props/test-cases/system-props-package-name-similar.actual.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _uiIcons = require("@acme/ui-icons");
+var _Typography = _interopRequireDefault(require("@acme/ui-icons/Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_uiIcons.Box, {
+  mt: 2,
+  p: 1
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  color: "text.secondary",
+  fontSize: "xl4",
+  children: "Hello"
+});

package/v9.0.0/system-props/test-cases/system-props-package-name-similar.expected.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _uiIcons = require("@acme/ui-icons");
+var _Typography = _interopRequireDefault(require("@acme/ui-icons/Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_uiIcons.Box, {
+  mt: 2,
+  p: 1
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  color: "text.secondary",
+  fontSize: "xl4",
+  children: "Hello"
+});

package/v9.0.0/system-props/test-cases/system-props-package-name.actual.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _ui = require("@acme/ui");
+var _components = require("@acme/ui/components");
+var _Typography = _interopRequireDefault(require("@acme/ui/Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Box, {
+  mt: 2,
+  p: 1
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Stack, {
+  flex: "1",
+  mb: 3
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  color: "text.secondary",
+  fontSize: "xl4",
+  children: "Hello"
+});

package/v9.0.0/system-props/test-cases/system-props-package-name.expected.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _ui = require("@acme/ui");
+var _components = require("@acme/ui/components");
+var _Typography = _interopRequireDefault(require("@acme/ui/Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Box, {
+  sx: {
+    mt: 2,
+    p: 1
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Stack, {
+  sx: {
+    flex: "1",
+    mb: 3
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    color: "text.secondary",
+    fontSize: "xl4"
+  },
+  children: "Hello"
+});