[ClassNameGenerator] Prevent all base imports

[siriwatknp]

Fix #30011 (comment)

BREAKING CHANGE

unstable_ClassNameGenerator has been moved from utils to className folder to prevent all MUI Base module imports. Please update the import in your project if you use this module:

- import { unstable_ClassNameGenerator } from '@mui/material/utils';
+ import { unstable_ClassNameGenerator } from '@mui/material/className';

Note: the usage does not change.

Root cause

import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/utils";
// `@mui/material/utils` > createSvgIcon > SvgIcon > @mui/base
// at this point the whole '@mui/base' has been parsed
// `badgeClasses` is parsed before the below `configure` fn, that's why the prefix is `Mui` even though the App has not been parsed yet.

ClassNameGenerator.configure((componentName) =>
  componentName.replace("Mui", "Foo")
);

import App from './App';

<App />

To fix this, the import must be specific and must not include any base components. So I move unstable_ClassNameGenerator to its own folder:

import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/className";

In the future, if we want to do anything related to className we can put them in this folder. If we continue to use utils folder, there might be a regression in the future if we forgot about this.

Note

Not sure why CodeSandbox does not work but it works locally (by pulling from CodeSandbox built)

Further questions

• Should it throw an error for the current import from @mui/material/utils so it leads people to import from @mui/material/className instead?

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: +0.10% , gzip: +0.16%

Generated by 🚫 dangerJS against c8fa5db

[mnajdova]

Should it throw an error for the current import from @mui/material/utils so it leads people to import from @mui/material/className instead?

Yes, it is unstable API so we can play around. My proposal would be to show a meaningful message containing the new import people should make.

[siriwatknp]

@mnajdova decided to do the same with base & joy (moved to folder className) so all the packages are consistent. Also, warning was added if importing from utils folder.

[mnajdova]

Please add a breaking change sectio in the PR description, so that we don't forget to include it in the changelog of the release.