feat: resiliency against bad usercss

src/components/VencordSettings/ThemesTab.tsx

@@ -114,7 +114,7 @@ interface UserCSSCardProps {
 function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardProps) {
     return (
         <AddonCard
-            name={theme.name}
+            name={theme.name ?? "Unknown"}
             description={theme.description}
             author={theme.author ?? "Unknown"}
             enabled={enabled}

src/utils/quickCss.ts

@@ -17,6 +17,7 @@
 */
 
 import { addSettingsListener, Settings } from "@api/Settings";
+import { Toasts } from "@webpack/common";
 
 import { compileUsercss } from "./themes/usercss/compiler";
 
@@ -70,7 +71,18 @@ async function initThemes() {
     for (const theme of enabledThemes) if (theme.endsWith(".user.css")) {
         // UserCSS goes through a compile step first
         const css = await compileUsercss(theme);
-        if (!css) continue; // something went wrong during the compile step...
+        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
+                }
+            });
+            continue;
+        }
 
         const blob = new Blob([css], { type: "text/css" });
         links.push(URL.createObjectURL(blob));

src/utils/themes/usercss/compiler.ts

@@ -58,18 +58,16 @@ export async function compileUsercss(fileName: string) {
     const themeData = await VencordNative.themes.getThemeData(fileName);
     if (!themeData) return null;
 
-    const { preprocessor: definedPreprocessor, vars } = usercssParse(themeData, fileName);
-
     // UserCSS preprocessor order look like this:
     // - use the preprocessor defined
     // - if variables are set, `uso`
     // - otherwise, `default`
-    const usedPreprocessor = definedPreprocessor ?? (Object.keys(vars).length > 0 ? "uso" : "default");
+    const { vars = {}, preprocessor = Object.keys(vars).length > 0 ? "uso" : "default" } = usercssParse(themeData, fileName);
 
-    const preprocessorFn = preprocessors[usedPreprocessor];
+    const preprocessorFn = preprocessors[preprocessor];
 
     if (!preprocessorFn) {
-        UserCSSLogger.error("File", fileName, "requires preprocessor", usedPreprocessor, "which isn't known to Vencord");
+        UserCSSLogger.error("File", fileName, "requires preprocessor", preprocessor, "which isn't known to Vencord");
         return null;
     }
 
@@ -82,7 +80,7 @@ export async function compileUsercss(fileName: string) {
     try {
         return await preprocessorFn(themeData, varsToPass);
     } catch (error) {
-        UserCSSLogger.error("File", fileName, "failed to compile with preprocessor", usedPreprocessor, error);
+        UserCSSLogger.error("File", fileName, "failed to compile with preprocessor", preprocessor, error);
         return null;
     }
 }

src/utils/themes/usercss/index.ts

@@ -10,7 +10,7 @@ import { parse as originalParse, UserstyleHeader } from "usercss-meta";
 const UserCSSLogger = new Logger("UserCSS", "#d2acf5");
 
 export function parse(text: string, fileName: string): UserstyleHeader {
-    const { metadata, errors } = originalParse(text.replace(/\r/g, ""));
+    var { metadata, errors } = originalParse(text.replace(/\r/g, ""), { allowErrors: true });
 
     if (errors.length) {
         UserCSSLogger.warn("Parsed", fileName, "with errors:", errors);

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

@@ -102,5 +102,5 @@ declare module "usercss-meta" {
         vars: Record<string, UserCSSVariable>;
     }
 
-    export function parse(text: string): { metadata: UserstyleHeader; errors: { code: string; args: any; }[] };
+    export function parse(text: string, options: { allowErrors: boolean; }): { metadata: UserstyleHeader; errors: { code: string; args: any; }[]; };
 }