web: Fix application of global styles in style roots. (#17444)

* web: Separate global styles from element roots.

* web: Flesh out style strategy plugin, fixes for imported styles.

* web: Clean up applying of dark theme.

web: unminify.

* web: Fix alignment, rendering on high contrast.

web: Apply footer resize.

web: Fix application of global styles in style roots.

web: Fix missing layout attribute.

web: Normalize background alignment.

web: Fix layout issues, color overrides.

web: Fix alignment, colors, jank.

web: Separate method into function.

web: Clean up alignment, reflow.

web: Fix colors, compatibility mode.

web: Add content left/right support.

web: Fix colors, compatibility mode overrides.

* Fix issue where missing config throws runtime error.

* web: Refactor.

* Update tests.

* web: Fix Storybook imports.

* Fix order of theme application.

* web: Fix storybook asset paths.

* web: Flesh out tests surrounding source buttons, fix alignment,
contrast.

* Update tests, clarify errors.

* Update test selectors, assertions.

* Clarify redirect handling.

* Adjust user check.

* Update logs.

* web: Fix selector timing.

* Fix alignment.

* Fix selectors, timing.

* Log current URL content.

* Refine shadow selector, add delay.

* Replace IDs with named elements.

* Fix overlay color.

* Fix footer padding.

* Fix contrast.

* Add selectable name to button.

* Fix alignment, mobile layout.

* web: Spread exported parts to stages.

* Fix z-index order.

* Tidy colors, behaviors, layout.

* Fix overflow scroll.

* Clean up duplicate color styles.

* Clarify selector order. Fix overrides, color contrast.

* Attempt to read JSON multiple times.

* Clarify error.

* web: Fix timeouts, URL changes.

* web: Fix disabled styles.

* Fix color flip.

* Fix selector.

* Fix issue where hidden tables will alter test URLs.

* Use DOM to look for connection, rather than API. Update selectors.

* Immediately navigate to tab.

* Upgrade Dex.

* Ensure Dex redirects.

* Use same host during tests.

* web: Update package-lock.json

* Add delay.

web/scripts/build-web.mjs

@@ -13,6 +13,7 @@ import * as path from "node:path";
  * @import { BuildOptions } from "esbuild";
  */
 import { mdxPlugin } from "#bundler/mdx-plugin/node";
+import { styleLoaderPlugin } from "#bundler/style-loader-plugin/node";
 import { createBundleDefinitions } from "#bundler/utils/node";
 import { ConsoleLogger } from "#logger/node";
 import { DistDirectory, EntryPoint, PackageRoot } from "#paths/node";
@@ -53,10 +54,14 @@ const BASE_ESBUILD_OPTIONS = {
     legalComments: "external",
     splitting: true,
     treeShaking: true,
-    external: ["*.woff", "*.woff2"],
     tsconfig: path.resolve(PackageRoot, "tsconfig.build.json"),
     loader: {
         ".css": "text",
+        ".woff": "file",
+        ".woff2": "file",
+        ".jpg": "file",
+        ".png": "file",
+        ".svg": "file",
     },
     plugins: [
         copy({
@@ -65,19 +70,6 @@ const BASE_ESBUILD_OPTIONS = {
                     from: path.join(path.dirname(EntryPoint.StandaloneLoading.in), "startup", "**"),
                     to: path.dirname(EntryPoint.StandaloneLoading.out),
                 },
-
-                {
-                    from: path.join(patternflyPath, "patternfly.min.css"),
-                    to: ".",
-                },
-                {
-                    from: path.join(patternflyPath, "assets", "**"),
-                    to: "./assets",
-                },
-                {
-                    from: path.resolve(PackageRoot, "src", "common", "styles", "**"),
-                    to: ".",
-                },
                 {
                     from: path.resolve(PackageRoot, "src", "assets", "images", "**"),
                     to: "./assets/images",
@@ -88,6 +80,7 @@ const BASE_ESBUILD_OPTIONS = {
                 },
             ],
         }),
+        styleLoaderPlugin(),
         mdxPlugin({
             root: MonoRepoRoot,
         }),
@@ -170,7 +163,6 @@ async function doWatch() {
 
     const buildContext = await esbuild.context(buildOptions);
 
-    await buildContext.rebuild();
     await buildContext.watch();
 
     const httpURL = new URL("http://localhost");
@@ -256,8 +248,7 @@ await cleanDistDirectory()
             .then(() => {
                 process.exit(0);
             })
-            .catch((error) => {
-                logger.error(error);
+            .catch(() => {
                 process.exit(1);
             }),
     );