[styles] Fix issues reported by eslint-plugin-react-compiler

packages/mui-styles/src/StylesProvider/StylesProvider.js

@@ -84,6 +84,7 @@ export default function StylesProvider(props) {
  if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {
  if (!injectFirstNode) {
  const head = document.head;
+ // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- injectFirstNode is called inside callback
  injectFirstNode = document.createComment('mui-inject-first');
  head.insertBefore(injectFirstNode, head.firstChild);
  }

packages/mui-styles/src/makeStyles/makeStyles.js

@@ -164,6 +164,7 @@ function useSynchronousEffect(func, values) {
  let output;
 
  // Store "generation" key. Just returns a new object every time
+ // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
  const currentKey = React.useMemo(() => ({}), values); // eslint-disable-line react-hooks/exhaustive-deps
 
  // "the first render", or "memo dropped the value"
@@ -238,7 +239,8 @@ export default function makeStyles(stylesOrCreator, options = {}) {
 
  const classes = getClasses(instance.current, props.classes, Component);
  if (process.env.NODE_ENV !== 'production') {
- // eslint-disable-next-line react-hooks/rules-of-hooks
+ // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
  React.useDebugValue(classes);
  }
  if (process.env.NODE_ENV !== 'production') {

packages/mui-styles/src/makeStyles/makeStyles.spec.tsx

@@ -120,15 +120,15 @@ import { createStyles, makeStyles } from '@mui/styles';
  }));
 }
 
+const useStyles = makeStyles<Theme>((theme) => ({
+ root: {
+ background: 'blue',
+ },
+}));
+
 function PartialTypeInferenceTest() {
  // If any generic is provided, inference breaks.
  // If the proposal https://github.com/Microsoft/TypeScript/issues/26242 goes through, we can fix this.
- const useStyles = makeStyles<Theme>((theme) => ({
- root: {
- background: 'blue',
- },
- }));
-
  const classes = useStyles();
 
  // This doesn't fail, because inference is broken

packages/mui-styles/src/withStyles/withStyles.js

@@ -57,6 +57,7 @@ const withStyles =
 
  if (typeof name === 'string' || withTheme) {
  // name and withTheme are invariant in the outer scope
+ // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
  // eslint-disable-next-line react-hooks/rules-of-hooks
  theme = useTheme() || defaultTheme;