web: Fix issue where reusing stylesheets can trigger Safari crash.

web/src/common/stylesheets.ts

@@ -92,9 +92,6 @@ export function normalizeCSSSource(input: StyleSheetInit): CSSResultOrNative {
     return input;
 }
 
-/**
- * Create a `CSSStyleSheet` from the given input.
- */
 export function createStyleSheetUnsafe(input: StyleSheetInit): CSSStyleSheet {
     const result = normalizeCSSSource(input);
     if (result instanceof CSSStyleSheet) return result;
@@ -111,82 +108,41 @@ export function createStyleSheetUnsafe(input: StyleSheetInit): CSSStyleSheet {
     return result.styleSheet;
 }
 
-/**
- * A symbol to indicate that a stylesheet has been adopted by a style parent.
- *
- * @remarks
- * Safari considers stylesheet removed from the `adoptedStyleSheets` array
- * ready for garbage collection. Reuse of the stylesheet will result in tab-crash.
- *
- * Always discard the stylesheet after use.
- */
-const StyleSheetAdoptedParent = Symbol("stylesheet-adopted");
-
-/**
- * A CSS style sheet that has been adopted by a style parent.
- */
-export interface AdoptedStyleSheet extends CSSStyleSheet {
-    [StyleSheetAdoptedParent]: WeakRef<StyleSheetParent>;
-}
-
-/**
- * Type-predicate to determine if a given stylesheet has been adopted.
- */
-export function isAdoptedStyleSheet(styleSheet: CSSStyleSheet): styleSheet is AdoptedStyleSheet {
-    if (!(StyleSheetAdoptedParent in styleSheet)) return false;
-
-    return styleSheet[StyleSheetAdoptedParent] instanceof WeakRef;
-}
-
 /**
  * Append stylesheet(s) to the given roots.
- *
- * @see {@linkcode removeStyleSheet} to remove a stylesheet from a given roots.
  */
 export function appendStyleSheet(
-    styleParent: StyleSheetParent,
+    insertions: CSSStyleSheet | Iterable<CSSStyleSheet>,
-    ...insertions: CSSStyleSheet[]
+    ...styleParents: StyleSheetParent[]
 ): void {
     insertions = Array.isArray(insertions) ? insertions : [insertions];
 
-    for (const styleSheetInsertion of insertions) {
+    for (const nextStyleSheet of insertions) {
-        if (isAdoptedStyleSheet(styleSheetInsertion)) {
+        for (const styleParent of styleParents) {
-            console.warn("Attempted to append adopted stylesheet", {
+            if (styleParent.adoptedStyleSheets.includes(nextStyleSheet)) return;
-                styleSheetInsertion,
-                currentParent: styleSheetInsertion[StyleSheetAdoptedParent]?.deref(),
-                rules: serializeStyleSheet(styleSheetInsertion),
-            });
 
-            throw new TypeError("Attempted to append a previously adopted stylesheet");
+            styleParent.adoptedStyleSheets = [...styleParent.adoptedStyleSheets, nextStyleSheet];
         }
-
-        if (styleParent.adoptedStyleSheets.includes(styleSheetInsertion)) return;
-
-        styleParent.adoptedStyleSheets = [...styleParent.adoptedStyleSheets, styleSheetInsertion];
-
-        Object.assign(styleSheetInsertion, {
-            [StyleSheetAdoptedParent]: new WeakRef(styleParent),
-        });
     }
 }
 
 /**
  * Remove a stylesheet from the given roots, matching by referential equality.
- *
- * @see {@linkcode appendStyleSheet} to append a stylesheet to a given roots.
  */
 export function removeStyleSheet(
-    styleParent: StyleSheetParent,
+    currentStyleSheet: CSSStyleSheet,
-    ...removals: CSSStyleSheet[]
+    ...styleParents: StyleSheetParent[]
 ): void {
+    for (const styleParent of styleParents) {
         const nextAdoptedStyleSheets = styleParent.adoptedStyleSheets.filter(
-        (styleSheet) => !removals.includes(styleSheet),
+            (styleSheet) => styleSheet !== currentStyleSheet,
         );
 
         if (nextAdoptedStyleSheets.length === styleParent.adoptedStyleSheets.length) return;
 
         styleParent.adoptedStyleSheets = nextAdoptedStyleSheets;
     }
+}
 
 /**
  * Serialize a stylesheet to a string.

web/src/elements/Base.ts

@@ -7,14 +7,7 @@ import {
     removeStyleSheet,
     resolveStyleSheetParent,
 } from "@goauthentik/common/stylesheets";
-import {
+import { ResolvedUITheme, createUIThemeEffect, resolveUITheme } from "@goauthentik/common/theme";
-    CSSColorSchemeValue,
-    ResolvedUITheme,
-    UIThemeListener,
-    createUIThemeEffect,
-    formatColorScheme,
-    resolveUITheme,
-} from "@goauthentik/common/theme";
 import { type ThemedElement } from "@goauthentik/common/theme";
 
 import { localized } from "@lit/localize";
@@ -25,15 +18,18 @@ import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import OneDark from "@goauthentik/common/styles/one-dark.css";
 import ThemeDark from "@goauthentik/common/styles/theme-dark.css";
 
-import { UiThemeEnum } from "@goauthentik/api";
+import { CurrentBrand, UiThemeEnum } from "@goauthentik/api";
 
 // Re-export the theme helpers
 export { rootInterface } from "@goauthentik/common/theme";
 
+export interface AKElementInit {
+    brand?: Partial<CurrentBrand>;
+    styleParents?: StyleSheetParent[];
+}
+
 @localized()
 export class AKElement extends LitElement implements ThemedElement {
-    //#region Properties
-
     /**
      * The resolved theme of the current element.
      *
@@ -49,20 +45,6 @@ export class AKElement extends LitElement implements ThemedElement {
     })
     public activeTheme: ResolvedUITheme;
 
-    //#endregion
-
-    //#region Private Properties
-
-    readonly #preferredColorScheme: CSSColorSchemeValue;
-
-    #customCSSStyleSheet: CSSStyleSheet | null;
-    #darkThemeStyleSheet: CSSStyleSheet | null = null;
-    #themeAbortController: AbortController | null = null;
-
-    //#endregion
-
-    //#region Lifecycle
-
     protected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {
         // Ensure all style sheets being passed are really style sheets.
         const baseStyles: StyleSheetInit[] = [AKGlobal, OneDark];
@@ -79,62 +61,67 @@ export class AKElement extends LitElement implements ThemedElement {
         return [styles, ...baseStyles].map(createStyleSheetUnsafe);
     }
 
-    constructor() {
+    constructor(init?: AKElementInit) {
         super();
 
-        const { brand } = globalAK();
+        const config = globalAK();
+        const { brand = config.brand, styleParents = [] } = init || {};
 
-        this.#preferredColorScheme = formatColorScheme(brand.uiTheme);
         this.activeTheme = resolveUITheme(brand?.uiTheme);
+        this.#styleParents = styleParents;
 
         this.#customCSSStyleSheet = brand?.brandingCustomCss
             ? createStyleSheetUnsafe(brand.brandingCustomCss)
             : null;
     }
 
+    #styleParents: StyleSheetParent[] = [];
+    #customCSSStyleSheet: CSSStyleSheet | null;
+    #darkThemeStyleSheet: CSSStyleSheet | null = null;
+
+    #themeAbortController: AbortController | null = null;
+
     public disconnectedCallback(): void {
         super.disconnectedCallback();
         this.#themeAbortController?.abort();
     }
 
-    #styleRoot?: StyleSheetParent;
-
-    #dispatchTheme: UIThemeListener = (nextUITheme) => {
-        if (!this.#styleRoot) return;
-
-        if (nextUITheme === UiThemeEnum.Dark) {
-            this.#darkThemeStyleSheet ||= createStyleSheetUnsafe(ThemeDark);
-            appendStyleSheet(this.#styleRoot, this.#darkThemeStyleSheet);
-            this.activeTheme = UiThemeEnum.Dark;
-        } else if (this.#darkThemeStyleSheet) {
-            removeStyleSheet(this.#styleRoot, this.#darkThemeStyleSheet);
-            this.#darkThemeStyleSheet = null;
-            this.activeTheme = UiThemeEnum.Light;
-        }
-    };
-
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         const renderRoot = super.createRenderRoot();
-        this.#styleRoot = resolveStyleSheetParent(renderRoot);
+
+        const styleRoot = resolveStyleSheetParent(renderRoot);
+        const styleParents = Array.from(
+            new Set<StyleSheetParent>([styleRoot, ...this.#styleParents]),
+        );
 
         if (this.#customCSSStyleSheet) {
             console.debug(`authentik/element[${this.tagName.toLowerCase()}]: Adding custom CSS`);
 
-            appendStyleSheet(this.#styleRoot, this.#customCSSStyleSheet);
+            styleRoot.adoptedStyleSheets = [
+                ...styleRoot.adoptedStyleSheets,
+                this.#customCSSStyleSheet,
+            ];
         }
 
         this.#themeAbortController = new AbortController();
 
-        if (this.#preferredColorScheme === "dark") {
+        createUIThemeEffect(
-            this.#dispatchTheme(UiThemeEnum.Dark);
+            (currentUITheme) => {
-        } else if (this.#preferredColorScheme === "auto") {
+                if (currentUITheme === UiThemeEnum.Dark) {
-            createUIThemeEffect(this.#dispatchTheme, {
+                    this.#darkThemeStyleSheet ||= createStyleSheetUnsafe(ThemeDark);
-                signal: this.#themeAbortController.signal,
+
-            });
+                    appendStyleSheet(this.#darkThemeStyleSheet, ...styleParents);
+                } else if (this.#darkThemeStyleSheet) {
+                    removeStyleSheet(this.#darkThemeStyleSheet, ...styleParents);
+                    this.#darkThemeStyleSheet = null;
                 }
+                this.activeTheme = currentUITheme;
+            },
+            {
+                signal: this.#themeAbortController.signal,
+            },
+        );
 
         return renderRoot;
     }
-
-    //#endregion
 }

web/src/elements/Interface/Interface.ts

@@ -5,7 +5,7 @@ import {
 } from "@goauthentik/common/stylesheets";
 import { ThemedElement } from "@goauthentik/common/theme";
 import { UIConfig } from "@goauthentik/common/ui/config";
-import { AKElement } from "@goauthentik/elements/Base";
+import { AKElement, AKElementInit } from "@goauthentik/elements/Base";
 import { VersionContextController } from "@goauthentik/elements/Interface/VersionContextController";
 import { ModalOrchestrationController } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
 
@@ -19,6 +19,7 @@ import { BrandContextController } from "./BrandContextController";
 import { ConfigContextController } from "./ConfigContextController";
 import { EnterpriseContextController } from "./EnterpriseContextController";
 
+const brandContext = Symbol("brandContext");
 const configContext = Symbol("configContext");
 const modalController = Symbol("modalController");
 const versionContext = Symbol("versionContext");
@@ -26,6 +27,8 @@ const versionContext = Symbol("versionContext");
 export abstract class Interface extends AKElement implements ThemedElement {
     protected static readonly PFBaseStyleSheet = createStyleSheetUnsafe(PFBase);
 
+    [brandContext]: BrandContextController;
+
     [configContext]: ConfigContextController;
 
     [modalController]: ModalOrchestrationController;
@@ -36,15 +39,19 @@ export abstract class Interface extends AKElement implements ThemedElement {
     @state()
     public brand?: CurrentBrand;
 
-    constructor() {
+    constructor({ styleParents = [], ...init }: AKElementInit = {}) {
-        super();
         const styleParent = resolveStyleSheetParent(document);
 
+        super({
+            ...init,
+            styleParents: [styleParent, ...styleParents],
+        });
+
         this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
 
-        appendStyleSheet(styleParent, Interface.PFBaseStyleSheet);
+        appendStyleSheet(Interface.PFBaseStyleSheet, styleParent);
 
-        this.addController(new BrandContextController(this));
+        this[brandContext] = new BrandContextController(this);
         this[configContext] = new ConfigContextController(this);
         this[modalController] = new ModalOrchestrationController(this);
     }
@@ -70,8 +77,8 @@ export class AuthenticatedInterface extends Interface implements AkAuthenticated
     @state()
     public version?: Version;
 
-    constructor() {
+    constructor(init?: AKElementInit) {
-        super();
+        super(init);
 
         this[enterpriseContext] = new EnterpriseContextController(this);
         this[versionContext] = new VersionContextController(this);

web/src/elements/PageHeader.ts

@@ -89,7 +89,6 @@ export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavb
                     --ak-brand-background-color: var(
                         --pf-c-page__sidebar--m-light--BackgroundColor
                     );
-                    --host-navbar-height: var(--ak-c-page-header--height, 7.5rem);
                 }
 
                 :host([theme="dark"]) {
@@ -106,6 +105,7 @@ export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavb
 
                     display: flex;
                     flex-direction: row;
+                    min-height: 6rem;
 
                     display: grid;
                     row-gap: var(--pf-global--spacer--sm);
@@ -116,10 +116,6 @@ export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavb
                         "brand toggle primary secondary"
                         "brand toggle description secondary";
 
-                    @media (min-width: 426px) {
-                        height: var(--host-navbar-height);
-                    }
-
                     @media (max-width: 768px) {
                         row-gap: var(--pf-global--spacer--xs);
 
@@ -165,15 +161,7 @@ export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavb
 
                     &.page-description {
                         grid-area: description;
-                        margin-block-end: var(--pf-global--spacer--md);
+                        padding-block-end: var(--pf-global--spacer--md);
-
-                        display: box;
-                        display: -webkit-box;
-                        line-clamp: 2;
-                        -webkit-line-clamp: 2;
-                        box-orient: vertical;
-                        -webkit-box-orient: vertical;
-                        overflow: hidden;
 
                         @media (max-width: 425px) {
                             display: none;

web/src/elements/tests/utils.ts

@@ -1,7 +1,6 @@
 import {
     appendStyleSheet,
     assertAdoptableStyleSheetParent,
-    createStyleSheetUnsafe,
 } from "@goauthentik/common/stylesheets.js";
 
 import { TemplateResult, render as litRender } from "lit";
@@ -16,6 +15,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 export const render = (body: TemplateResult) => {
     assertAdoptableStyleSheetParent(document);
 
-    appendStyleSheet(document, ...[PFBase, AKGlobal].map(createStyleSheetUnsafe));
+    appendStyleSheet([PFBase, AKGlobal], document);
     return litRender(body, document.body);
 };