@mui/codemod/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js

Codemod scripts for Material UI.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useExportedStyles = exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _mui = require("tss-react/mui");
var _jsxRuntime = require("react/jsx-runtime");
var _InnerComponent;
/*
Comments to be preserved when clsx import is removed. These comments should come before
any comments that they get combined with.
 */
/*
Comments that should not be lost when the clsx import comments are preserved.
 */
// 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 = exports.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 (for example `(props) => ({...})` instead of `({color}) => ({...})`).
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"
    };
  }
});

// TODO jss-to-tss-react codemod: '@global' is not supported by tss-react.
// See https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override for alternatives.
const useGlobalStyles = (0, _mui.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,
    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 = exports.default = useStyles3;