dev-utils: add missing BUI CSS

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

.changeset/every-clocks-arrive.md

@@ -0,0 +1,5 @@
+---
+'@backstage/dev-utils': patch
+---
+
+Fixed styling of the dev app by adding a lazy import of `@backstage/ui/css/styles.css`.

packages/dev-utils/package.json

@@ -44,6 +44,7 @@
     "@backstage/integration-react": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
     "@backstage/theme": "workspace:^",
+    "@backstage/ui": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "react-use": "^17.2.4"

packages/dev-utils/src/devApp/BuiCss.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2025 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 '@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/dev-utils/src/devApp/render.tsx

@@ -47,12 +47,14 @@ import {
 } from '@backstage/integration-react';
 import Box from '@material-ui/core/Box';
 import BookmarkIcon from '@material-ui/icons/Bookmark';
-import { ComponentType, PropsWithChildren, ReactNode } from 'react';
+import { ComponentType, lazy, PropsWithChildren, ReactNode } from 'react';
 import { createRoutesFromChildren, Route } from 'react-router-dom';
 import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
 import 'react-dom';
 import { SidebarLanguageSwitcher, SidebarSignOutButton } from '../components';
 
+const BuiCss = lazy(() => import('./BuiCss'));
+
 let ReactDOMPromise: Promise<
   typeof import('react-dom') | typeof import('react-dom/client')
 >;
@@ -274,6 +276,7 @@ export class DevAppBuilder {
 
     const DevApp = (
       <>
+        <BuiCss />
         <AlertDisplay />
         <OAuthRequestDialog />
         {this.rootChildren}

yarn.lock

@@ -3290,6 +3290,7 @@ __metadata:
     "@backstage/plugin-catalog-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/theme": "workspace:^"
+    "@backstage/ui": "workspace:^"
     "@material-ui/core": "npm:^4.12.2"
     "@material-ui/icons": "npm:^4.9.1"
     "@testing-library/dom": "npm:^10.0.0"