From ec6913c8e2f261e356331cd2efeef5c21e61cdcb Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <sidvishnoi8@gmail.com>
Date: Mon, 22 Feb 2021 23:18:01 +0530
Subject: [PATCH 1/5] refactor: move obvious global code to prepare()

---
 src/core/algorithms.js     |  4 +---
 src/core/biblio.js         | 17 ++++++++++-------
 src/core/data-type.js      |  4 +---
 src/core/examples.js       |  4 +---
 src/core/highlight-vars.js |  4 +---
 src/core/highlight.js      |  4 +---
 src/core/issues-notes.js   |  4 +---
 src/core/style.js          | 14 ++++++++------
 src/core/webidl.js         |  4 +---
 src/core/xref.js           | 18 ++++++++++--------
 10 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/src/core/algorithms.js b/src/core/algorithms.js
index a693248ca9..8e2d94a87a 100644
--- a/src/core/algorithms.js
+++ b/src/core/algorithms.js
@@ -7,8 +7,6 @@ import { fetchAsset } from "./text-loader.js";
 
 export const name = "core/algorithms";
 
-const cssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/algorithms.css")).default;
@@ -24,7 +22,7 @@ export async function run() {
     .forEach(li => li.classList.add("assert"));
   if (document.querySelector(".assert")) {
     const style = document.createElement("style");
-    style.textContent = await cssPromise;
+    style.textContent = await loadStyle();
     document.head.appendChild(style);
   }
 }
diff --git a/src/core/biblio.js b/src/core/biblio.js
index 77217f65ce..c13d2dd02d 100644
--- a/src/core/biblio.js
+++ b/src/core/biblio.js
@@ -18,13 +18,16 @@ export const name = "core/biblio";
 
 const bibrefsURL = new URL("https://specref.herokuapp.com/bibrefs?refs=");
 
-// Opportunistically dns-prefetch to bibref server, as we don't know yet
-// if we will actually need to download references yet.
-const link = createResourceHint({
-  hint: "dns-prefetch",
-  href: bibrefsURL.origin,
-});
-document.head.appendChild(link);
+export async function prepare() {
+  // Opportunistically dns-prefetch to bibref server, as we don't know yet
+  // if we will actually need to download references yet.
+  const link = createResourceHint({
+    hint: "dns-prefetch",
+    href: bibrefsURL.origin,
+  });
+  document.head.appendChild(link);
+}
+
 let doneResolver;
 
 /** @type {Promise<Conf['biblio']>} */
diff --git a/src/core/data-type.js b/src/core/data-type.js
index 25742a0827..aaa184b64f 100644
--- a/src/core/data-type.js
+++ b/src/core/data-type.js
@@ -9,8 +9,6 @@ import { fetchAsset } from "./text-loader.js";
 
 export const name = "core/data-type";
 
-const tooltipStylePromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/datatype.css")).default;
@@ -25,7 +23,7 @@ export async function run(conf) {
   }
 
   const style = document.createElement("style");
-  style.textContent = await tooltipStylePromise;
+  style.textContent = await loadStyle();
   document.head.appendChild(style);
 
   let section = null;
