@mui/codemod 5.7.0 → 5.8.0

package/node/v5.0.0/jss-to-tss-react.test/expected-mixins-pattern.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function mixins() {
+  return {
+    test: {
+      backgroundColor: "purple",
+      color: "white"
+    }
+  };
+}
+
+function cssProps() {
+  return {
+    paddingLeft: "8px"
+  };
+}
+
+const useStyles = (0, _mui.makeStyles)()(theme => {
+  return mixins();
+});
+const useStyles2 = (0, _mui.makeStyles)()(theme => (0, _extends2.default)({}, mixins(), {
+  test2: (0, _extends2.default)({
+    color: "red"
+  }, cssProps())
+}));
+
+function ComponentUsingStyles(props) {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const {
+    classes: classes2
+  } = useStyles2();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cx(classes.test, classes2.test2),
+    children: "Test"
+  });
+}

package/node/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useExportedStyles = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+// TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.
+const useStyles = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    [`&.${classes.qualifier}`]: {
+      textDecoration: props => props.textDecoration
+    }
+  },
+  qualifier: {}
+})); // TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.
+
+const useExportedStyles = (0, _mui.makeStyles)()({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+}); // TODO jss-to-tss-react codemod: Unable to handle style definition reliably. Unsupported arrow function syntax.
+// Arrow function has parameter type of Identifier instead of ObjectPattern (e.g. `(props) => ({...})` instead of `({color}) => ({...})`).
+
+exports.useExportedStyles = useExportedStyles;
+const useStyles2 = (0, _mui.makeStyles)()({
+  test2: props => ({
+    backgroundColor: "blue",
+    color: "lime"
+  })
+}); // TODO jss-to-tss-react codemod: Unable to handle style definition reliably. Unsupported arrow function syntax.
+// Arrow function has body type of BlockStatement instead of ObjectExpression.
+
+const useStyles3 = (0, _mui.makeStyles)()({
+  test3: props => {
+    return {
+      backgroundColor: "blue",
+      color: "lime"
+    };
+  }
+});
+
+function InnerComponent() {
+  const {
+    classes
+  } = useStyles2();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test2,
+    children: "Inner Test"
+  });
+}
+
+function ComponentUsingStyles(props) {
+  const {
+    classes,
+    cx
+  } = useStyles(props, {
+    props: props
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.test,
+      children: ["Test", _InnerComponent || (_InnerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {}))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cx(classes.test, classes.qualifier),
+      children: "Qualifier Test"
+    })]
+  });
+} // TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.
+
+
+var _default = useStyles3;
+exports.default = _default;

package/node/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const useStyles = (0, _mui.makeStyles)({
+  name: 'App'
+})((theme, {
+  color,
+  padding
+}, classes) => ({
+  root: {
+    padding: padding,
+    [`&:hover .${classes.child}`]: {
+      backgroundColor: theme.palette[color].main
+    }
+  },
+  small: {},
+  child: {
+    border: '1px solid black',
+    height: 50,
+    [`&.${classes.small}`]: {
+      height: 30
+    }
+  }
+}));
+
+function App({
+  classes: classesProp
+}) {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    color: 'primary',
+    padding: 30
+  }, {
+    props: {
+      classes: classesProp
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.child,
+      children: "The Background take the primary theme color when the mouse hovers the parent."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cx(classes.child, classes.small),
+      children: "The Background take the primary theme color when the mouse hovers the parent. I am smaller than the other child."
+    })]
+  });
+}
+
+var _default = App;
+exports.default = _default;

package/node/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useStyles = (0, _mui.makeStyles)()((theme, _params, classes) => ({
+  parent: {
+    padding: 30,
+    [`&:hover .${classes.child}`]: {
+      backgroundColor: 'red'
+    }
+  },
+  small: {},
+  child: {
+    backgroundColor: 'blue',
+    height: 50,
+    [`&.${classes.small}`]: {
+      backgroundColor: 'lightblue',
+      height: 30
+    }
+  }
+}));
+
+function App() {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.parent,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.child,
+      children: "Background turns red when the mouse hovers over the parent."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cx(classes.child, classes.small),
+      children: "Background turns red when the mouse hovers over the parent. I am smaller than the other child."
+    })]
+  });
+}
+
+var _default = App;
+exports.default = _default;

