diff --git a/.changeset/vast-jeans-boil.md b/.changeset/vast-jeans-boil.md deleted file mode 100644 index 7fbc49cdfa..0000000000 --- a/.changeset/vast-jeans-boil.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -'@backstage/create-app': minor -'@backstage/theme': minor ---- - -Separates MUI 5 class name generator code into separate file and entry point that can be imported before any MUI 5 component loads. - -This addresses the problem where the elements contain the `v5-` prefix for MUI class names, but the static class names from the library do not. - -Import should be made as follows to ensure the prefix problem is addressed correctly: - -```diff -// packages/app/src/index.tsx - -+ import '@backstage/theme/MuiClassNameSetup'; // must be the very first import! -import '@backstage/cli/asset-types'; -import ReactDOM from 'react-dom/client'; -import app from './App'; -import '@backstage/ui/css/styles.css'; - -ReactDOM.createRoot(document.getElementById('root')!).render(app); -``` diff --git a/packages/app-legacy/src/index.tsx b/packages/app-legacy/src/index.tsx index d7699e3d9d..05dcc024bf 100644 --- a/packages/app-legacy/src/index.tsx +++ b/packages/app-legacy/src/index.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import '@backstage/theme/MuiClassNameSetup'; import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import App from './App'; diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index 873670de0f..fd86261385 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import '@backstage/theme/MuiClassNameSetup'; import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import app from './App'; diff --git a/packages/create-app/templates/default-app/packages/app/src/index.tsx b/packages/create-app/templates/default-app/packages/app/src/index.tsx index 3cc56c886c..46f31902f4 100644 --- a/packages/create-app/templates/default-app/packages/app/src/index.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/index.tsx @@ -1,4 +1,3 @@ -import '@backstage/theme/MuiClassNameSetup'; import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import App from './App'; diff --git a/packages/create-app/templates/next-app/packages/app/src/index.tsx b/packages/create-app/templates/next-app/packages/app/src/index.tsx index 6936ff50bc..ac9e52bdc1 100644 --- a/packages/create-app/templates/next-app/packages/app/src/index.tsx +++ b/packages/create-app/templates/next-app/packages/app/src/index.tsx @@ -1,4 +1,3 @@ -import '@backstage/theme/MuiClassNameSetup'; import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import App from './App'; diff --git a/packages/theme/package.json b/packages/theme/package.json index fe272bcf1c..e95ae20b36 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -6,7 +6,9 @@ "role": "web-library" }, "publishConfig": { - "access": "public" + "access": "public", + "main": "dist/index.esm.js", + "types": "dist/index.d.ts" }, "keywords": [ "backstage" @@ -18,25 +20,7 @@ "directory": "packages/theme" }, "license": "Apache-2.0", - "sideEffects": [ - "./src/unified/MuiClassNameSetup.ts", - "./dist/MuiClassNameSetup.*" - ], - "exports": { - ".": "./src/index.ts", - "./MuiClassNameSetup": "./src/unified/MuiClassNameSetup.ts", - "./package.json": "./package.json" - }, - "typesVersions": { - "*": { - "MuiClassNameSetup": [ - "src/unified/MuiClassNameSetup.ts" - ], - "package.json": [ - "package.json" - ] - } - }, + "sideEffects": false, "main": "src/index.ts", "types": "src/index.ts", "files": [ diff --git a/packages/theme/report-MuiClassNameSetup.api.md b/packages/theme/report-MuiClassNameSetup.api.md deleted file mode 100644 index c05c3c72a8..0000000000 --- a/packages/theme/report-MuiClassNameSetup.api.md +++ /dev/null @@ -1,7 +0,0 @@ -## API Report File for "@backstage/theme" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts -// (No @packageDocumentation comment for this package) -``` diff --git a/packages/theme/src/unified/MuiClassNameSetup.ts b/packages/theme/src/unified/MuiClassNameSetup.ts deleted file mode 100644 index b069394838..0000000000 --- a/packages/theme/src/unified/MuiClassNameSetup.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright 2026 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/*`. - * - * This needs to be configured before any MUI 5 component can possibly be imported. See: https://v5.mui.com/material-ui/experimental-api/classname-generator/#caveat - * - * ```diff - * // packages/app/src/index.tsx - * - * + import '@backstage/theme/MuiClassNameSetup'; // must be the very first import! - * import '@backstage/cli/asset-types'; - * import ReactDOM from 'react-dom/client'; - * import app from './App'; - * import '@backstage/ui/css/styles.css'; - * - * ReactDOM.createRoot(document.getElementById('root')!).render(app); - * ``` - */ -ClassNameGenerator.configure(componentName => { - return componentName.startsWith('v5-') - ? componentName - : `v5-${componentName}`; -}); - -export {}; diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 678be82209..69d843ed3e 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import './MuiClassNameSetup'; import { ReactNode } from 'react'; import { ThemeProvider, @@ -28,6 +27,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,6 +41,15 @@ export interface UnifiedThemeProviderProps { themeName?: string; } +/** + * 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 the separate class name generator