Styles: Migrate away from storing DOM nodes, prepare for popout support

scripts/build/common.mjs

@@ -276,7 +276,7 @@ export const stylePlugin = {
     name: "style-plugin",
     setup: ({ onResolve, onLoad }) => {
         onResolve({ filter: /\.css\?managed$/, namespace: "file" }, ({ path, resolveDir }) => ({
-            path: relative(process.cwd(), join(resolveDir, path.replace("?managed", ""))),
+            path: relative(process.cwd(), join(resolveDir, path.replace(/\?managed$/, ""))),
             namespace: "managed-style",
         }));
         onLoad({ filter: /\.css$/, namespace: "managed-style" }, async ({ path }) => {
@@ -287,7 +287,7 @@ export const stylePlugin = {
                 loader: "js",
                 contents: styleModule
                     .replaceAll("STYLE_SOURCE", JSON.stringify(css))
-                    .replaceAll("STYLE_NAME", JSON.stringify(name))
+                    .replaceAll("STYLE_NAME", JSON.stringify("managed-style:" + name))
             };
         });
     }

scripts/build/module/style.js

@@ -19,8 +19,7 @@
 (window.VencordStyles ??= new Map()).set(STYLE_NAME, {
     name: STYLE_NAME,
     source: STYLE_SOURCE,
-    classNames: {},
+    enabled: false
-    dom: null,
 });
 
 export default STYLE_NAME;

src/api/Styles.ts

@@ -28,6 +28,11 @@ export function requireStyle(name: string) {
     return style;
 }
 
+// TODO: Implement popouts
+function findDocuments() {
+    return [document];
+}
+
 /**
  * A style's name can be obtained from importing a stylesheet with `?managed` at the end of the import
  * @param name The name of the style
@@ -41,16 +46,11 @@ export function requireStyle(name: string) {
 export function enableStyle(name: string) {
     const style = requireStyle(name);
 
-    if (style.dom?.isConnected)
+    if (style.enabled)
         return false;
 
-    if (!style.dom) {
+    style.enabled = true;
-        style.dom = document.createElement("style");
-        style.dom.dataset.vencordName = style.name;
-    }
     compileStyle(style);
-
-    document.head.appendChild(style.dom);
     return true;
 }
 
@@ -61,11 +61,14 @@ export function enableStyle(name: string) {
  */
 export function disableStyle(name: string) {
     const style = requireStyle(name);
-    if (!style.dom?.isConnected)
+    if (!style.enabled)
         return false;
 
-    style.dom.remove();
+    findDocuments().forEach(doc => {
-    style.dom = null;
+        [...doc.head.querySelectorAll<HTMLStyleElement>("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name)?.remove();
+    });
+
+    style.enabled = false;
     return true;
 }
 
@@ -81,7 +84,7 @@ export const toggleStyle = (name: string) => isStyleEnabled(name) ? disableStyle
  * @returns Whether the style is enabled
  * @see {@link enableStyle} for info on getting the name of an imported style
  */
-export const isStyleEnabled = (name: string) => requireStyle(name).dom?.isConnected ?? false;
+export const isStyleEnabled = (name: string) => requireStyle(name).enabled ?? false;
 
 /**
  * Sets the variables of a style
@@ -111,7 +114,13 @@ export const isStyleEnabled = (name: string) => requireStyle(name).dom?.isConnec
  */
 export const setStyleClassNames = (name: string, classNames: Record<string, string>, recompile = true) => {
     const style = requireStyle(name);
-    style.classNames = classNames;
+    style.edit = source => {
+        return source
+            .replace(/\[--(\w+)\]/g, (match, name) => {
+                const className = classNames[name];
+                return className ? classNameToSelector(className) : match;
+            });
+    };
     if (recompile && isStyleEnabled(style.name))
         compileStyle(style);
 };
@@ -123,13 +132,16 @@ export const setStyleClassNames = (name: string, classNames: Record<string, stri
  * @see {@link setStyleClassNames} for more info on style classnames
  */
 export const compileStyle = (style: Style) => {
-    if (!style.dom) throw new Error("Style has no DOM element");
+    findDocuments().forEach(doc => {
+        let styleElement = [...doc.head.querySelectorAll<HTMLStyleElement>("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name);
+        if (!styleElement) {
+            styleElement = doc.createElement("style");
+            styleElement.dataset.vencordName = style.name;
+            document.head.appendChild(styleElement);
+        }
+        styleElement.textContent = style.edit ? style.edit(style.source) : style.source;
+    });
 
-    style.dom.textContent = style.source
-        .replace(/\[--(\w+)\]/g, (match, name) => {
-            const className = style.classNames[name];
-            return className ? classNameToSelector(className) : match;
-        });
 };
 
 /**

src/globals.d.ts

@@ -48,8 +48,8 @@ declare global {
     export var VencordStyles: Map<string, {
         name: string;
         source: string;
-        classNames: Record<string, string>;
+        enabled: boolean;
-        dom: HTMLStyleElement | null;
+        edit?(source: string): string;
     }>;
     export var appSettings: {
         set(setting: string, v: any): void;