First stab at detecting the Safari adopted style sheet bug (#121)

* Don't throw if the browser doesn't support the modern `adoptedStyleSheets` API

* Partially addresses #120

Author: DmitrySharabin

src/util/detect-bugs.js

@@ -1,7 +1,8 @@
 import TRANSITIONRUN_EVENT_LOOP from "./detect-bugs/transitionrun-loop.js";
 import UNREGISTERED_TRANSITION from "./detect-bugs/unregistered-transition.js";
+import ADOPTED_STYLE_SHEET from "./detect-bugs/adopted-style-sheet.js";
 
-export const detectors = { TRANSITIONRUN_EVENT_LOOP, UNREGISTERED_TRANSITION };
+export const detectors = { TRANSITIONRUN_EVENT_LOOP, UNREGISTERED_TRANSITION, ADOPTED_STYLE_SHEET };
 
 /**
  * Data structure for all detected bugs.
@@ -17,6 +18,13 @@ for (let bug in detectors) {
 	let detector = detectors[bug];
 	Object.defineProperty(bugs, bug, {
 		get () {
+			if (detector.value !== undefined) {
+				delete detector.valuePending;
+				delete this[bug];
+
+				return (this[bug] = detector.value);
+			}
+
 			detector.valuePending.then(value => {
 				delete this[bug];
 				this[bug] = value;

src/util/detect-bugs/adopted-style-sheet.js

@@ -0,0 +1,57 @@
+import gentleRegisterProperty from "../gentle-register-property.js";
+
+/**
+ * Detect if the browser is affected by the Safari adopted style sheet bug:
+ * removing a CSS custom property from an adopted stylesheet in a ShadowRoot
+ * does not update the computed value as expected and doesn't trigger a transition.
+ * @returns {{value: boolean, valuePending: boolean}}
+ */
+export default {
+	get value () {
+		let dummy = document.createElement("div");
+		document.body.append(dummy);
+		dummy.attachShadow({ mode: "open" });
+
+		if (Object.isFrozen(dummy.shadowRoot.adoptedStyleSheets)) {
+			// The browser doesn't support the modern adoptedStyleSheets API, i.e., it is not affected by the bug
+			dummy.remove();
+			delete this.value;
+
+			return (this.value = false);
+		}
+
+		gentleRegisterProperty("--style-observer-adopted-style-sheet-bug", {
+			syntax: "<number>",
+			inherits: true,
+			initialValue: 0,
+		});
+
+		let sheet = new CSSStyleSheet();
+		sheet.insertRule(`
+			:host {
+				/* This declaration shouldn't be empty for the bug to trigger */
+				color: transparent;
+			}
+		`);
+
+		dummy.shadowRoot.adoptedStyleSheets.push(sheet);
+		let style = sheet.cssRules[0].style;
+
+		style.setProperty("--style-observer-adopted-style-sheet-bug", "1");
+		let cs = getComputedStyle(dummy);
+		let oldValue = cs.getPropertyValue("--style-observer-adopted-style-sheet-bug");
+
+		style.removeProperty("--style-observer-adopted-style-sheet-bug");
+		cs = getComputedStyle(dummy);
+		let newValue = cs.getPropertyValue("--style-observer-adopted-style-sheet-bug");
+
+		dummy.remove();
+		delete this.value;
+
+		return (this.value = oldValue === newValue);
+	},
+	get valuePending () {
+		delete this.valuePending;
+		return this.value;
+	},
+};