@mui/codemod 6.0.0-alpha.8 → 6.0.0-beta.0

package/node/v6.0.0/system-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _removeSystemProps.default;
+  }
+});
+var _removeSystemProps = _interopRequireDefault(require("./removeSystemProps"));

package/node/v6.0.0/system-props/removeSystemProps.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = removeSystemProps;
+// from `packages/mui-system/src/styleFunctionSx/defaultSxConfig.js`
+const defaultSxConfig = {
+  // borders
+  border: {},
+  borderTop: {},
+  borderRight: {},
+  borderBottom: {},
+  borderLeft: {},
+  borderColor: {},
+  borderTopColor: {},
+  borderRightColor: {},
+  borderBottomColor: {},
+  borderLeftColor: {},
+  outline: {},
+  outlineColor: {},
+  borderRadius: {},
+  color: {},
+  bgcolor: {},
+  backgroundColor: {},
+  p: {},
+  pt: {},
+  pr: {},
+  pb: {},
+  pl: {},
+  px: {},
+  py: {},
+  padding: {},
+  paddingTop: {},
+  paddingRight: {},
+  paddingBottom: {},
+  paddingLeft: {},
+  paddingX: {},
+  paddingY: {},
+  paddingInline: {},
+  paddingInlineStart: {},
+  paddingInlineEnd: {},
+  paddingBlock: {},
+  paddingBlockStart: {},
+  paddingBlockEnd: {},
+  m: {},
+  mt: {},
+  mr: {},
+  mb: {},
+  ml: {},
+  mx: {},
+  my: {},
+  margin: {},
+  marginTop: {},
+  marginRight: {},
+  marginBottom: {},
+  marginLeft: {},
+  marginX: {},
+  marginY: {},
+  marginInline: {},
+  marginInlineStart: {},
+  marginInlineEnd: {},
+  marginBlock: {},
+  marginBlockStart: {},
+  marginBlockEnd: {},
+  // display
+  displayPrint: {},
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+  // grid
+  gap: {},
+  rowGap: {},
+  columnGap: {},
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+  // positions
+  position: {},
+  zIndex: {},
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+  // shadows
+  boxShadow: {},
+  // sizing
+  width: {},
+  maxWidth: {},
+  minWidth: {},
+  height: {},
+  maxHeight: {},
+  minHeight: {},
+  boxSizing: {},
+  // typography
+  font: {},
+  fontFamily: {},
+  fontSize: {},
+  fontStyle: {},
+  fontWeight: {},
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {}
+};
+const systemProps = Object.keys(defaultSxConfig);
+const components = ['Box', 'Stack', 'Typography', 'Link', 'Grid'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function removeSystemProps(file, api, options) {
+  var _file$path, _file$path2;
+  if ((_file$path = file.path) != null && _file$path.endsWith('.json') || (_file$path2 = file.path) != null && _file$path2.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const deprecatedElements = [];
+  const customReplacement = {
+    Typography: {
+      matcher: (key, val) => {
+        var _val$value;
+        return key !== 'color' || ((_val$value = val.value) == null ? void 0 : _val$value.includes('.')) && val.value !== 'inherit' || val.value === 'divider';
+      }
+    },
+    Link: {
+      matcher: key => key !== 'color'
+    }
+  };
+  const elementReplacement = {};
+  root.find(j.ImportDeclaration, decl => decl.source.value.includes('@mui')).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportSpecifier') {
+        if (components.includes(spec.imported.name)) {
+          deprecatedElements.push(spec.local.name);
+        }
+      }
+      if (spec.type === 'ImportDefaultSpecifier') {
+        const name = decl.node.source.value.split('/').pop();
+        if (components.includes(name)) {
+          deprecatedElements.push(spec.local.name);
+          if (customReplacement[name]) {
+            elementReplacement[spec.local.name] = customReplacement[name];
+          }
+        }
+      }
+    });
+  });
+  root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: name => {
+          return deprecatedElements.includes(name);
+        }
+      }
+    }
+  }).forEach(el => {
+    var _el$value, _sxNodesArray$;
+    const sx = j.objectExpression([]);
+    const elementName = (_el$value = el.value) == null || (_el$value = _el$value.openingElement) == null || (_el$value = _el$value.name) == null ? void 0 : _el$value.name;
+    const sxNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name === 'sx');
+    const sxNodesArray = sxNodes.nodes() || [];
+    const existingSxValue = (_sxNodesArray$ = sxNodesArray[0]) == null || (_sxNodesArray$ = _sxNodesArray$.value) == null ? void 0 : _sxNodesArray$.expression;
+    let spreadElement = null;
+    el.node.openingElement.attributes.forEach(attr => {
+      if (attr.type === 'JSXSpreadAttribute') {
+        spreadElement = attr;
+      }
+    });
+    const attrToPrune = ['sx'];
+    el.node.openingElement.attributes.forEach(attr => {
+      var _attr$name, _attr$name2;
+      if (attr.type === 'JSXSpreadAttribute' || !attr.value || !systemProps.includes(attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name)) {
+        return;
+      }
+      const key = attr == null || (_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name;
+      const literal = attr == null ? void 0 : attr.value;
+      const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal;
+      const shouldPrune = !elementReplacement[elementName] || elementReplacement[elementName].matcher(key, val);
+      if (key && val) {
+        if (shouldPrune) {
+          sx.properties.push(j.property('init', j.identifier(key), val));
+          attrToPrune.push(key);
+        }
+      }
+    });
+    if (sx.properties.length) {
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
+        var _attr$name3;
+        return attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr == null || (_attr$name3 = attr.name) == null ? void 0 : _attr$name3.name);
+      });
+      let finalSx;
+      if (!existingSxValue) {
+        finalSx = sx;
+      } else if ((existingSxValue == null ? void 0 : existingSxValue.type) === 'ObjectExpression') {
+        sx.properties.push(...existingSxValue.properties);
+        finalSx = sx;
+      } else if ((existingSxValue == null ? void 0 : existingSxValue.type) === 'ArrayExpression') {
+        existingSxValue.elements = [sx, ...existingSxValue.elements];
+        finalSx = existingSxValue;
+      } else {
+        finalSx = j.arrayExpression([sx, existingSxValue.type === 'Identifier' ? j.spreadElement(j.conditionalExpression(j.callExpression(j.memberExpression(j.identifier('Array'), j.identifier('isArray')), [existingSxValue]), existingSxValue, j.arrayExpression([existingSxValue]))) : existingSxValue]);
+      }
+      if (spreadElement && spreadElement.argument.type === 'Identifier') {
+        if (finalSx.type === 'ObjectExpression') {
+          const propSx = j.memberExpression(spreadElement.argument, j.identifier('sx'));
+          finalSx = j.arrayExpression([finalSx, j.spreadElement(j.conditionalExpression(j.callExpression(j.memberExpression(j.identifier('Array'), j.identifier('isArray')), [propSx]), propSx, j.arrayExpression([propSx])))]);
+        } else if (finalSx.type === 'ArrayExpression') {
+          finalSx.elements.push(j.memberExpression(spreadElement.argument, j.identifier('sx')));
+        }
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('sx'), j.jsxExpressionContainer(finalSx)));
+    }
+  });
+  return root.toSource(printOptions);
+}

