refactor(core): route ReSpec's own style injection through insertStyle

src/core/algorithms.js

@@ -4,6 +4,7 @@ Currently used only for adding 'assert' class to algorithm lists
 */
 import css from "../styles/algorithms.css.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 
 export const name = "core/algorithms";
 
@@ -32,7 +33,5 @@ export function run() {
     }
   }
 
-  const style = document.createElement("style");
-  style.textContent = css;
-  document.head.appendChild(style);
+  insertStyle(css);
 }

src/core/caniuse.js

@@ -11,6 +11,7 @@ import { codedJoinAnd, docLink, showError, showWarning } from "./utils.js";
 import { pub, sub } from "./pubsubhub.js";
 import css from "../styles/caniuse.css.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 
 export const name = "core/caniuse";
 
@@ -59,14 +60,10 @@ export function prepare(conf) {
     return; // no feature to show
   }
 
-  document.head.appendChild(
-    html`<style
-      id="caniuse-stylesheet"
-      class="${options.removeOnSave ? "removeOnSave" : ""}"
-    >
-      ${css}
-    </style>`
-  );
+  insertStyle(css, {
+    id: "caniuse-stylesheet",
+    className: options.removeOnSave ? "removeOnSave" : "",
+  });
 }
 /**
  * @param {string} browser

src/core/cddl.js

@@ -14,6 +14,7 @@ import {
 import { addHashId, showError, showWarning, xmlEscape } from "./utils.js";
 import { createCopyButton, injectCopyScript } from "./clipboard.js";
 import css from "../styles/cddl.css.js";
+import { insertStyle } from "./insert-style.js";
 import { registerDefinition } from "./dfn-map.js";
 import { sub } from "./pubsubhub.js";
 
@@ -703,14 +704,9 @@ export async function run() {
   if (!cddls.length) return;
 
   // Inject CSS
-  const style = document.createElement("style");
-  style.textContent = css;
-  const styleAnchor = document.querySelector("head link, head > *:last-child");
-  if (styleAnchor) {
-    styleAnchor.before(style);
-  } else {
-    document.head.append(style);
-  }
+  insertStyle(css, {
+    before: document.querySelector("head link, head > *:last-child"),
+  });
 
   // Import cddlparser via import-maps (avoids fs/path imports in main entry)
   const parse = (/** @type {string} */ text) => {

src/core/data-type.js

@@ -6,6 +6,7 @@
  * Set `conf.highlightVars = true` to enable.
  */
 import css from "../styles/datatype.css.js";
+import { insertStyle } from "./insert-style.js";
 
 export const name = "core/data-type";
 
@@ -17,9 +18,7 @@ export function run(conf) {
     return;
   }
 
-  const style = document.createElement("style");
-  style.textContent = css;
-  document.head.appendChild(style);
+  insertStyle(css);
 
   let section = null;
   const varMap = new Map();

src/core/dfn-index.js

@@ -10,6 +10,7 @@ import { biblio } from "./biblio.js";
 import css from "../styles/dfn-index.css.js";
 import { getTermFromElement } from "./xref.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 import { renderInlineCitation } from "./render-biblio.js";
 import { sub } from "./pubsubhub.js";
 import { toCiteDetails } from "./data-cite.js";
@@ -103,9 +104,7 @@ export function run() {
     return;
   }
 
-  const styleEl = document.createElement("style");
-  styleEl.textContent = css;
-  document.head.appendChild(styleEl);
+  insertStyle(css);
 
   index.classList.add("appendix");
   if (!index.querySelector("h2, h1")) {

src/core/dfn-panel.js

@@ -5,17 +5,13 @@
 import css from "../styles/dfn-panel.css.js";
 import { fetchBase } from "./text-loader.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 import { norm } from "./utils.js";
 
 export const name = "core/dfn-panel";
 
 export async function run() {
-  document.head.insertBefore(
-    html`<style>
-      ${css}
-    </style>`,
-    document.querySelector("link")
-  );
+  insertStyle(css, { before: document.querySelector("link") });
 
   /** @type {NodeListOf<HTMLElement>} */
   const elems = document.querySelectorAll(

src/core/examples.js

@@ -9,6 +9,7 @@
 import { addId, getIntlData } from "./utils.js";
 import css from "../styles/examples.css.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 
 export const name = "core/examples";
 
@@ -75,12 +76,7 @@ export function run() {
   );
   if (!examples.length) return;
 
-  document.head.insertBefore(
-    html`<style>
-      ${css}
-    </style>`,
-    document.querySelector("link")
-  );
+  insertStyle(css, { before: document.querySelector("link") });
 
   let number = 0;
   examples.forEach(example => {

src/core/highlight-vars.js

@@ -9,6 +9,7 @@
  */
 import css from "../styles/var.css.js";
 import { fetchBase } from "./text-loader.js";
+import { insertStyle } from "./insert-style.js";
 import { sub } from "./pubsubhub.js";
 
 export const name = "core/highlight-vars";
@@ -21,9 +22,7 @@ export async function run(conf) {
     return;
   }
 
-  const styleElement = document.createElement("style");
-  styleElement.textContent = css;
-  document.head.appendChild(styleElement);
+  insertStyle(css);
 
   const script = document.createElement("script");
   script.id = "respec-highlight-vars";

src/core/highlight.js

@@ -5,7 +5,7 @@
  * Performs syntax highlighting to all pre and code elements.
  */
 import css from "../styles/highlight.css.js";
-import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 import { msgIdGenerator } from "./utils.js";
 import { workerPromise } from "./worker.js";
 export const name = "core/highlight";
@@ -107,10 +107,6 @@ export async function run(conf) {
   const promisesToHighlight = highlightables
     .filter(elem => elem.textContent.trim())
     .map(highlightElement);
-  document.head.appendChild(
-    html`<style>
-      ${css}
-    </style>`
-  );
+  insertStyle(css);
   await Promise.all(promisesToHighlight);
 }

src/core/implementation-status.js

@@ -12,6 +12,7 @@ import { docLink, fetchAndCache, showWarning } from "./utils.js";
 import { pub, sub } from "./pubsubhub.js";
 import css from "../styles/implementation-status.css.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 
 export const name = "core/implementation-status";
 
@@ -165,14 +166,10 @@ export function prepare(conf) {
   const options = /** @type {ImplementationStatusOptions} */ (
     conf.implementationStatus
   );
-  document.head.appendChild(
-    html`<style
-      id="baseline-stylesheet"
-      class="${options.removeOnSave ? "removeOnSave" : ""}"
-    >
-      ${css}
-    </style>`
-  );
+  insertStyle(css, {
+    id: "baseline-stylesheet",
+    className: options.removeOnSave ? "removeOnSave" : "",
+  });
 }
 
 /** @param {RespecConfig} conf */

src/core/insert-style.js

@@ -0,0 +1,28 @@
+// @ts-check
+// Module core/insert-style
+// One place where ReSpec adds its own `<style>` elements to the head.
+
+export const name = "core/insert-style";
+
+/**
+ * Add one of ReSpec's stylesheets to the head.
+ *
+ * @param {string} css
+ * @param {object} [options]
+ * @param {string} [options.id] when something needs to find the element again
+ * @param {string} [options.className]
+ * @param {Element|null} [options.before] insert ahead of this node; a null anchor appends
+ * @returns {HTMLStyleElement} the inserted element
+ */
+export function insertStyle(css, { id, className, before } = {}) {
+  const style = document.createElement("style");
+  if (id) style.id = id;
+  // Explicit undefined check: `style.className = undefined` would serialize as
+  // `class="undefined"`, and callers pass "" to mean "no classes".
+  if (className !== undefined) style.className = className;
+  style.textContent = css;
+  // Insert through `head` rather than `before.before(style)`, which would let the anchor
+  // choose the parent and put ReSpec's CSS in the body for an anchor that lives there.
+  document.head.insertBefore(style, before ?? null);
+  return style;
+}

src/core/issues-notes.js

@@ -14,6 +14,7 @@
 import { addId, getIntlData, showError, showWarning } from "./utils.js";
 import css from "../styles/issues-notes.css.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 export const name = "core/issues-notes";
 
 const localizationStrings = {
@@ -404,13 +405,7 @@ export async function run(conf) {
       conf.github ?? null
     )
   );
-  const { head: headElem } = document;
-  headElem.insertBefore(
-    html`<style>
-      ${css}
-    </style>`,
-    headElem.querySelector("link")
-  );
+  insertStyle(css, { before: document.head.querySelector("link") });
   handleIssues(issuesAndNotes, ghIssues, conf);
   const ednotes = document.querySelectorAll(".ednote");
   ednotes.forEach(ednote => {

src/core/mdn-annotation.js

@@ -2,6 +2,7 @@
 import { docLink, fetchAndCache, getIntlData, showError } from "./utils.js";
 import css from "../styles/mdn-annotation.css.js";
 import { html } from "./import-maps.js";
+import { insertStyle } from "./insert-style.js";
 
 export const name = "core/mdn-annotation";
 
@@ -152,9 +153,7 @@ export async function run(conf) {
     return;
   }
 
-  const style = document.createElement("style");
-  style.textContent = css;
-  document.head.append(style);
+  insertStyle(css);
 
   for (const elem of findElements(mdnSpecJson)) {
     const mdnSpecArray = mdnSpecJson[elem.id];

src/core/style.js

@@ -12,22 +12,10 @@
 export const name = "core/style";
 
 import css from "../styles/respec.css.js";
+import { insertStyle } from "./insert-style.js";
 
 // Opportunistically inserts the style to reduce some FOUC.
-/** @type {HTMLStyleElement} */
-const styleElement = insertStyle();
-
-/**
- * Inserts the ReSpec CSS as a `style` element into the document's `head`.
- * @return {HTMLStyleElement} The `style` element that was inserted.
- */
-function insertStyle() {
-  const styleElement = document.createElement("style");
-  styleElement.id = "respec-mainstyle";
-  styleElement.textContent = css;
-  document.head.appendChild(styleElement);
-  return styleElement;
-}
+const styleElement = insertStyle(css, { id: "respec-mainstyle" });
 
 /**
  * Removes the ReSpec CSS if the `noReSpecCSS` configuration option is `true`.

src/core/ui.js

@@ -11,21 +11,13 @@
 import { html, pluralize } from "./import-maps.js";
 import { reindent, xmlEscape } from "./utils.js";
 import css from "../styles/ui.css.js";
+import { insertStyle } from "./insert-style.js";
 import { markdownToHtml } from "./markdown.js";
 import { sub } from "./pubsubhub.js";
 export const name = "core/ui";
 
 // Opportunistically inserts the style, with the chance to reduce some FOUC
-insertStyle();
-
-function insertStyle() {
-  const styleElement = document.createElement("style");
-  styleElement.id = "respec-ui-styles";
-  styleElement.textContent = css;
-  styleElement.classList.add("removeOnSave");
-  document.head.appendChild(styleElement);
-  return styleElement;
-}
+insertStyle(css, { id: "respec-ui-styles", className: "removeOnSave" });
 
 /**
  * @param {Element | null | undefined} elem

src/core/webidl.js

@@ -16,6 +16,7 @@ import { decorateDfn, findDfn } from "./dfn-finder.js";
 import { html, webidl2 } from "./import-maps.js";
 import { addCopyIDLButton } from "./webidl-clipboard.js";
 import css from "../styles/webidl.css.js";
+import { insertStyle } from "./insert-style.js";
 import { registerDefinition } from "./dfn-map.js";
 
 export const name = "core/webidl";
@@ -384,9 +385,9 @@ export async function run() {
   if (!idls.length) {
     return;
   }
-  const style = document.createElement("style");
-  style.textContent = css;
-  document.querySelector("head link, head > *:last-child").before(style);
+  insertStyle(css, {
+    before: document.querySelector("head link, head > *:last-child"),
+  });
 
   const astArray = [...idls].map(renderWebIDL);