@mui/codemod 5.7.0 → 5.8.3

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

@@ -0,0 +1,82 @@
+"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 _core = require("@material-ui/core");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+const useStyles = (0, _core.makeStyles)(() => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    "&$qualifier": {
+      textDecoration: props => props.textDecoration
+    }
+  },
+  qualifier: {}
+}));
+const useExportedStyles = (0, _core.makeStyles)({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+exports.useExportedStyles = useExportedStyles;
+const useStyles2 = (0, _core.makeStyles)({
+  test2: props => ({
+    backgroundColor: "blue",
+    color: "lime"
+  })
+});
+const useStyles3 = (0, _core.makeStyles)({
+  test3: props => {
+    return {
+      backgroundColor: "blue",
+      color: "lime"
+    };
+  }
+});
+const useGlobalStyles = (0, _core.makeStyles)(() => ({
+  '@global': {
+    '.sample': {
+      backgroundColor: "purple",
+      color: "white"
+    }
+  }
+}));
+
+function InnerComponent() {
+  const classes = useStyles2();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test2,
+    children: "Inner Test"
+  });
+}
+
+function ComponentUsingStyles(props) {
+  const classes = useStyles(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: (0, _clsx.default)(classes.test, classes.qualifier),
+      children: "Qualifier Test"
+    })]
+  });
+}
+
+var _default = useStyles3;
+exports.default = _default;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const useStyles = (0, _styles.makeStyles)(theme => (0, _styles.createStyles)({
+  root: ({
+    color,
+    padding
+  }) => ({
+    padding: padding,
+    '&:hover $child': {
+      backgroundColor: theme.palette[color].main
+    }
+  }),
+  small: {},
+  child: {
+    border: '1px solid black',
+    height: 50,
+    '&$small': {
+      height: 30
+    }
+  }
+}), {
+  name: 'App'
+});
+
+function App({
+  classes: classesProp
+}) {
+  const classes = useStyles({
+    color: 'primary',
+    padding: 30,
+    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: (0, _clsx.default)(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/actual-typescript-docs-example.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+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, _styles.makeStyles)(theme => ({
+  parent: {
+    padding: 30,
+    '&:hover $child': {
+      backgroundColor: 'red'
+    }
+  },
+  small: {},
+  child: {
+    backgroundColor: 'blue',
+    height: 50,
+    '&$small': {
+      backgroundColor: 'lightblue',
+      height: 30
+    }
+  }
+}));
+
+function App() {
+  const classes = 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: (0, _clsx.default)(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/actual-typescript.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MergeClassesNoParams = MergeClassesNoParams;
+exports.default = ComponentUsingStyles;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+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, _styles.makeStyles)(theme => (0, _styles.createStyles)({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    "& $test2": {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+}));
+
+function MergeClassesNoParams({
+  classes: classesProp
+}) {
+  const classes = useStyles({
+    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/actual-withStyles.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = App;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+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, _core.withStyles)(styles1)(Comp1);
+const styles2 = {
+  test: {
+    backgroundColor: "black",
+    color: "lime"
+  },
+  test2: {
+    backgroundColor: "white",
+    color: "purple",
+    "&$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, _core.withStyles)(styles2)(Comp2);
+
+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, _core.withStyles)({
+  test: {
+    backgroundColor: "yellow"
+  }
+})(Comp3);
+const StyledComp3b = (0, _core.withStyles)({
+  test: {
+    backgroundColor: "yellow",
+    color: "lime",
+    "& $test2": {
+      backgroundColor: "orange"
+    }
+  },
+  test2: {}
+})(Comp3);
+
+const styles3c = theme => {
+  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,
+      "& $test2": {
+        backgroundColor: bgColor2,
+        color: color2
+      }
+    },
+    test2: {}
+  };
+};
+
+const StyledComp3c = (0, _core.withStyles)(styles3c)(Comp3);
+
+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/node/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core-styles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+/*
+Sandboxes for verifying correct behavior:
+JSS - https://codesandbox.io/s/case1-jss-dedp2f?file=/src/App.js
+TSS - https://codesandbox.io/s/case1-tss-s0z7tx?file=/src/App.js
+ */
+const useStyles = (0, _mui.makeStyles)({
+  name: "TestName"
+})({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+const useStyles2 = (0, _mui.makeStyles)()(() => ({
+  test2: {
+    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
+  } = useStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.test,
+    children: ["Test", _InnerComponent || (_InnerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {}))]
+  });
+}

package/node/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+const useStyles = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    [`&.${classes.qualifier}`]: {
+      textDecoration: "underline"
+    },
+    [`&.${classes.qualifier}.${classes.qualifier2}`]: {
+      fontStyle: "italic"
+    },
+    [`&.${classes.qualifier2} .testStuffInBetween .${classes.qualifier}`]: {
+      color: "brown"
+    },
+    [`&.${classes.qualifier}:hover`]: {
+      backgroundColor: "red"
+    },
+    [`&.${classes.qualifier2}:not(:hover)`]: {
+      fontWeight: 700
+    }
+  },
+  qualifier: {},
+  qualifier2: {}
+}));
+const useStyles2 = (0, _mui.makeStyles)()({
+  test2: {
+    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"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cx(classes.test, classes.qualifier2),
+      children: "Qualifier 2 Test"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cx(classes.test, classes.qualifier, classes.qualifier2),
+      children: "Qualifier & Qualifier 2 Test"
+    })]
+  });
+}

package/node/v5.0.0/jss-to-tss-react.test/expected-from-mui-styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+const useStyles = (0, _mui.makeStyles)()({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+const useStyles2 = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    [`& .${classes.test2}`]: {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    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
+  } = useStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.test,
+    children: ["Test", _InnerComponent || (_InnerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {}))]
+  });
+}

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"
+  });
+}