package/node/v5.0.0/jss-to-tss-react.test/expected-typescript.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MergeClassesNoParams = MergeClassesNoParams;
+exports.default = ComponentUsingStyles;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+Sandboxes for verifying correct behavior:
+JSS - https://codesandbox.io/s/typescript-case-bt065c?file=/demo.tsx
+TSS - https://codesandbox.io/s/typescript-case-7jwpms?file=/demo.tsx
+ */
+const useStyles = (0, _mui.makeStyles)()((theme, _params, classes) => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    [`& .${classes.test2}`]: {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+}));
+
+function MergeClassesNoParams({
+  classes: classesProp
+}) {
+  const {
+    classes
+  } = useStyles(undefined, {
+    props: {
+      classes: classesProp
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test,
+    children: "Test useStyles without params but with classes prop"
+  });
+}
+
+function InnerComponent({
+  classes
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test2,
+    children: "Inner Test2"
+  });
+}
+
+function ComponentUsingStyles() {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.test,
+      children: ["Test", /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {
+        classes: classes
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.test2,
+      children: "Outer Test2"
+    })]
+  });
+}

package/node/v5.0.0/jss-to-tss-react.test/expected-withStyles.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = App;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _StyledComp, _StyledComp2, _StyledComp3a, _StyledComp3b, _StyledComp3c;
+
+const styles1 = {
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+};
+
+function Comp1({
+  classes
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test,
+    children: "Comp1"
+  });
+}
+
+const StyledComp1 = (0, _mui.withStyles)(Comp1, styles1);
+
+const styles2 = (_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "black",
+    color: "lime"
+  },
+  test2: {
+    backgroundColor: "white",
+    color: "purple",
+    [`&.${classes.test}`]: {
+      backgroundColor: "pink",
+      color: "blue"
+    }
+  }
+});
+
+function Comp2({
+  classes
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.test,
+      children: "Comp2 test"
+    }), _StyledComp || (_StyledComp = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp1, {})), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.test2,
+      children: "Comp2 test2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)(classes.test, classes.test2),
+      children: "Comp2 test and test2"
+    })]
+  });
+}
+
+const StyledComp2 = (0, _mui.withStyles)(Comp2, styles2);
+
+function Comp3({
+  classes
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.test,
+    children: ["Inline Styles", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.test2,
+      children: "Nested Inline Styles"
+    })]
+  });
+}
+
+const StyledComp3a = (0, _mui.withStyles)(Comp3, {
+  test: {
+    backgroundColor: "yellow"
+  }
+});
+const StyledComp3b = (0, _mui.withStyles)(Comp3, (_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "yellow",
+    color: "lime",
+    [`& .${classes.test2}`]: {
+      backgroundColor: "orange"
+    }
+  },
+  test2: {}
+}));
+
+const styles3c = (theme, _params, classes) => {
+  const bgColor1 = theme.palette.primary.main;
+  const color1 = theme.palette.primary.contrastText;
+  const bgColor2 = theme.palette.secondary.main;
+  const color2 = theme.palette.secondary.contrastText;
+  return {
+    test: {
+      backgroundColor: bgColor1,
+      color: color1,
+      [`& .${classes.test2}`]: {
+        backgroundColor: bgColor2,
+        color: color2
+      }
+    },
+    test2: {}
+  };
+};
+
+const StyledComp3c = (0, _mui.withStyles)(Comp3, styles3c);
+
+function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [_StyledComp2 || (_StyledComp2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp2, {})), _StyledComp3a || (_StyledComp3a = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3a, {})), _StyledComp3b || (_StyledComp3b = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3b, {})), _StyledComp3c || (_StyledComp3c = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3c, {}))]
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",