Add compat for usage in utils itself

.eslintignore

@@ -18,6 +18,7 @@
 /packages/material-ui-icons/legacy
 /packages/material-ui-icons/src
 /packages/material-ui-icons/templateSvgIcon.js
+/packages/material-ui-utils/macros/__fixtures__/
 # Ignore fixtures
 /packages/typescript-to-proptypes/test/*/*
 /tmp

packages/material-ui-utils/macros/MuiError.macro.d.ts

@@ -0,0 +1,3 @@
+export default class MuiError {
+  constructor(message: string);
+}

packages/material-ui-utils/macros/MuiError.macro.js

@@ -1,6 +1,7 @@
 const { createMacro, MacroError } = require('babel-plugin-macros');
 const helperModuleImports = require('@babel/helper-module-imports');
 const fs = require('fs');
+const path = require('path');
 
 function invertObject(object) {
   const inverted = {};
@@ -11,9 +12,13 @@ function invertObject(object) {
 }
 
 /**
+ * Supported imports:
+ * 1. bare specifier e.g. `'@material-ui/utils/macros/MuiError.macro'`
+ * 2. relative import from `packages/material-ui-utils/src` e.g. `'../macros/MuiError.macro'`
+ *
  * @param {import('babel-plugin-macros').MacroParams} param0
  */
-function muiError({ references, babel, config }) {
+function muiError({ references, babel, config, source }) {
   const { errorCodesPath = {}, missingError = 'annotate' } = config;
   const errorCodes = JSON.parse(fs.readFileSync(errorCodesPath, { encoding: 'utf8' }));
   const errorCodesLookup = invertObject(errorCodes);
@@ -125,13 +130,33 @@ function muiError({ references, babel, config }) {
     errorCode = parseInt(errorCode, 10);
 
     if (formatMuiErrorMessageIdentifier === null) {
-      // Outputs:
-      // import { formatMuiErrorMessage } from '@material-ui/utils';
-      formatMuiErrorMessageIdentifier = helperModuleImports.addNamed(
-        babelPath,
-        'formatMuiErrorMessage',
-        '@material-ui/utils',
-      );
+      const isBareImportSourceIdentifier = source.startsWith('@material-ui/utils');
+      if (isBareImportSourceIdentifier) {
+        // Input: import MuiError from '@material-ui/utils/macros/MuiError.macro'
+        // Outputs:
+        // import { formatMuiErrorMessage } from '@material-ui/utils';
+        formatMuiErrorMessageIdentifier = helperModuleImports.addNamed(
+          babelPath,
+          'formatMuiErrorMessage',
+          '@material-ui/utils',
+        );
+      } else {
+        const normalizedRelativeImport = path.normalize(
+          source.replace('../macros/MuiError.macro', './formatMuiErrorMessage'),
+        );
+        // 'formatMuiErrorMessage' implies './formatMuiErrorMessage' for fs paths but not for import specifiers.
+        const formatMuiErrorMessageImportSource = normalizedRelativeImport.startsWith('.')
+          ? normalizedRelativeImport
+          : `./${normalizedRelativeImport}`;
+        // Input: import MuiError from '../macros/MuiError.macro'
+        // Outputs:
+        // import formatMuiErrorMessage from './formatMuiErrorMessage';
+        formatMuiErrorMessageIdentifier = helperModuleImports.addDefault(
+          babelPath,
+          formatMuiErrorMessageImportSource,
+          { nameHint: 'formatMuiErrorMessage' },
+        );
+      }
     }
 
     // Outputs:

packages/material-ui-utils/macros/MuiError.macro.test.js

@@ -95,5 +95,13 @@ pluginTester({
         },
       },
     },
+    {
+      title: 'relative-import',
+      pluginOptions: {
+        muiError: { errorCodesPath: path.join(fixturePath, 'relative-import', 'error-codes.json') },
+      },
+      fixture: path.join(fixturePath, 'relative-import', 'input.js'),
+      output: readOutputFixtureSync('relative-import', 'output.js'),
+    },
   ],
 });

packages/material-ui-utils/macros/__fixtures__/relative-import/error-codes.json

@@ -0,0 +1,3 @@
+{
+  "1": "Material-UI: Expected valid input target.\nDid you use `inputComponent`"
+}

packages/material-ui-utils/macros/__fixtures__/relative-import/input.js

@@ -0,0 +1,3 @@
+import MuiError from '../../../macros/MuiError.macro';
+
+throw new MuiError('Material-UI: Expected valid input target.\n' + 'Did you use `inputComponent`');

packages/material-ui-utils/macros/__fixtures__/relative-import/output.js

@@ -0,0 +1,7 @@
+import _formatMuiErrorMessage from '../../formatMuiErrorMessage';
+throw new Error(
+  process.env.NODE_ENV !== 'production'
+    ? `Material-UI: Expected valid input target.
+Did you use \`inputComponent\``
+    : _formatMuiErrorMessage(1),
+);

packages/material-ui-utils/src/capitalize.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import MuiError from '../macros/MuiError.macro';
 // It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
 //