perf: move theme parsing out of natives to prevent duplicate dependencies

src/VencordNative.ts

@@ -5,7 +5,6 @@
  */
 
 import { IpcEvents } from "@utils/IpcEvents";
-import type { ThemeHeader } from "@utils/themes";
 import { IpcRes } from "@utils/types";
 import { ipcRenderer } from "electron";
 
@@ -22,7 +21,7 @@ export default {
         uploadTheme: (fileName: string, fileData: string) => invoke<void>(IpcEvents.UPLOAD_THEME, fileName, fileData),
         deleteTheme: (fileName: string) => invoke<void>(IpcEvents.DELETE_THEME, fileName),
         getThemesDir: () => invoke<string>(IpcEvents.GET_THEMES_DIR),
-        getThemesList: () => invoke<Array<ThemeHeader>>(IpcEvents.GET_THEMES_LIST),
+        getThemesList: () => invoke<Array<{ fileName: string; content: string; }>>(IpcEvents.GET_THEMES_LIST),
         getThemeData: (fileName: string) => invoke<string | undefined>(IpcEvents.GET_THEME_DATA, fileName)
     },
 

src/components/VencordSettings/ThemesTab.tsx

@@ -25,7 +25,8 @@ import { classes } from "@utils/misc";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
 import type { ThemeHeader } from "@utils/themes";
-import type { UserThemeHeader } from "@utils/themes/bd";
+import { getThemeInfo, stripBOM, type UserThemeHeader } from "@utils/themes/bd";
+import { usercssParse } from "@utils/themes/usercss";
 import { findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
 import { Button, Card, FluxDispatcher, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
 import type { ComponentType, Ref, SyntheticEvent } from "react";
@@ -206,7 +207,28 @@ function ThemesTab() {
 
     async function refreshLocalThemes() {
         const themes = await VencordNative.themes.getThemesList();
-        setUserThemes(themes);
+
+        const themeInfo: ThemeHeader[] = [];
+
+        for (const { fileName, content } of themes) {
+            if (!fileName.endsWith(".css")) continue;
+
+            if (fileName.endsWith(".user.css")) {
+                // handle it as usercss
+                themeInfo.push({
+                    type: "usercss",
+                    header: usercssParse(content, fileName)
+                });
+            } else {
+                // presumably BD but could also be plain css
+                themeInfo.push({
+                    type: "bd",
+                    header: getThemeInfo(stripBOM(content), fileName)
+                });
+            }
+        }
+
+        setUserThemes(themeInfo);
     }
 
     // When a local theme is enabled/disabled, update the settings

src/main/ipcMain.ts

@@ -22,9 +22,6 @@ import "./ipcPlugins";
 import { debounce } from "@utils/debounce";
 import { IpcEvents } from "@utils/IpcEvents";
 import { Queue } from "@utils/Queue";
-import type { ThemeHeader } from "@utils/themes";
-import { getThemeInfo, stripBOM } from "@utils/themes/bd";
-import { parse as usercssParse } from "@utils/themes/usercss";
 import { BrowserWindow, ipcMain, shell } from "electron";
 import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readdir, readFile, writeFile } from "fs/promises";
@@ -49,33 +46,11 @@ function readCss() {
     return readFile(QUICKCSS_PATH, "utf-8").catch(() => "");
 }
 
-async function listThemes(): Promise<ThemeHeader[]> {
+function listThemes(): Promise<{ fileName: string; content: string; }[]> {
-    const files = await readdir(THEMES_DIR).catch(() => []);
+    return readdir(THEMES_DIR)
-
+        .then(files =>
-    const themeInfo: ThemeHeader[] = [];
+            Promise.all(files.map(async fileName => ({ fileName, content: await getThemeData(fileName) }))))
-
+        .catch(() => []);
-    for (const fileName of files) {
-        if (!fileName.endsWith(".css")) continue;
-
-        const data = await getThemeData(fileName).then(stripBOM).catch(() => null);
-        if (data == null) continue;
-
-        if (fileName.endsWith(".user.css")) {
-            // handle it as usercss
-            themeInfo.push({
-                type: "usercss",
-                header: usercssParse(data, fileName)
-            });
-        } else {
-            // presumably BD but could also be plain css
-            themeInfo.push({
-                type: "bd",
-                header: getThemeInfo(data, fileName)
-            });
-        }
-    }
-
-    return themeInfo;
 }
 
 function getThemeData(fileName: string) {

src/utils/themes/usercss/compiler.ts

@@ -8,7 +8,7 @@ import { Settings } from "@api/Settings";
 import { getLess, getStylus } from "@utils/dependencies";
 import { Logger } from "@utils/Logger";
 
-import { parse as usercssParse } from ".";
+import { usercssParse as usercssParse } from ".";
 
 const UserCSSLogger = new Logger("UserCSS:Compiler", "#d2acf5");
 

src/utils/themes/usercss/index.ts

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