From b29a856a70da66e6812d45c8616b86885c25269d Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 15 Oct 2025 12:15:47 +0200
Subject: [PATCH] dev-utils: add missing BUI CSS

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/every-clocks-arrive.md        |  5 +++++
 packages/dev-utils/package.json          |  1 +
 packages/dev-utils/src/devApp/BuiCss.tsx | 23 +++++++++++++++++++++++
 packages/dev-utils/src/devApp/render.tsx |  5 ++++-
 yarn.lock                                |  1 +
 5 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/every-clocks-arrive.md
 create mode 100644 packages/dev-utils/src/devApp/BuiCss.tsx

diff --git a/.changeset/every-clocks-arrive.md b/.changeset/every-clocks-arrive.md
new file mode 100644
index 0000000000..d2061913e3
--- /dev/null
+++ b/.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`.
diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json
index 9540f79c9e..b6696f56c2 100644
--- a/packages/dev-utils/package.json
+++ b/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"
diff --git a/packages/dev-utils/src/devApp/BuiCss.tsx b/packages/dev-utils/src/devApp/BuiCss.tsx
new file mode 100644
index 0000000000..4a0a730a90
--- /dev/null
+++ b/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;
diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx
index b3f8388009..0d063084f7 100644
--- a/packages/dev-utils/src/devApp/render.tsx
+++ b/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}
diff --git a/yarn.lock b/yarn.lock
index 9c96dcf272..118e1d3ed8 100644
--- a/yarn.lock
+++ b/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"