diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.js b/packages/material-ui-styles/src/makeStyles/makeStyles.js index 4885fe4d0ad13c..113b1effd80d1d 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.js @@ -201,7 +201,7 @@ export default function makeStyles(stylesOrCreator, options = {}) { classNamePrefix, }; - return (props = {}) => { + const useStyles = (props = {}) => { const theme = useTheme() || defaultTheme; const stylesOptions = { ...React.useContext(StylesContext), @@ -236,6 +236,14 @@ export default function makeStyles(stylesOrCreator, options = {}) { shouldUpdate.current = true; }); - return getClasses(instance.current, props.classes, Component); + const classes = getClasses(instance.current, props.classes, Component); + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useDebugValue(classes); + } + + return classes; }; + + return useStyles; } diff --git a/packages/material-ui-styles/src/useTheme/useTheme.js b/packages/material-ui-styles/src/useTheme/useTheme.js index 0ca6dd72cf99ee..6f7c8fa0bfde32 100644 --- a/packages/material-ui-styles/src/useTheme/useTheme.js +++ b/packages/material-ui-styles/src/useTheme/useTheme.js @@ -2,5 +2,12 @@ import React from 'react'; import ThemeContext from './ThemeContext'; export default function useTheme() { - return React.useContext(ThemeContext); + const theme = React.useContext(ThemeContext); + + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useDebugValue(theme); + } + + return theme; } diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js index fc02426ceea1e9..5d5ab018c741bc 100644 --- a/packages/material-ui/scripts/rollup.config.js +++ b/packages/material-ui/scripts/rollup.config.js @@ -41,7 +41,21 @@ const commonjsOptions = { }; function onwarn(warning) { - throw Error(warning.message); + if ( + warning.code === 'UNUSED_EXTERNAL_IMPORT' && + warning.source === 'react' && + warning.names.filter((identifier) => identifier !== 'useDebugValue').length === 0 + ) { + // only warn for + // import * as React from 'react' + // if (__DEV__) React.useDebugValue() + // React.useDebug not fully dce'd from prod bundle + // in the sense that it's still imported but unused. Downgrading + // it to a warning as a reminder to fix at some point + console.warn(warning.message); + } else { + throw Error(warning.message); + } } export default [ diff --git a/packages/material-ui/src/styles/useTheme.js b/packages/material-ui/src/styles/useTheme.js index 5945620ff61538..8acf799aadd9b6 100644 --- a/packages/material-ui/src/styles/useTheme.js +++ b/packages/material-ui/src/styles/useTheme.js @@ -1,6 +1,14 @@ import { useTheme as useThemeWithoutDefault } from '@material-ui/styles'; +import React from 'react'; import defaultTheme from './defaultTheme'; export default function useTheme() { - return useThemeWithoutDefault() || defaultTheme; + const theme = useThemeWithoutDefault() || defaultTheme; + + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useDebugValue(theme); + } + + return theme; } diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.js index 82dc39a913d36c..3a531e1609a6c5 100644 --- a/packages/material-ui/src/useMediaQuery/useMediaQuery.js +++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.js @@ -78,5 +78,10 @@ export default function useMediaQuery(queryInput, options = {}) { }; }, [query, matchMedia, supportMatchMedia]); + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useDebugValue({ query, match }); + } + return match; } diff --git a/packages/material-ui/src/utils/focusVisible.js b/packages/material-ui/src/utils/focusVisible.js index a331de1971c2a1..ce4a91f0219377 100644 --- a/packages/material-ui/src/utils/focusVisible.js +++ b/packages/material-ui/src/utils/focusVisible.js @@ -139,5 +139,10 @@ export function useIsFocusVisible() { } }, []); + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useDebugValue(isFocusVisible); + } + return { isFocusVisible, onBlurVisible: handleBlurVisible, ref }; }