From 702fa7d17cc34c8d5c414529e21f7c1b775d9316 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 16 May 2024 11:32:58 +0200
Subject: [PATCH] theme: fix v5 prefix tree shaking

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/lovely-hats-pay.md                 |  5 ++++
 .../theme/src/unified/MuiClassNameSetup.ts    | 24 -------------------
 .../src/unified/UnifiedThemeProvider.test.tsx |  1 -
 .../src/unified/UnifiedThemeProvider.tsx      | 15 +++++++++---
 4 files changed, 17 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/lovely-hats-pay.md
 delete mode 100644 packages/theme/src/unified/MuiClassNameSetup.ts

diff --git a/.changeset/lovely-hats-pay.md b/.changeset/lovely-hats-pay.md
new file mode 100644
index 0000000000..117f50e5db
--- /dev/null
+++ b/.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.
diff --git a/packages/theme/src/unified/MuiClassNameSetup.ts b/packages/theme/src/unified/MuiClassNameSetup.ts
deleted file mode 100644
index 5d7e0b26fe..0000000000
--- a/packages/theme/src/unified/MuiClassNameSetup.ts
+++ /dev/null
@@ -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}`;
-});
diff --git a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx b/packages/theme/src/unified/UnifiedThemeProvider.test.tsx
index da4af5abab..98fc73505d 100644
--- a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx
+++ b/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';
 
diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx
index 35abbe57d8..465a4dda24 100644
--- a/packages/theme/src/unified/UnifiedThemeProvider.tsx
+++ b/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-',
 });