Avoid import errors when tree-shaking @material-ui

@material-ui documents some tree-shaking performance optimizations at
https://material-ui.com/guides/minimizing-bundle-size/. Any downstream
project using both Material-UI and react-admin implementing this
recommendations will encounter errors like

Cannot find module: '@material-ui/core/esm/createMuiTheme'. Make sure
this package is installed.

This is apparently due to the way @material-ui re-exports styling
exports via @material-ui/core. The official recommendation is to import
via @material-ui/core/styles, which is what this commit is doing for
makeStyles and createMuiTheme.

Also included: ESLint configuration forbidding these two imports.

.eslintrc

@@ -17,6 +17,23 @@
     ],
     "rules": {
         "no-use-before-define": "off",
-        "prettier/prettier": "error"
+        "prettier/prettier": "error",
+        "no-restricted-imports": [
+            "error",
+            {
+                "paths": [
+                    {
+                        "name": "@material-ui/core",
+                        "importNames": ["makeStyles"],
+                        "message": "Please import makeStyles from @material-ui/core/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information"
+                    },
+                    {
+                        "name": "@material-ui/core",
+                        "importNames": ["createMuiTheme"],
+                        "message": "Please import createMuiTheme from @material-ui/core/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information"
+                    }
+                ]
+            }
+        ]
     }
 }

examples/demo/src/categories/CategoryList.tsx

@@ -10,9 +10,10 @@ import {
     CardContent,
     CardActions,
     Typography,
-    makeStyles,
 } from '@material-ui/core';
 
+import { makeStyles } from '@material-ui/core/styles';
+
 import LinkToRelatedProducts from './LinkToRelatedProducts';
 import { Category } from '../types';
 

examples/demo/src/orders/OrderList.tsx

@@ -15,14 +15,9 @@ import {
     TextField,
     TextInput,
 } from 'react-admin';
-import {
-    makeStyles,
-    useMediaQuery,
-    Divider,
-    Tabs,
-    Tab,
-    Theme,
-} from '@material-ui/core';
+import { useMediaQuery, Divider, Tabs, Tab, Theme } from '@material-ui/core';
+
+import { makeStyles } from '@material-ui/core/styles';
 
 import NbItemsField from './NbItemsField';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';

examples/demo/src/reviews/ReviewList.tsx

@@ -3,7 +3,8 @@ import { Fragment, useCallback, FC } from 'react';
 import classnames from 'classnames';
 import { BulkDeleteButton, List } from 'react-admin';
 import { Route, RouteChildrenProps, useHistory } from 'react-router-dom';
-import { Drawer, useMediaQuery, makeStyles, Theme } from '@material-ui/core';
+import { Drawer, useMediaQuery, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import BulkAcceptButton from './BulkAcceptButton';
 import BulkRejectButton from './BulkRejectButton';
 import ReviewListMobile from './ReviewListMobile';

examples/demo/src/reviews/StarRatingField.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FC } from 'react';
 import Icon from '@material-ui/icons/Stars';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { FieldProps } from '../types';
 

examples/demo/src/visitors/SegmentsField.tsx