package/node/v6.0.0/system-props/test-cases/system-props.actual.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _material = require("@mui/material");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _Link;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  typography: "body1"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  color: "palette.main",
+  sx: {
+    display: 'block'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  container: true,
+  flexDirection: `column`
+});
+const sx = {
+  display: 'flex'
+};
+const ml = 2;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "primary.main",
+  ml: ml,
+  sx: sx
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "divider",
+  ml: ml,
+  sx: sx
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "inherit",
+  ml: ml,
+  sx: sx
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  fontSize: "xl4",
+  lineHeight: 1,
+  startDecorator: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    fontSize: "lg",
+    textColor: "text.secondary",
+    children: "$"
+  }),
+  sx: {
+    alignItems: 'flex-start'
+  },
+  children: "25"
+});
+function Copyright(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    variant: "body2",
+    color: "text.secondary",
+    align: "center",
+    ...props,
+    children: ['Copyright © ', _Link || (_Link = /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+      color: "inherit",
+      href: "https://mui.com/",
+      children: "Your Website"
+    })), ' ', new Date().getFullYear(), '.']
+  });
+}
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
+  flex: "1",
+  sx: [...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  typography: "body1",
+  sx: foo.bar ? {
+    opacity: 0
+  } : sx
+});

package/node/v6.0.0/system-props/test-cases/system-props.expected.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _material = require("@mui/material");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _Link;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: {
+    typography: "body1"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: {
+    color: "palette.main",
+    display: 'block'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  container: true,
+  sx: {
+    flexDirection: `column`
+  }
+});
+const sx = {
+  display: 'flex'
+};
+const ml = 2;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  sx: [{
+    color: "primary.main",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  sx: [{
+    color: "divider",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "inherit",
+  sx: [{
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  startDecorator: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    textColor: "text.secondary",
+    sx: {
+      fontSize: "lg"
+    },
+    children: "$"
+  }),
+  sx: {
+    fontSize: "xl4",
+    lineHeight: 1,
+    alignItems: 'flex-start'
+  },
+  children: "25"
+});
+function Copyright(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    variant: "body2",
+    align: "center",
+    ...props,
+    sx: [{
+      color: "text.secondary"
+    }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])],
+    children: ['Copyright © ', _Link || (_Link = /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+      color: "inherit",
+      href: "https://mui.com/",
+      children: "Your Website"
+    })), ' ', new Date().getFullYear(), '.']
+  });
+}
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
+  sx: [{
+    flex: "1"
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: [{
+    typography: "body1"
+  }, foo.bar ? {
+    opacity: 0
+  } : sx]
+});

package/node/v6.0.0/theme-v6/theme-v6.js

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = styledV6;
+exports.default = themeV6;
 var _getReturnExpression = _interopRequireDefault(require("../../util/getReturnExpression"));
 var _migrateToVariants = _interopRequireDefault(require("../../util/migrateToVariants"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-function styledV6(file, api, options) {
+function themeV6(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-beta.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,13 +24,13 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/runtime": "^7.24.5",
-    "@babel/traverse": "^7.24.5",
-    "jscodeshift": "^0.15.2",
+    "@babel/core": "^7.24.7",
+    "@babel/runtime": "^7.24.7",
+    "@babel/traverse": "^7.24.7",
+    "jscodeshift": "^0.16.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "postcss": "^8.4.38",
-    "postcss-cli": "^8.3.1",
+    "postcss": "^8.4.39",
+    "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {