[docs] Recommend no-restricted-imports to catch treeshake issues

.eslintrc.js

@@ -41,6 +41,12 @@ module.exports = {
     // Airbnb use error
     'no-param-reassign': 'off',
     'no-prototype-builtins': 'off',
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['@material-ui/*/*/*', '!@material-ui/core/test-utils/*'],
+      },
+    ],
     'nonblock-statement-body-position': 'error',
     // Airbnb restricts isNaN and isFinite which are necessary for IE 11
     // we have to be disciplined about the usage and ensure the Number type for its
@@ -55,7 +61,6 @@ module.exports = {
     'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want.
 
     'material-ui/docgen-ignore-before-comment': 'error',
-    'material-ui/restricted-path-imports': 'error',
 
     // This rule is great for raising people awareness of what a key is and how it works.
     'react/no-array-index-key': 'off',

docs/src/pages/customization/typography/ResponsiveFontSizesChart.js

@@ -1,5 +1,7 @@
-/* eslint-disable material-ui/restricted-path-imports */
 import React from 'react';
+// import of a small, pure module in a private demo
+// bundle size and module duplication is negligible
+/* eslint-disable-next-line no-restricted-imports */
 import { convertLength } from '@material-ui/core/styles/cssUtils';
 import { makeStyles, createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
 import {

docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -71,6 +71,21 @@ import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
 //                                               ^^^^^^^^^^^^ 3rd level
 ```
 
+If you're using `eslint` you can catch problematic imports with the [`no-restricted-imports` rule](https://eslint.org/docs/rules/no-restricted-imports). The following `.eslintrc` configuration will highlight problematic imports from `@material-ui` packages:
+
+```json
+{
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"]
+      }
+    ]
+  }
+}
+```
+
 ### Option 2
 
 This option provides the best User Experience and Developer Experience:

packages/eslint-plugin-material-ui/README.md

@@ -7,7 +7,7 @@ Custom eslint rules for Material-UI.
 - `disallow-active-element-as-key-event-target`
 - `docgen-ignore-before-comment`
 - `no-hardcoded-labels`
-- `restricted-path-imports`
+- ~~`restricted-path-imports`~~
 
 ### disallow-active-element-as-key-event-target
 
@@ -26,4 +26,17 @@ The docs are translated via crowdin, we prefer to use `t` from the redux store.
 
 ### restricted-path-imports
 
-Prevent the import of modules at a level depth strictly over 1.
+Removed in favor of [`no-restricted-imports`](https://eslint.org/docs/rules/no-restricted-imports) using the following configuration:
+
+```json
+{
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"]
+      }
+    ]
+  }
+}
+```

packages/eslint-plugin-material-ui/src/index.js

@@ -3,5 +3,4 @@ module.exports.rules = {
   'disallow-active-element-as-key-event-target': require('./rules/disallow-active-element-as-key-event-target'),
   'docgen-ignore-before-comment': require('./rules/docgen-ignore-before-comment'),
   'no-hardcoded-labels': require('./rules/no-hardcoded-labels'),
-  'restricted-path-imports': require('./rules/restricted-path-imports'),
 };