ref: use css vars instead of string injection shenanigans

assets/style/volSliderSize.css

@@ -1,5 +1,3 @@
-/* {WIDTH} (in comments) will be replaced with the width number set in the config menu */
 #bytm-vol-slider-cont tp-yt-paper-slider#volume-slider {
-  --bytm-slider-width: /*{WIDTH}*/;
-  width: var(--bytm-slider-width, 120px) !important;
+  width: var(--bytm-vol-slider-size, 68px) !important;
 }

src/features/volume.ts

@@ -158,10 +158,8 @@ function setVolSliderSize() {
   if(typeof size !== "number" || isNaN(Number(size)))
     return error("Invalid volume slider size:", size);
 
-  addStyleFromResource(
-    "css-vol_slider_size",
-    (css) => css.replace(/\/\*\s*\{WIDTH\}\s*\*\//gm, `${size}px`),
-  );
+  document.documentElement.style.setProperty("--bytm-vol-slider-size", `${size}px`);
+  addStyleFromResource("css-vol_slider_size");
 }
 
 //#region volume slider step

src/utils/dom.ts

@@ -155,11 +155,11 @@ export function clearNode(element: Element) {
  * @param ref A reference string to identify the style element - defaults to a random 5-character string
  * @param transform A function to transform the CSS before adding it to the DOM
  */
-export function addStyle(css: string, ref?: string, transform: (css: string) => string = (c) => c) {
+export async function addStyle(css: string, ref?: string, transform: (css: string) => string | Promise<string> = (c) => c) {
   if(!domLoaded)
     throw new Error("DOM has not finished loading yet");
-  const elem = addGlobalStyle(transform(css));
-  elem.id = `bytm-global-style-${ref ?? randomId(5, 36)}`;
+  const elem = addGlobalStyle(await transform(css));
+  elem.id = `bytm-style-${ref ?? randomId(5, 36)}`;
   return elem;
 }