diff --git a/src/core/examples.js b/src/core/examples.js
index 7fa1a4f489..2908c0b061 100644
--- a/src/core/examples.js
+++ b/src/core/examples.js
@@ -39,8 +39,6 @@ const localizationStrings = {
 
 const l10n = getIntlData(localizationStrings);
 
-const cssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/examples.css")).default;
@@ -80,7 +78,7 @@ export async function run() {
   );
   if (!examples.length) return;
 
-  const css = await cssPromise;
+  const css = await loadStyle();
   document.head.insertBefore(
     html`<style>
       ${css}
diff --git a/src/core/highlight-vars.js b/src/core/highlight-vars.js
index 0ab8e2bc97..0a91e784f3 100644
--- a/src/core/highlight-vars.js
+++ b/src/core/highlight-vars.js
@@ -13,8 +13,6 @@ import { sub } from "./pubsubhub.js";
 
 export const name = "core/highlight-vars";
 
-const hlVarsPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/var.css")).default;
@@ -28,7 +26,7 @@ export async function run(conf) {
     return;
   }
   const styleElement = document.createElement("style");
-  styleElement.textContent = await hlVarsPromise;
+  styleElement.textContent = await loadStyle();
   styleElement.classList.add("removeOnSave");
   document.head.appendChild(styleElement);
 
diff --git a/src/core/highlight.js b/src/core/highlight.js
index 294ae9298a..00e62190ab 100644
--- a/src/core/highlight.js
+++ b/src/core/highlight.js
@@ -12,8 +12,6 @@ export const name = "core/highlight";
 
 const nextMsgId = msgIdGenerator("highlight");
 
-const ghCssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/highlight.css")).default;
@@ -101,7 +99,7 @@ export async function run(conf) {
   const promisesToHighlight = highlightables
     .filter(elem => elem.textContent.trim())
     .map(highlightElement);
-  const ghCss = await ghCssPromise;
+  const ghCss = await loadStyle();
   document.head.appendChild(
     html`<style>
       ${ghCss}
diff --git a/src/core/issues-notes.js b/src/core/issues-notes.js
index 6c97e350bc..e10ab0a11e 100644
--- a/src/core/issues-notes.js
+++ b/src/core/issues-notes.js
@@ -78,8 +78,6 @@ const localizationStrings = {
   },
 };
 
-const cssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/issues-notes.css")).default;
@@ -385,7 +383,7 @@ export async function run(conf) {
     return; // nothing to do.
   }
   const ghIssues = await fetchAndStoreGithubIssues(conf.github);
-  const css = await cssPromise;
+  const css = await loadStyle();
   const { head: headElem } = document;
   headElem.insertBefore(
     html`<style>
diff --git a/src/core/style.js b/src/core/style.js
index 5dece26b14..b085e54d5a 100644
--- a/src/core/style.js
+++ b/src/core/style.js
@@ -12,9 +12,6 @@
 import { fetchAsset } from "./text-loader.js";
 export const name = "core/style";
 
-// Opportunistically inserts the style, with the chance to reduce some FOUC
-const styleElement = insertStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/respec.css")).default;
@@ -31,8 +28,13 @@ async function insertStyle() {
   return styleElement;
 }
 
-export async function run(conf) {
-  if (conf.noReSpecCSS) {
-    (await styleElement).remove();
+export async function prepare(conf) {
+  if (!conf.noReSpecCSS) {
+    // Insert style early to reduce FOUC
+    await insertStyle();
   }
 }
+
+export async function run(_conf) {
+  /** nothing to do */
+}
diff --git a/src/core/webidl.js b/src/core/webidl.js
index e2b0f5fdaf..eecdd24f1a 100644
--- a/src/core/webidl.js
+++ b/src/core/webidl.js
@@ -367,8 +367,6 @@ export function addIDLHeader(pre) {
   addCopyIDLButton(header);
 }
 
-const cssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/webidl.css")).default;
@@ -386,7 +384,7 @@ export async function run() {
     const link = document.querySelector("head link");
     if (link) {
       const style = document.createElement("style");
-      style.textContent = await cssPromise;
+      style.textContent = await loadStyle();
       link.before(style);
     }
   }
diff --git a/src/core/xref.js b/src/core/xref.js
index aea0f7abcf..aafdaff620 100644
--- a/src/core/xref.js
+++ b/src/core/xref.js
@@ -35,14 +35,16 @@ const profiles = {
 
 export const API_URL = "https://respec.org/xref/";
 
-if (
-  !document.querySelector("link[rel='preconnect'][href='https://respec.org']")
-) {
-  const link = createResourceHint({
-    hint: "preconnect",
-    href: "https://respec.org",
-  });
-  document.head.appendChild(link);
+export function prepare() {
+  if (
+    !document.querySelector("link[rel='preconnect'][href='https://respec.org']")
+  ) {
+    const link = createResourceHint({
+      hint: "preconnect",
+      href: "https://respec.org",
+    });
+    document.head.appendChild(link);
+  }
 }
 
 /**

From 26b984e3ac3255195a6abba2fa9d21156051925c Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <sidvishnoi8@gmail.com>
Date: Mon, 22 Feb 2021 23:18:01 +0530
Subject: [PATCH 2/5] refactor(core/a11y): start importAxe early

---
 src/core/a11y.js | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/core/a11y.js b/src/core/a11y.js
index cd50a69ba8..139c3d04bd 100644
--- a/src/core/a11y.js
+++ b/src/core/a11y.js
@@ -15,13 +15,32 @@ const DISABLED_RULES = [
   "region",
 ];
 
+export async function prepare(conf) {
+  if (!conf.a11y) {
+    return;
+  }
+  conf.state[name] = {
+    axeImportPromise: importAxe(),
+  };
+}
+
 export async function run(conf) {
   if (!conf.a11y) {
     return;
   }
 
+  /** @type {typeof window.axe} */
+  let axe;
+  try {
+    axe = await conf.state[name].axeImportPromise;
+  } catch (error) {
+    const msg = `Failed to load a11y linter. ${error.msg}`;
+    showError(msg, name);
+    return;
+  }
+
   const options = conf.a11y === true ? {} : conf.a11y;
-  const violations = await getViolations(options);
+  const violations = await getViolations(axe, options);
   for (const violation of violations) {
     /**
      * We're grouping by failureSummary as it contains hints to fix the issue.
@@ -49,9 +68,10 @@ export async function run(conf) {
 }
 
 /**
+ * @param {typeof window.axe} axe
  * @param {object} opts Options as described at https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
  */
-async function getViolations(opts) {
+async function getViolations(axe, opts) {
   const { rules, ...otherOptions } = opts;
   const options = {
     rules: {
@@ -64,16 +84,6 @@ async function getViolations(opts) {
     reporter: "v1", // v1 includes a `failureSummary`
   };
 
-  let axe;
-  try {
-    axe = await importAxe();
-  } catch (error) {
-    const msg = "Failed to load a11y linter.";
-    showError(msg, name);
-    console.error(error);
-    return [];
-  }
-
   try {
     const result = await axe.run(document, options);
     return result.violations;

From a0a4f956b82280ca3eb2d5aa805078e3a74c809c Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <sidvishnoi8@gmail.com>
Date: Mon, 22 Feb 2021 23:18:01 +0530
Subject: [PATCH 3/5] refactor(core/biblio): add `biblio` to conf.state instead
 of export

---
 src/core/biblio.js        | 31 ++++++++++++-------------------
 src/core/data-cite.js     | 23 +++++++++++++----------
 src/core/render-biblio.js | 17 +++++++++++------
 src/type-helper.d.ts      |  1 +
 src/w3c/seo.js            |  7 ++++---
 5 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/core/biblio.js b/src/core/biblio.js
index c13d2dd02d..9cec7e7116 100644
--- a/src/core/biblio.js
+++ b/src/core/biblio.js
@@ -8,9 +8,6 @@
 import { biblioDB } from "./biblio-db.js";
 import { createResourceHint } from "./utils.js";
 
-/** @type {Conf['biblio']} */
-export const biblio = {};
-
 // for backward compatibity
 export { wireReference, stringifyReference } from "./render-biblio.js";
 
@@ -18,7 +15,7 @@ export const name = "core/biblio";
 
 const bibrefsURL = new URL("https://specref.herokuapp.com/bibrefs?refs=");
 
-export async function prepare() {
+export async function prepare(conf) {
   // Opportunistically dns-prefetch to bibref server, as we don't know yet
   // if we will actually need to download references yet.
   const link = createResourceHint({
@@ -26,14 +23,12 @@ export async function prepare() {
     href: bibrefsURL.origin,
   });
   document.head.appendChild(link);
-}
-
-let doneResolver;
 
-/** @type {Promise<Conf['biblio']>} */
-const done = new Promise(resolve => {
-  doneResolver = resolve;
-});
+  conf.state[name] = {
+    /** @type {Conf['biblio']} */
+    biblio: {},
+  };
+}
 
 export async function updateFromNetwork(
   refs,
@@ -65,17 +60,17 @@ export async function updateFromNetwork(
 }
 
 /**
+ * @param {Conf['biblio']} biblio
  * @param {string} key
- * @returns {Promise<BiblioData>}
+ * @returns {BiblioData}
  */
-export async function resolveRef(key) {
-  const biblio = await done;
+export function resolveRef(biblio, key) {
   if (!biblio.hasOwnProperty(key)) {
     return null;
   }
   const entry = biblio[key];
   if (entry.aliasOf) {
-    return await resolveRef(entry.aliasOf);
+    return resolveRef(biblio, entry.aliasOf);
   }
   return entry;
 }
@@ -133,12 +128,11 @@ export class Plugin {
   }
 
   async run() {
-    const finish = () => {
-      doneResolver(this.conf.biblio);
-    };
     if (!this.conf.localBiblio) {
       this.conf.localBiblio = {};
     }
+    /** @type {Conf["biblio"]} */
+    const biblio = this.conf.state[name].biblio;
     this.conf.biblio = biblio;
     const localAliases = Object.keys(this.conf.localBiblio)
       .filter(key => this.conf.localBiblio[key].hasOwnProperty("aliasOf"))
@@ -172,6 +166,5 @@ export class Plugin {
       Object.assign(biblio, data);
     }
     Object.assign(biblio, this.conf.localBiblio);
-    finish();
   }
 }
diff --git a/src/core/data-cite.js b/src/core/data-cite.js
index 1e7e34f579..e596591c11 100644
--- a/src/core/data-cite.js
+++ b/src/core/data-cite.js
@@ -9,13 +9,13 @@
  * `data-cite` to `href` attributes. `data-cite` attributes are added to markup
  * directly by the author as well as via other modules like core/xref.
  */
-import { biblio, resolveRef, updateFromNetwork } from "./biblio.js";
 import {
   refTypeFromContext,
   showError,
   showWarning,
   wrapInner,
 } from "./utils.js";
+import { resolveRef, updateFromNetwork } from "./biblio.js";
 import { sub } from "./pubsubhub.js";
 export const name = "core/data-cite";
 
@@ -26,9 +26,10 @@ export const name = "core/data-cite";
 export const THIS_SPEC = "__SPEC__";
 
 /**
+ * @param {Conf["biblio"]} biblio
  * @param {CiteDetails} citeDetails
  */
-async function getLinkProps(citeDetails) {
+function getLinkProps(biblio, citeDetails) {
   const { key, frag, path } = citeDetails;
   let href = "";
   let title = "";
@@ -37,7 +38,7 @@ async function getLinkProps(citeDetails) {
     href = document.location.href;
   } else {
     // Let's go look it up in spec ref...
-    const entry = await resolveRef(key);
+    const entry = resolveRef(biblio, key);
     if (!entry) {
       return null;
     }
@@ -156,18 +157,20 @@ export function toCiteDetails(elem) {
   return details;
 }
 
-export async function run() {
+export async function run(conf) {
+  /** @type {Conf["biblio"]} */
+  const biblio = conf.state["core/biblio"].biblio;
   /** @type {NodeListOf<HTMLElement>} */
   const elems = document.querySelectorAll(
     "dfn[data-cite]:not([data-cite='']), a[data-cite]:not([data-cite=''])"
   );
 
-  await updateBiblio([...elems]);
+  await updateBiblio(biblio, [...elems]);
 
   for (const elem of elems) {
     const originalKey = elem.dataset.cite;
     const citeDetails = toCiteDetails(elem);
-    const linkProps = await getLinkProps(citeDetails);
+    const linkProps = getLinkProps(biblio, citeDetails);
     if (linkProps) {
       linkElem(elem, linkProps, citeDetails);
     } else {
@@ -181,14 +184,14 @@ export async function run() {
 
 /**
  * Fetch and update `biblio` with entries corresponding to given elements
+ * @param {Conf["biblio"]} biblio
  * @param {HTMLElement[]} elems
  */
-async function updateBiblio(elems) {
-  const promisesForBibEntries = elems.map(toCiteDetails).map(async entry => {
-    const result = await resolveRef(entry.key);
+async function updateBiblio(biblio, elems) {
+  const bibEntries = elems.map(toCiteDetails).map(entry => {
+    const result = resolveRef(biblio, entry.key);
     return { entry, result };
   });
-  const bibEntries = await Promise.all(promisesForBibEntries);
 
   const missingBibEntries = bibEntries
     .filter(({ result }) => result === null)
diff --git a/src/core/render-biblio.js b/src/core/render-biblio.js
index 4adb2cb530..42d184db4c 100644
--- a/src/core/render-biblio.js
+++ b/src/core/render-biblio.js
@@ -3,7 +3,6 @@
 // renders the biblio data pre-processed in core/biblio
 
 import { addId, getIntlData, showError } from "./utils.js";
-import { biblio } from "./biblio.js";
 import { html } from "./import-maps.js";
 
 export const name = "core/render-biblio";
@@ -73,6 +72,8 @@ const endWithDot = endNormalizer(".");
 
 /** @param {Conf} conf */
 export function run(conf) {
+  /** @type {Conf["biblio"]} */
+  const biblio = conf.state["core/biblio"].biblio;
   const informs = Array.from(conf.informativeReferences);
   const norms = Array.from(conf.normativeReferences);
 
@@ -90,11 +91,11 @@ export function run(conf) {
   refSection.classList.add("appendix");
 
   if (norms.length) {
-    const sec = createReferencesSection(norms, l10n.norm_references);
+    const sec = createReferencesSection(biblio, norms, l10n.norm_references);
     refSection.appendChild(sec);
   }
   if (informs.length) {
-    const sec = createReferencesSection(informs, l10n.info_references);
+    const sec = createReferencesSection(biblio, informs, l10n.info_references);
     refSection.appendChild(sec);
   }
 
@@ -102,12 +103,15 @@ export function run(conf) {
 }
 
 /**
+ * @param {Conf["biblio"]} biblio
  * @param {string[]} refs
  * @param {string} title
  * @returns {HTMLElement}
  */
-function createReferencesSection(refs, title) {
-  const { goodRefs, badRefs } = groupRefs(refs.map(toRefContent));
+function createReferencesSection(biblio, refs, title) {
+  const { goodRefs, badRefs } = groupRefs(
+    refs.map(ref => toRefContent(biblio, ref))
+  );
   const uniqueRefs = getUniqueRefs(goodRefs);
 
   const refsToShow = uniqueRefs
@@ -132,10 +136,11 @@ function createReferencesSection(refs, title) {
 /**
  * returns refcontent and unique key for a reference among its aliases
  * and warns about circular references
+ * @param {Conf["biblio"]} biblio
  * @param {String} ref
  * @typedef {ReturnType<typeof toRefContent>} Ref
  */
-function toRefContent(ref) {
+function toRefContent(biblio, ref) {
   let refcontent = biblio[ref];
   let key = ref;
   const circular = new Set([key]);
diff --git a/src/type-helper.d.ts b/src/type-helper.d.ts
index 0746682bf6..4a93e945ec 100644
--- a/src/type-helper.d.ts
+++ b/src/type-helper.d.ts
@@ -121,6 +121,7 @@ interface Conf {
   localBiblio?: Record<string, BiblioData>;
   biblio: Record<string, BiblioData>;
   shortName: string;
+  state: Record<string, Record<string, any>>;
 }
 
 type ResourceHintOption = {
diff --git a/src/w3c/seo.js b/src/w3c/seo.js
index d0ad71544d..0379fba456 100644
--- a/src/w3c/seo.js
+++ b/src/w3c/seo.js
@@ -69,6 +69,9 @@ export async function run(conf) {
 }
 
 async function addJSONLDInfo(conf, doc) {
+  /** @type {Conf["biblio"]} */
+  const biblio = conf.state["core/biblio"].biblio;
+
   // Content for JSON
   const type = ["TechArticle"];
   if (conf.rdfStatus) type.push(conf.rdfStatus);
@@ -133,9 +136,7 @@ async function addJSONLDInfo(conf, doc) {
     ...conf.normativeReferences,
     ...conf.informativeReferences,
   ];
-  const citationContents = await Promise.all(
-    citationIds.map(ref => resolveRef(ref))
-  );
+  const citationContents = citationIds.map(ref => resolveRef(biblio, ref));
   jsonld.citation = citationContents
     .filter(ref => typeof ref === "object")
     .map(addRef);

From 7677b49a593158b1a6684991b6a829c2c13832d6 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <sidvishnoi8@gmail.com>
Date: Wed, 10 Mar 2021 00:09:48 +0530
Subject: [PATCH 4/5] load styles earlier in prepare() to avoid FOUC

---
 src/core/algorithms.js     | 25 +++++++++++++++----------
 src/core/data-type.js      | 24 ++++++++++++++----------
 src/core/highlight-vars.js | 26 +++++++++++++++++---------
 src/core/highlight.js      | 17 +++++++++++------
 src/core/issues-notes.js   | 18 ++++++++++--------
 5 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/src/core/algorithms.js b/src/core/algorithms.js
index 8e2d94a87a..9dbec98025 100644
--- a/src/core/algorithms.js
+++ b/src/core/algorithms.js
@@ -7,12 +7,11 @@ import { fetchAsset } from "./text-loader.js";
 
 export const name = "core/algorithms";
 
-async function loadStyle() {
-  try {
-    return (await import("text!../../assets/algorithms.css")).default;
-  } catch {
-    return fetchAsset("algorithms.css");
-  }
+export async function prepare() {
+  const style = document.createElement("style");
+  style.id = "respec-css-algorithms";
+  style.textContent = await loadStyle();
+  document.head.appendChild(style);
 }
 
 export async function run() {
@@ -20,9 +19,15 @@ export async function run() {
   elements
     .filter(li => li.textContent.trim().startsWith("Assert: "))
     .forEach(li => li.classList.add("assert"));
-  if (document.querySelector(".assert")) {
-    const style = document.createElement("style");
-    style.textContent = await loadStyle();
-    document.head.appendChild(style);
+  if (!document.querySelector(".assert")) {
+    document.getElementById("respec-css-algorithms").remove();
+  }
+}
+
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/algorithms.css")).default;
+  } catch {
+    return fetchAsset("algorithms.css");
   }
 }
diff --git a/src/core/data-type.js b/src/core/data-type.js
index aaa184b64f..60011482c9 100644
--- a/src/core/data-type.js
+++ b/src/core/data-type.js
@@ -9,12 +9,12 @@ import { fetchAsset } from "./text-loader.js";
 
 export const name = "core/data-type";
 
-async function loadStyle() {
-  try {
-    return (await import("text!../../assets/datatype.css")).default;
-  } catch {
-    return fetchAsset("datatype.css");
-  }
+export async function prepare(conf) {
+  if (!conf.highlightVars) return;
+  const style = document.createElement("style");
+  style.id = "respec-css-data-type";
+  style.textContent = await loadStyle();
+  document.head.appendChild(style);
 }
 
 export async function run(conf) {
@@ -22,10 +22,6 @@ export async function run(conf) {
     return;
   }
 
-  const style = document.createElement("style");
-  style.textContent = await loadStyle();
-  document.head.appendChild(style);
-
   let section = null;
   const varMap = new Map();
   /** @type {NodeListOf<HTMLElement>} */
@@ -44,3 +40,11 @@ export async function run(conf) {
     if (type) varElem.dataset.type = type;
   }
 }
+
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/datatype.css")).default;
+  } catch {
+    return fetchAsset("datatype.css");
+  }
+}
diff --git a/src/core/highlight-vars.js b/src/core/highlight-vars.js
index 0a91e784f3..8a51f61adf 100644
--- a/src/core/highlight-vars.js
+++ b/src/core/highlight-vars.js
@@ -13,22 +13,22 @@ import { sub } from "./pubsubhub.js";
 
 export const name = "core/highlight-vars";
 
-async function loadStyle() {
-  try {
-    return (await import("text!../../assets/var.css")).default;
-  } catch {
-    return fetchAsset("var.css");
+export async function prepare(conf) {
+  if (!conf.highlightVars) {
+    return;
   }
+
+  const style = document.createElement("style");
+  style.id = "respec-css-highlight-vars";
+  style.textContent = await loadStyle();
+  style.classList.add("removeOnSave");
+  document.head.appendChild(style);
 }
 
 export async function run(conf) {
   if (!conf.highlightVars) {
     return;
   }
-  const styleElement = document.createElement("style");
-  styleElement.textContent = await loadStyle();
-  styleElement.classList.add("removeOnSave");
-  document.head.appendChild(styleElement);
 
   document
     .querySelectorAll("var")
@@ -40,6 +40,14 @@ export async function run(conf) {
   });
 }
 
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/var.css")).default;
+  } catch {
+    return fetchAsset("var.css");
+  }
+}
+
 function highlightListener(ev) {
   ev.stopPropagation();
   const { target: varElem } = ev;
diff --git a/src/core/highlight.js b/src/core/highlight.js
index 00e62190ab..dd7b73569d 100644
--- a/src/core/highlight.js
+++ b/src/core/highlight.js
@@ -79,6 +79,15 @@ async function sendHighlightRequest(code, languages) {
   });
 }
 
+export async function prepare(conf) {
+  if (conf.noHighlightCSS) return;
+
+  const style = html`<style id="respec-css-highlight">
+    ${await loadStyle()}
+  </style>`;
+  document.head.appendChild(style);
+}
+
 export async function run(conf) {
   // Nothing to highlight
   if (conf.noHighlightCSS) return;
@@ -94,16 +103,12 @@ export async function run(conf) {
   );
   // Nothing to highlight
   if (!highlightables.length) {
+    document.getElementById("respec-css-highlight").remove();
     return;
   }
   const promisesToHighlight = highlightables
     .filter(elem => elem.textContent.trim())
     .map(highlightElement);
-  const ghCss = await loadStyle();
-  document.head.appendChild(
-    html`<style>
-      ${ghCss}
-    </style>`
-  );
+
   await Promise.all(promisesToHighlight);
 }
diff --git a/src/core/issues-notes.js b/src/core/issues-notes.js
index e10ab0a11e..67f69d29a6 100644
--- a/src/core/issues-notes.js
+++ b/src/core/issues-notes.js
@@ -375,22 +375,24 @@ async function fetchAndStoreGithubIssues(github) {
   return new Map(Object.entries(issues));
 }
 
+export async function prepare() {
+  document.head.insertBefore(
+    html`<style id="respec-css-issues-notes">
+      ${await loadStyle()}
+    </style>`,
+    document.head.querySelector("link")
+  );
+}
+
 export async function run(conf) {
   const query = ".issue, .note, .warning, .ednote";
   /** @type {NodeListOf<HTMLElement>} */
   const issuesAndNotes = document.querySelectorAll(query);
   if (!issuesAndNotes.length) {
+    document.getElementById("respec-css-issues-notes").remove();
     return; // nothing to do.
   }
   const ghIssues = await fetchAndStoreGithubIssues(conf.github);
-  const css = await loadStyle();
-  const { head: headElem } = document;
-  headElem.insertBefore(
-    html`<style>
-      ${css}
-    </style>`,
-    headElem.querySelector("link")
-  );
   handleIssues(issuesAndNotes, ghIssues, conf);
   const ednotes = document.querySelectorAll(".ednote");
   ednotes.forEach(ednote => {

From f7d0c6e1035d9cada1020c2210dbfef6a9e4a401 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <sidvishnoi8@gmail.com>
Date: Wed, 10 Mar 2021 00:10:39 +0530
Subject: [PATCH 5/5] webidl: load style early in prepare(), remove some
 redundant* logic

---
 src/core/webidl.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/core/webidl.js b/src/core/webidl.js
index eecdd24f1a..ae8637eceb 100644
--- a/src/core/webidl.js
+++ b/src/core/webidl.js
@@ -375,19 +375,20 @@ async function loadStyle() {
   }
 }
 
+export async function prepare() {
+  document.querySelector("head link, head :last-child").before(
+    html`<style id="respec-css-webidl">
+      ${await loadStyle()}
+    </style>`
+  );
+}
+
 export async function run() {
   const idls = document.querySelectorAll("pre.idl, pre.webidl");
   if (!idls.length) {
+    document.getElementById("respec-css-webidl").remove();
     return;
   }
-  if (!document.querySelector(".idl:not(pre), .webidl:not(pre)")) {
-    const link = document.querySelector("head link");
-    if (link) {
-      const style = document.createElement("style");
-      style.textContent = await loadStyle();
-      link.before(style);
-    }
-  }
 
   const astArray = [...idls].map(renderWebIDL);