diff --git a/packages/frontend-dev-utils/src/BuiCss.tsx b/packages/frontend-dev-utils/src/BuiCss.tsx new file mode 100644 index 0000000000..d5ece19b71 --- /dev/null +++ b/packages/frontend-dev-utils/src/BuiCss.tsx @@ -0,0 +1,25 @@ +/* + * 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. + */ + +// This ensures that dev apps always have the BUI CSS loaded. +// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend +import '@backstage/ui/css/styles.css'; + +/** + * Placeholder component to allow lazy loading of the BUI CSS import. This + * ensures that we don't load the CSS as soon as anyone imports this package. + */ +export default () => null; diff --git a/packages/frontend-dev-utils/src/createDevApp.tsx b/packages/frontend-dev-utils/src/createDevApp.tsx index 294b360040..7ec34b929b 100644 --- a/packages/frontend-dev-utils/src/createDevApp.tsx +++ b/packages/frontend-dev-utils/src/createDevApp.tsx @@ -14,9 +14,6 @@ * limitations under the License. */ -// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend -import '@backstage/ui/css/styles.css'; - import { FrontendFeature, FrontendFeatureLoader, @@ -24,6 +21,7 @@ import { import { createApp, CreateAppOptions } from '@backstage/frontend-defaults'; import appPlugin from '@backstage/plugin-app'; import ReactDOM from 'react-dom/client'; +import { Suspense, lazy } from 'react'; type AppPluginWithSimpleOverrides = { withOverrides(options: { extensions: unknown[] }): FrontendFeature; @@ -40,6 +38,8 @@ const appPluginOverride = ( ], }); +const BuiCss = lazy(() => import('./BuiCss')); + /** * Options for {@link createDevApp}. * @@ -78,8 +78,12 @@ export function createDevApp(options: CreateDevAppOptions): void { features: devFeatures, }; const app = createApp(appOptions); + const AppRoot = app.createRoot(); ReactDOM.createRoot(document.getElementById('root')!).render( - app.createRoot(), + + + {AppRoot} + , ); }