Styles: Migrate core CSS injection

scripts/build/buildWeb.mjs

@@ -187,11 +187,9 @@ async function buildExtension(target, files) {
 
 const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content => {
     const cssRuntime = `
-;document.addEventListener("DOMContentLoaded", () => document.documentElement.appendChild(
+;document.addEventListener("DOMContentLoaded", () => Vencord.Api.Styles.createStyle(
-    Object.assign(document.createElement("style"), {
+    "vencord-css-core",
-        textContent: \`${content.replaceAll("`", "\\`")}\`,
+    \`${content.replaceAll("`", "\\`")}\`
-        id: "vencord-css-core"
-    })
 ), { once: true });
 `;
 

src/Vencord.ts

@@ -28,6 +28,7 @@ export { PlainSettings, Settings };
 import "./utils/quickCss";
 import "./webpack/patchWebpack";
 
+import { createStyle } from "@api/Styles";
 import { openUpdaterModal } from "@components/VencordSettings/UpdaterTab";
 import { StartAt } from "@utils/types";
 
@@ -142,9 +143,6 @@ document.addEventListener("DOMContentLoaded", () => {
     startAllPlugins(StartAt.DOMContentLoaded);
 
     if (IS_DISCORD_DESKTOP && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
-        document.head.append(Object.assign(document.createElement("style"), {
+        createStyle("vencord-native-titlebar-style", "[class*=titleBar]{display: none!important}");
-            id: "vencord-native-titlebar-style",
-            textContent: "[class*=titleBar]{display: none!important}"
-        }));
     }
 }, { once: true });

src/preload.ts

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { createStyle } from "@api/Styles";
 import { debounce } from "@shared/debounce";
 import { contextBridge, webFrame } from "electron";
 import { readFileSync, watch } from "fs";
@@ -30,14 +31,12 @@ if (location.protocol !== "data:") {
     // #region cssInsert
     const rendererCss = join(__dirname, IS_VESKTOP ? "vencordDesktopRenderer.css" : "renderer.css");
 
-    const style = document.createElement("style");
+    const injectStyle = () => createStyle("vencord-css-core", readFileSync(rendererCss, "utf-8"));
-    style.id = "vencord-css-core";
-    style.textContent = readFileSync(rendererCss, "utf-8");
 
     if (document.readyState === "complete") {
-        document.documentElement.appendChild(style);
+        injectStyle();
     } else {
-        document.addEventListener("DOMContentLoaded", () => document.documentElement.appendChild(style), {
+        document.addEventListener("DOMContentLoaded", injectStyle, {
             once: true
         });
     }
@@ -45,9 +44,7 @@ if (location.protocol !== "data:") {
     if (IS_DEV) {
         // persistent means keep process running if watcher is the only thing still running
         // which we obviously don't want
-        watch(rendererCss, { persistent: false }, () => {
+        watch(rendererCss, { persistent: false }, injectStyle);
-            document.getElementById("vencord-css-core")!.textContent = readFileSync(rendererCss, "utf-8");
-        });
     }
     // #endregion
 

src/webpack/common/stores.ts

@@ -56,6 +56,7 @@ export let EmojiStore: t.EmojiStore;
 export let ThemeStore: t.ThemeStore;
 export let WindowStore: t.WindowStore;
 export let DraftStore: t.DraftStore;
+export let PopoutWindowStore: t.PopoutWindowStore;
 
 /**
  * React hook that returns stateful data for one or more stores
@@ -86,3 +87,4 @@ waitForStore("MessageStore", m => MessageStore = m);
 waitForStore("WindowStore", m => WindowStore = m);
 waitForStore("EmojiStore", m => EmojiStore = m);
 waitForStore("ThemeStore", m => ThemeStore = m);
+waitForStore("PopoutWindowStore", m => PopoutWindowStore = m);

src/webpack/common/types/stores.d.ts

@@ -228,6 +228,11 @@ export class ThemeStore extends FluxStore {
     systemTheme: null;
 }
 
+export class PopoutWindowStore extends FluxStore {
+    getWindow(windowKey: string): Window;
+    getWindowKeys(): string[];
+}
+
 export type useStateFromStores = <T>(
     stores: t.FluxStore[],
     mapper: () => T,