ref: better add global style func

src/components/BytmDialog.ts

@@ -1,7 +1,6 @@
-import { addGlobalStyle } from "@sv443-network/userutils";
 // hoist the class declaration because either rollup or babel is being a hoe
 import { NanoEmitter } from "../utils/NanoEmitter";
-import { clearInner, getResourceUrl, warn } from "../utils";
+import { addStyle, clearInner, getResourceUrl, warn } from "../utils";
 import { t } from "../utils/translations";
 import { emitInterface } from "../interface";
 import "./BytmDialog.css";
@@ -91,11 +90,11 @@ export class BytmDialog extends NanoEmitter<{
 
     this.attachListeners(bgElem);
 
-    addGlobalStyle(`\
+    addStyle(`\
 #bytm-${this.id}-dialog-bg {
   --bytm-dialog-width-max: ${this.options.maxWidth}px;
   --bytm-dialog-height-max: ${this.options.maxHeight}px;
-}`).id = `bytm-style-dialog-${this.id}`;
+}`, `dialog-${this.id}`);
 
     this.events.emit("render");
     return bgElem;

src/features/layout.ts

@@ -1,8 +1,8 @@
-import { addGlobalStyle, addParent, autoPlural, debounce, fetchAdvanced, insertAfter, openInNewTab, pauseFor } from "@sv443-network/userutils";
+import { addParent, autoPlural, debounce, fetchAdvanced, insertAfter, openInNewTab, pauseFor } from "@sv443-network/userutils";
 import { getFeatures } from "../config";
 import { siteEvents } from "../siteEvents";
 import { addSelectorListener } from "../observers";
-import { error, getResourceUrl, log, warn, t, onInteraction, getBestThumbnailUrl, getDomain } from "../utils";
+import { error, getResourceUrl, log, warn, t, onInteraction, getBestThumbnailUrl, getDomain, addStyle } from "../utils";
 import { scriptInfo } from "../constants";
 import { openCfgMenu } from "../menu/menu_old";
 import { createGenericBtn } from "../components";
@@ -192,7 +192,7 @@ export async function addAnchorImprovements() {
   try {
     const css = await (await fetchAdvanced(await getResourceUrl("css-anchor_improvements"))).text();
     if(css)
-      addGlobalStyle(css).id = "bytm-style-anchor-improvements";
+      addStyle(css, "anchor-improvements");
   }
   catch(err) {
     error("Couldn't add anchor improvements CSS due to an error:", err);
@@ -370,7 +370,7 @@ export async function fixSpacing() {
   try {
     const css = await (await fetchAdvanced(await getResourceUrl("css-fix_spacing"))).text();
     if(css)
-      addGlobalStyle(css).id = "bytm-style-fix-spacing";
+      addStyle(css, "fix-spacing");
   }
   catch(err) {
     error("Couldn't fix spacing due to an error:", err);

src/features/volume.ts

@@ -1,6 +1,6 @@
-import { addGlobalStyle, addParent, type Stringifiable } from "@sv443-network/userutils";
+import { addParent, type Stringifiable } from "@sv443-network/userutils";
 import { getFeatures } from "../config";
-import { error, log, resourceToHTMLString, t, waitVideoElementReady } from "../utils";
+import { addStyle, error, log, resourceToHTMLString, t, waitVideoElementReady } from "../utils";
 import { siteEvents } from "../siteEvents";
 import { featInfo } from ".";
 import "./volume.css";
@@ -159,10 +159,10 @@ function setVolSliderSize() {
   if(typeof size !== "number" || isNaN(Number(size)))
     return;
 
-  addGlobalStyle(`\
+  addStyle(`\
 #bytm-vol-slider-cont tp-yt-paper-slider#volume-slider {
   width: ${size}px !important;
-}`).id = "bytm-style-vol-slider-size";
+}`, "vol-slider-size");
 }
 
 //#SECTION step

src/index.ts

@@ -1,5 +1,5 @@
-import { addGlobalStyle, compress, decompress, type Stringifiable } from "@sv443-network/userutils";
-import { domLoaded, reserialize, warn } from "./utils";
+import { compress, decompress, type Stringifiable } from "@sv443-network/userutils";
+import { addStyle, domLoaded, reserialize, warn } from "./utils";
 import { clearConfig, defaultData as defaultFeatData, getFeatures, initConfig, setFeatures } from "./config";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants";
 import { error, getDomain, info, getSessionId, log, setLogLevel, initTranslations, setLocale } from "./utils";
@@ -310,7 +310,7 @@ async function onDomLoad() {
 /** Inserts the bundled CSS files imported throughout the script into a <style> element in the <head> */
 function insertGlobalStyle() {
   // post-build these double quotes are replaced by backticks (because if backticks are used here, the bundler converts them to double quotes)
-  addGlobalStyle("#{{GLOBAL_STYLE}}").id = "bytm-style-global";
+  addStyle("#{{GLOBAL_STYLE}}", "global");
 }
 
 /** Registers dev commands using `GM.registerMenuCommand` */

src/utils/dom.ts

@@ -1,4 +1,4 @@
-import { getUnsafeWindow } from "@sv443-network/userutils";
+import { addGlobalStyle, getUnsafeWindow, randomId } from "@sv443-network/userutils";
 import { error, getDomain } from ".";
 import { addSelectorListener } from "src/observers";
 
@@ -155,3 +155,16 @@ export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener:
   elem.addEventListener("click", proxListener, listenerOptions);
   elem.addEventListener("keydown", proxListener, listenerOptions);
 }
+
+/**
+ * Adds a style element to the DOM at runtime.
+ * @param css The CSS stylesheet to add
+ * @param ref A reference string to identify the style element - defaults to a random 5-character string
+ */
+export function addStyle(css: string, ref?: string) {
+  if(!domLoaded)
+    throw new Error("DOM has not finished loading yet");
+  const elem = addGlobalStyle(css);
+  elem.id = `bytm-global-style-${ref ?? randomId(5, 36)}`;
+  return elem;
+}