Lazily load BUI CSS in createDevApp

Move the BUI stylesheet into a lazily rendered helper so importing frontend-dev-utils no longer triggers global CSS side effects.

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

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;

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(),
+    <Suspense fallback={null}>
+      <BuiCss />
+      {AppRoot}
+    </Suspense>,
   );
 }