@@ -4,7 +4,7 @@ import Chip from '@material-ui/core/Chip';
 import { useTranslate } from 'react-admin';
 import segments from '../segments/data';
 import { FieldProps, Customer } from '../types';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
     main: {

examples/demo/src/visitors/VisitorList.tsx

@@ -10,7 +10,8 @@ import {
     NumberField,
     SearchInput,
 } from 'react-admin';
-import { useMediaQuery, makeStyles, Theme } from '@material-ui/core';
+import { useMediaQuery, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import SegmentsField from './SegmentsField';
 import SegmentInput from './SegmentInput';

examples/demo/src/visitors/VisitorListAside.tsx

@@ -4,7 +4,6 @@ import {
     Box,
     Card,
     CardContent,
-    makeStyles,
     Typography,
     IconButton,
     InputAdornment,
@@ -13,6 +12,8 @@ import {
     ListItemText,
     ListItemSecondaryAction,
 } from '@material-ui/core';
+
+import { makeStyles } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
 import MonetizationOnIcon from '@material-ui/icons/MonetizationOnOutlined';

examples/simple/src/Layout.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { forwardRef } from 'react';
 import { Layout, AppBar, UserMenu, useLocale, useSetLocale } from 'react-admin';
-import { makeStyles, MenuItem, ListItemIcon } from '@material-ui/core';
+import { MenuItem, ListItemIcon } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import Language from '@material-ui/icons/Language';
 
 const useStyles = makeStyles(theme => ({

examples/simple/src/comments/CommentList.js

@@ -12,8 +12,8 @@ import {
     Grid,
     Toolbar,
     useMediaQuery,
-    makeStyles,
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import jsonExport from 'jsonexport/dist';
 import {
     ListBase,

examples/simple/src/posts/PostList.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { Children, Fragment, cloneElement, memo } from 'react';
 import BookIcon from '@material-ui/icons/Book';
 import Chip from '@material-ui/core/Chip';
-import { useMediaQuery, makeStyles } from '@material-ui/core';
+import { useMediaQuery } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import lodashGet from 'lodash/get';
 import jsonExport from 'jsonexport/dist';
 import {

examples/simple/src/tags/TagList.js

@@ -10,6 +10,7 @@ import {
     Collapse,
     Card,
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 

packages/ra-input-rich-text/src/index.tsx

@@ -14,8 +14,8 @@ import {
     FormControl,
     InputLabel,
     PropTypes as MuiPropTypes,
-    makeStyles,
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 
 import styles from './styles';

packages/ra-ui-materialui/src/auth/Login.tsx

@@ -7,13 +7,8 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-    Card,
-    Avatar,
-    createMuiTheme,
-    makeStyles,
-    Theme,
-} from '@material-ui/core';
+import { Card, Avatar, Theme } from '@material-ui/core';
+import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import LockIcon from '@material-ui/icons/Lock';
 import { StaticContext } from 'react-router';

packages/ra-ui-materialui/src/auth/Logout.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
 import { useCallback, FunctionComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import {
-    ListItemIcon,
-    MenuItem,
-    useMediaQuery,
-    makeStyles,
-} from '@material-ui/core';
+import { ListItemIcon, MenuItem, useMediaQuery } from '@material-ui/core';
 import { MenuItemProps } from '@material-ui/core/MenuItem';
-import { Theme } from '@material-ui/core/styles';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 
 import ExitIcon from '@material-ui/icons/PowerSettingsNew';
 import classnames from 'classnames';

packages/ra-ui-materialui/src/button/Button.spec.tsx

@@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react';
 import * as React from 'react';
 import expect from 'expect';
 import { TestContext } from 'ra-core';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core/styles';
 import Button from './Button';
 
 const theme = createMuiTheme();

packages/ra-ui-materialui/src/button/Button.tsx

@@ -6,9 +6,9 @@ import {
     Tooltip,
     IconButton,
     useMediaQuery,
-    makeStyles,
     PropTypes as MuiPropTypes,
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
 import { Theme } from '@material-ui/core';
 import classnames from 'classnames';

packages/ra-ui-materialui/src/button/CloneButton.spec.tsx

@@ -1,5 +1,6 @@
 import expect from 'expect';
-import { ThemeProvider, createMuiTheme } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core/styles';
 import { cleanup, render } from '@testing-library/react';
 import * as React from 'react';
 import { createMemoryHistory } from 'history';

packages/ra-ui-materialui/src/button/CreateButton.spec.tsx

@@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react';
 import * as React from 'react';
 import expect from 'expect';
 import { TestContext } from 'ra-core';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core/styles';
 import CreateButton from './CreateButton';
 
 const invalidButtonDomProps = {

packages/ra-ui-materialui/src/button/CreateButton.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { FC, ReactElement, memo } from 'react';
 import PropTypes from 'prop-types';
-import { Fab, makeStyles, useMediaQuery, Theme } from '@material-ui/core';
+import { Fab, useMediaQuery, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import ContentAdd from '@material-ui/icons/Add';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';

packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx

@@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react';
 import * as React from 'react';
 import expect from 'expect';
 import { TestContext } from 'ra-core';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core/styles';
 import DeleteWithConfirmButton from './DeleteWithConfirmButton';
 
 const theme = createMuiTheme();

packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx

@@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react';
 import * as React from 'react';
 import expect from 'expect';
 import { TestContext } from 'ra-core';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core/styles';
 import DeleteWithUndoButton from './DeleteWithUndoButton';
 
 const theme = createMuiTheme();

packages/ra-ui-materialui/src/button/SaveButton.spec.tsx

@@ -7,7 +7,8 @@ import {
     DataProviderContext,
     DataProvider,
 } from 'ra-core';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core/styles';
 
 import SaveButton from './SaveButton';
 import { Toolbar, SimpleForm } from '../form';

packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx

@@ -9,7 +9,8 @@ import React, {
 import Downshift, { DownshiftProps } from 'downshift';
 import classNames from 'classnames';
 import get from 'lodash/get';
-import { makeStyles, TextField, Chip } from '@material-ui/core';
+import { TextField, Chip } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import {
     useInput,

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -9,7 +9,8 @@ import React, {
 } from 'react';
 import Downshift, { DownshiftProps } from 'downshift';
 import get from 'lodash/get';
-import { makeStyles, TextField } from '@material-ui/core';
+import { TextField } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import {
     useInput,

packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { FunctionComponent, isValidElement, cloneElement } from 'react';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
-import { makeStyles, MenuItem } from '@material-ui/core';
+import { MenuItem } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { MenuItemProps } from '@material-ui/core/MenuItem';
 import classnames from 'classnames';
 

packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactNode, FunctionComponent } from 'react';
-import { makeStyles, Paper, Popper } from '@material-ui/core';
+import { Paper, Popper } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(
     {

packages/ra-ui-materialui/src/input/FileInputPreview.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, ReactNode, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import RemoveCircle from '@material-ui/icons/RemoveCircle';
 import IconButton from '@material-ui/core/IconButton';
 import { useTranslate } from 'ra-core';

packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import {
-    makeStyles,
     FormControl,
     FormHelperText,
     FormLabel,
     RadioGroup,
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { RadioGroupProps } from '@material-ui/core/RadioGroup';
 import { FormControlProps } from '@material-ui/core/FormControl';
 import get from 'lodash/get';

packages/ra-ui-materialui/src/input/SearchInput.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import SearchIcon from '@material-ui/icons/Search';
-import { makeStyles, InputAdornment } from '@material-ui/core';
+import { InputAdornment } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import { useTranslate, InputProps } from 'ra-core';
 

packages/ra-ui-materialui/src/input/SelectArrayInput.tsx

@@ -8,14 +8,14 @@ import {
 } from 'react';
 import PropTypes from 'prop-types';
 import {
-    makeStyles,
     Select,
     MenuItem,
     InputLabel,
     FormHelperText,
     FormControl,
     Chip,
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import {
     FieldTitle,

packages/ra-ui-materialui/src/layout/AppBar.js

@@ -9,9 +9,10 @@ import {
     Toolbar,
     Tooltip,
     Typography,
-    makeStyles,
     useMediaQuery,
 } from '@material-ui/core';
+
+import { makeStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
 import { toggleSidebar, useTranslate } from 'ra-core';
 

packages/ra-ui-materialui/src/layout/Menu.tsx

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import { shallowEqual, useSelector } from 'react-redux';
 // @ts-ignore
 import inflection from 'inflection';
-import { makeStyles, useMediaQuery, Theme } from '@material-ui/core';
+import { useMediaQuery, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import DefaultIcon from '@material-ui/icons/ViewList';
 import classnames from 'classnames';
 import { getResources, useTranslate, Translate, ReduxState } from 'ra-core';

packages/ra-ui-materialui/src/layout/Sidebar.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { Drawer, makeStyles, useMediaQuery } from '@material-ui/core';
+import { Drawer, useMediaQuery } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import lodashGet from 'lodash/get';
 import { setSidebarVisibility } from 'ra-core';
 

packages/ra-ui-materialui/src/list/FilterButton.spec.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import expect from 'expect';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/styles';
-import { createMuiTheme } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core/styles';
 
 import FilterButton from './FilterButton';
 import TextInput from '../input/TextInput';