web: consistent style declarations internally (#9077)

* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: consistency pass

While investigating the viability of applying purgeCSS to Patternfly4, in order
to reduce the weight of our CSS, I found these four locations in our code (all
of them *my changes*, darnit), in which our usual `styles` declaration pattern
was inconsistent with our own standards. The LibraryPageImpl change would have
been too intrusive to make fully compliant. The objective here is to ensure that
our objects have *predictable* internal layouts for ease of future maintenance.

web/src/user/LibraryPage/ApplicationEmptyState.ts

@@ -1,5 +1,4 @@
 import { docLink } from "@goauthentik/common/global";
-import { adaptCSS } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import { paramURL } from "@goauthentik/elements/router/RouterOutlet";
 
@@ -20,23 +19,23 @@ import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
  * administrator, provide a link to the "Create a new application" page.
  */
 
-const styles = adaptCSS([
-    PFBase,
-    PFEmptyState,
-    PFButton,
-    PFContent,
-    PFSpacing,
-    css`
-        .cta {
-            display: inline-block;
-            font-weight: bold;
-        }
-    `,
-]);
-
 @customElement("ak-library-application-empty-list")
 export class LibraryPageApplicationEmptyList extends AKElement {
-    static styles = styles;
+    static get styles() {
+        return [
+            PFBase,
+            PFEmptyState,
+            PFButton,
+            PFContent,
+            PFSpacing,
+            css`
+                .cta {
+                    display: inline-block;
+                    font-weight: bold;
+                }
+            `,
+        ];
+    }
 
     @property({ attribute: "isadmin", type: Boolean })
     isAdmin = false;

web/src/user/LibraryPage/ApplicationList.ts

@@ -31,22 +31,22 @@ const LAYOUTS = new Map<string, [string, string]>([
     ],
 ]);
 
-const styles = [
-    PFBase,
-    PFEmptyState,
-    PFContent,
-    PFGrid,
-    css`
-        .app-group-header {
-            margin-bottom: 1em;
-            margin-top: 1.2em;
-        }
-    `,
-];
-
 @customElement("ak-library-application-list")
 export class LibraryPageApplicationList extends AKElement {
-    static styles = styles;
+    static get styles() {
+        return [
+            PFBase,
+            PFEmptyState,
+            PFContent,
+            PFGrid,
+            css`
+                .app-group-header {
+                    margin-bottom: 1em;
+                    margin-top: 1.2em;
+                }
+            `,
+        ];
+    }
 
     @property({ attribute: true })
     layout = "row" as LayoutType;

web/src/user/LibraryPage/ApplicationSearch.ts

@@ -18,24 +18,26 @@ import { customEvent } from "./helpers";
 
 @customElement("ak-library-list-search")
 export class LibraryPageApplicationList extends AKElement {
-    static styles = [
-        PFBase,
-        PFDisplay,
-        css`
-            input {
-                width: 30ch;
-                box-sizing: border-box;
-                border: 0;
-                border-bottom: 1px solid;
-                border-bottom-color: var(--ak-accent);
-                background-color: transparent;
-                font-size: 1.5rem;
-            }
-            input:focus {
-                outline: 0;
-            }
-        `,
-    ];
+    static get styles() {
+        return [
+            PFBase,
+            PFDisplay,
+            css`
+                input {
+                    width: 30ch;
+                    box-sizing: border-box;
+                    border: 0;
+                    border-bottom: 1px solid;
+                    border-bottom-color: var(--ak-accent);
+                    background-color: transparent;
+                    font-size: 1.5rem;
+                }
+                input:focus {
+                    outline: 0;
+                }
+            `,
+        ];
+    }
 
     @property({ attribute: false })
     set apps(value: Application[]) {

web/src/user/LibraryPage/LibraryPageImpl.ts

@@ -35,7 +35,9 @@ import type { AppGroupList, PageUIConfig } from "./types";
 
 @customElement("ak-library-impl")
 export class LibraryPage extends AKElement {
-    static styles = styles;
+    static get styles() {
+        return styles;
+    }
 
     @property({ attribute: "isadmin", type: Boolean })
     isAdmin = false;