web: revise CSS handling for esbuild

Replace some ad-hoc css mangling with the `unsafeCSS()` function as recommended
by Lit.  This also streamlines a bit of the CSS handling so that it's not calling
`ensure` multiple times.

The worst part of this is understanding just how much of this mangling is really
here to keep Storybook happy.

web/package-lock.json

@@ -17059,6 +17059,7 @@
         },
         "node_modules/tree-sitter-json": {
             "version": "0.20.2",
+            "hasInstallScript": true,
             "license": "MIT",
             "optional": true,
             "dependencies": {
@@ -17067,6 +17068,7 @@
         },
         "node_modules/tree-sitter-yaml": {
             "version": "0.5.0",
+            "hasInstallScript": true,
             "license": "MIT",
             "optional": true,
             "dependencies": {

web/src/common/utils.ts

@@ -1,6 +1,6 @@
 import { SentryIgnoredError } from "@goauthentik/common/errors";
 
-import { CSSResult, css } from "lit";
+import { CSSResult, css, unsafeCSS } from "lit";
 
 export function getCookie(name: string): string {
     let cookieValue = "";
@@ -123,7 +123,7 @@ const isCSSResult = (v: unknown): v is CSSResult =>
 
 // prettier-ignore
 export const _adaptCSS = (sheet: AdaptableStylesheet): CSSStyleSheet =>
-    (typeof sheet === "string" ? css([sheet] as unknown as TemplateStringsArray, ...[]).styleSheet
+    (typeof sheet === "string" ? unsafeCSS(sheet).styleSheet
         : isCSSResult(sheet) ? sheet.styleSheet
         : sheet) as CSSStyleSheet;
 

web/src/elements/utils/ensureCSSStyleSheet.ts

@@ -1,8 +1,32 @@
 import { CSSResult, unsafeCSS } from "lit";
 
-export const ensureCSSStyleSheet = (css: string | CSSStyleSheet | CSSResult): CSSStyleSheet =>
-    typeof css === "string"
-        ? (unsafeCSS(css).styleSheet as CSSStyleSheet)
-        : css instanceof CSSResult
-          ? (css.styleSheet as CSSStyleSheet)
-          : css;
+export const supportsAdoptingStyleSheets: boolean =
+  window.ShadowRoot &&
+  (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
+  'adoptedStyleSheets' in Document.prototype &&
+  'replace' in CSSStyleSheet.prototype;
+
+
+function stringToStyleSheet(css: string) {
+    if (supportsAdoptingStyleSheets) {
+        const sheet = unsafeCSS(css).styleSheet;
+        return sheet as CSSStyleSheet;
+    }
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    return sheet;
+}
+
+
+export const ensureCSSStyleSheet = (css: string | CSSStyleSheet | CSSResult): CSSStyleSheet | CSSResult => {
+    if (css instanceof CSSResult) {
+        return css;
+    }
+
+    if (typeof css === "string") {
+        return stringToStyleSheet(css);
+    }
+
+    return css;
+}