web: Fix imports when in compatibility mode. (cherry-pick #25526 to version-2026.8) (#25529)

web: Fix imports when in compatibility mode. (#25526)

Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>

web/bundler/style-loader-plugin/node.js

@@ -113,6 +113,31 @@ export function styleLoaderPlugin({
                 };
             });
 
+            /**
+             * Handle plain `.css` text imports, i.e. a component's `static styles`.
+             *
+             * These bypass ESBuild's CSS pipeline entirely, so their authored source —
+             * native nesting included — reaches ShadyCSS verbatim. Lower the nesting
+             * here for the same reason the bundled path does.
+             *
+             * @see {@linkcode CSSNamespace.Bundled} for the rationale.
+             */
+            build.onLoad({ filter: /\.css$/, namespace: "file" }, async (args) => {
+                const cssContent = await readFile(args.path, "utf8");
+
+                const { code } = await build.esbuild.transform(cssContent, {
+                    loader: "css",
+                    minify: build.initialOptions.minify || false,
+                    supported: { nesting: false },
+                    logLevel: "silent",
+                });
+
+                return {
+                    contents: code,
+                    loader: "text",
+                };
+            });
+
             /**
              * Handle `with { type: "bundled-text" }` imports.
              *

web/src/flow/stages/identification/styles.css

@@ -1,5 +1,4 @@
-fieldset[name="login-sources"],
-ak-stage-identification.style-scope fieldset[name="login-sources"] {
+fieldset[name="login-sources"] {
     --ak-c-login-sources-padding-inline: var(--pf-global--spacer--xl);
 
     flex: 1 1 auto;

web/src/polyfill/index.entrypoint.ts

@@ -1,6 +1,6 @@
 // sort-imports-ignore
 import "@webcomponents/webcomponentsjs";
-import "lit/polyfill-support.js";
+import "lit-element/polyfill-support.js";
 import "./custom-elements-get-name.js";
 import "core-js/actual";
 import "@formatjs/intl-listformat/polyfill.js";