FF bug workaround: set style element code in page context

fixes #461

content/apply.js

@@ -299,13 +299,19 @@
         // HTML document style; also works on HTML-embedded SVG
         el = document.createElement('style');
       }
-      Object.assign(el, {
+      el.id = id;
-        id,
+      el.type = 'text/css';
-        type: 'text/css',
-        textContent: code,
-      });
       // SVG className is not a string, but an instance of SVGAnimatedString
       el.classList.add('stylus');
+      if (!CHROME && (
+        // FF bug workaround, see https://github.com/openstyles/stylus/issues/461
+        location.hostname === 'www.barclaycardus.com' ||
+        location.hostname === 'www.icloud.com'
+      )) {
+        setContentsInPageContext(el, code);
+      } else {
+        el.textContent = code;
+      }
       addStyleElement(el);
     }
     styleElements.set(id, el);
@@ -313,6 +319,18 @@
     return el;
   }
 
+  function setContentsInPageContext(el, code) {
+    const originalId = el.id;
+    el.id += performance.now();
+    // when adding to ROOT we don't want our observer to pop up so we use a DIV wrapper
+    (document.head || ROOT.appendChild(document.createElement('div'))).appendChild(el);
+    (document.head || ROOT).appendChild(document.createElement('script')).text = `
+      document.currentScript.remove();
+      document.getElementById('${el.id}').textContent = ${JSON.stringify(code)};`;
+    if (!document.head) el.parentNode.remove();
+    el.id = originalId;
+  }
+
   function addStyleElement(newElement) {
     if (!ROOT) {
       return;
@@ -443,7 +461,6 @@
   function initDocRootObserver() {
     let lastRestorationTime = 0;
     let restorationCounter = 0;
-    let scheduledSort = false;
     let observing = false;
     let sorting = false;
     let observer;
@@ -504,24 +521,13 @@
         return true;
       }
     }
-    function sortStyleElements({force} = {}) {
+    function sortStyleElements() {
-      if (!observing ||
+      if (!observing) return;
-          !force && scheduledSort) {
-        return;
-      }
-      scheduledSort = false;
       let prevExpected = document.documentElement.lastElementChild;
       while (prevExpected && isSkippable(prevExpected, true)) {
         prevExpected = prevExpected.previousElementSibling;
       }
-      if (!prevExpected) {
+      if (!prevExpected) return;
-        return;
-      }
-      if (!CHROME && !force && window !== top) {
-        requestAnimationFrame(() => sortStyleElements({force: true}));
-        scheduledSort = true;
-        return;
-      }
       for (const el of styleElements.values()) {
         if (!isMovable(el)) {
           continue;