[styles] Fix issues reported by eslint-plugin-react-compiler (#43118)

Signed-off-by: jlewins <[email protected]> Co-authored-by: Aarón García Hervás <[email protected]>
mui · Aug 14, 2024 · 769e9a3 · 769e9a3
1 parent 0acfe66
commit 769e9a3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.js b/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);
       }

diff --git a/packages/mui-styles/src/makeStyles/makeStyles.js b/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') {

diff --git a/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx b/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

diff --git a/packages/mui-styles/src/withStyles/withStyles.js b/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;