Updates

src/utils/quickCss.ts

@@ -19,8 +19,11 @@
 import { Settings, SettingsStore } from "@api/Settings";
 import { Toasts } from "@webpack/common";
 
+import { Logger } from "./Logger";
 import { compileUsercss } from "./themes/usercss/compiler";
 
+const logger = new Logger("QuickCSS");
+
 
 let style: HTMLStyleElement;
 let themesStyle: HTMLStyleElement;
@@ -60,26 +63,75 @@ export async function toggle(isEnabled: boolean) {
 async function initThemes() {
     themesStyle ??= createStyle("vencord-themes");
 
-    const { themeLinks, disabledThemeLinks, enabledThemes } = Settings;
+    const { enabledThemeLinks, enabledThemes } = Settings;
 
-    let links: string[] = [...themeLinks];
-
-    links = links.filter(link => !disabledThemeLinks.includes(link));
+    const links: string[] = [...enabledThemeLinks];
 
     if (IS_WEB) {
-        for (const theme of enabledThemes) {
-            const themeData = await VencordNative.themes.getThemeData(theme);
-            if (!themeData) continue;
+        for (let i = enabledThemes.length - 1; i >= 0; i--) {
+            const theme = enabledThemes[i];
+
+            try {
+                var themeData = await VencordNative.themes.getThemeData(theme);
+            } catch (e) {
+                logger.warn("Failed to get theme data for", theme, "(has it gone missing?)", e);
+            }
+
+            if (!themeData) {
+                // disable the theme since it has problems
+                Settings.enabledThemes = enabledThemes.splice(enabledThemes.indexOf(theme), 1);
+                continue;
+            }
 
             const blob = new Blob([themeData], { type: "text/css" });
             links.push(URL.createObjectURL(blob));
         }
     } else {
-        for (const theme of enabledThemes) if (!theme.endsWith(".user.css")) {
+        for (let i = enabledThemes.length - 1; i >= 0; i--) {
+            const theme = enabledThemes[i];
+
+            if (theme.endsWith(".user.css")) continue;
+
+            try {
+                // whilst this is unnecessary here, we're doing it to make sure the theme is valid
+                await VencordNative.themes.getThemeData(theme);
+            } catch (e) {
+                logger.warn("Failed to get theme data for", theme, "(has it gone missing?)", e);
+                Settings.enabledThemes = enabledThemes.splice(enabledThemes.indexOf(theme), 1);
+                continue;
+            }
+
             links.push(`vencord:///themes/${theme}?v=${Date.now()}`);
         }
     }
 
+    if (!IS_WEB || "armcord" in window) {
+        for (let i = enabledThemes.length - 1; i >= 0; i--) {
+            const theme = enabledThemes[i];
+
+            if (!theme.endsWith(".user.css")) continue;
+
+            // UserCSS goes through a compile step first
+            const css = await compileUsercss(theme);
+            if (!css) {
+                // let's not leave the user in the dark about this and point them to where they can find the error
+                Toasts.show({
+                    message: `Failed to compile ${theme}, check the console for more info.`,
+                    type: Toasts.Type.FAILURE,
+                    id: Toasts.genId(),
+                    options: {
+                        position: Toasts.Position.BOTTOM
+                    }
+                });
+                Settings.enabledThemes = enabledThemes.splice(enabledThemes.indexOf(theme), 1);
+                continue;
+            }
+
+            const blob = new Blob([css], { type: "text/css" });
+            links.push(URL.createObjectURL(blob));
+        }
+    }
+
     if (!IS_WEB || "armcord" in window) {
         for (const theme of enabledThemes) if (theme.endsWith(".user.css")) {
             // UserCSS goes through a compile step first
@@ -112,7 +164,7 @@ document.addEventListener("DOMContentLoaded", () => {
     toggle(Settings.useQuickCss);
     SettingsStore.addChangeListener("useQuickCss", toggle);
 
-    SettingsStore.addChangeListener("themeLinks", initThemes);
+    SettingsStore.addChangeListener("enabledThemeLinks", initThemes);
     SettingsStore.addChangeListener("enabledThemes", initThemes);
     SettingsStore.addChangeListener("userCssVars", initThemes);
 

src/utils/themes/usercss/compiler.ts

@@ -55,7 +55,11 @@ const preprocessors: { [preprocessor: string]: (text: string, vars: Record<strin
 };
 
 export async function compileUsercss(fileName: string) {
-    const themeData = await VencordNative.themes.getThemeData(fileName);
+    try {
+        var themeData = await VencordNative.themes.getThemeData(fileName);
+    } catch (e) {
+        UserCSSLogger.warn("Failed to get theme data for", fileName, "(has it gone missing?)", e);
+    }
     if (!themeData) return null;
 
     // UserCSS preprocessor order look like this:
@@ -71,7 +75,9 @@ export async function compileUsercss(fileName: string) {
         return null;
     }
 
-    const varsToPass = {};
+    const varsToPass = {
+        vencord: "true"
+    };
 
     for (const [k, v] of Object.entries(vars)) {
         varsToPass[k] = Settings.userCssVars[id]?.[k] ?? v.default;

src/utils/themes/usercss/usercss-meta.d.ts

@@ -19,7 +19,7 @@ declare module "usercss-meta" {
         }
         | {
             type: "checkbox";
-            default: boolean;
+            default: string;
         }
         | {
             type: "range";