theme: fix v5 prefix tree shaking

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/lovely-hats-pay.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Internal refactor to fix an issue where the MUI 5 `v5-` class prefixing gets removed by tree shaking.

packages/theme/src/unified/MuiClassNameSetup.ts

@@ -1,24 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-/**
- * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 Material UI components from `@mui/*`
- */
-ClassNameGenerator.configure(componentName => {
-  return `v5-${componentName}`;
-});

packages/theme/src/unified/UnifiedThemeProvider.test.tsx

@@ -22,7 +22,6 @@ import { useTheme as useV5Theme } from '@mui/material/styles';
 import { makeStyles as makeV5Styles } from '@mui/styles';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import './MuiClassNameSetup';
 import { UnifiedThemeProvider } from './UnifiedThemeProvider';
 import { themes } from './themes';
 

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -15,7 +15,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import './MuiClassNameSetup';
 import { CssBaseline } from '@material-ui/core';
 import {
   ThemeProvider,
@@ -29,6 +28,7 @@ import {
   Theme as Mui5Theme,
 } from '@mui/material/styles';
 import { UnifiedTheme } from './types';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
 
 /**
  * Props for {@link UnifiedThemeProvider}.
@@ -41,10 +41,19 @@ export interface UnifiedThemeProviderProps {
   noCssBaseline?: boolean;
 }
 
+/**
+ * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 Material UI components from `@mui/*`.
+ *
+ * This call needs to be in the same module as the `UnifiedThemeProvider` to ensure that it doesn't get removed by tree shaking
+ */
+ClassNameGenerator.configure(componentName => {
+  return `v5-${componentName}`;
+});
+
 // Background at https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5
 // Rather than disabling globals and custom seed, we instead only set a production prefix that
-// won't collide with Material UI 5 styles. We've already got a separate class name generator for v5 set
-// up in MuiClassNameSetup.ts, so only the production JSS needs deduplication.
+// won't collide with Material UI 5 styles. We've already got the separate class name generator
+// for v5 set up in just above, so only the production JSS needs deduplication.
 const generateV4ClassName = createGenerateClassName({
   productionPrefix: 'jss4-',
 });