Styles: Cleanup outdated functions, setStyle updates existing objects, replace style names with style objects

scripts/build/module/style.js

@@ -22,4 +22,4 @@
     enabled: false
 });
 
-export default STYLE_NAME;
+export default window.VencordStyles.get(STYLE_NAME);

src/api/Styles.ts

@@ -16,12 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import type { MapValue } from "type-fest/source/entry";
-
-export type Style = MapValue<typeof VencordStyles>;
-
 export const styleMap = window.VencordStyles ??= new Map();
 
+export interface Style {
+    name: string;
+    source: string;
+    enabled: boolean;
+    edit?(source: string): string;
+}
+
 export function requireStyle(name: string) {
     const style = styleMap.get(name);
     if (!style) throw new Error(`Style "${name}" does not exist`);
@@ -35,7 +38,7 @@ function findDocuments() {
 
 /**
  * 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
+ * @param style The style object
  * @returns `false` if the style was already enabled, `true` otherwise
  * @example
  * import pluginStyle from "./plugin.css?managed";
@@ -43,9 +46,7 @@ function findDocuments() {
  * // Inside some plugin method like "start()" or "[option].onChange()"
  * enableStyle(pluginStyle);
  */
-export function enableStyle(name: string) {
+export function enableStyle(style: Style) {
-    const style = requireStyle(name);
-
     style.enabled = true;
     compileStyle(style);
 
@@ -56,16 +57,12 @@ export function enableStyle(name: string) {
 }
 
 /**
- * @param name The name of the style
+ * @param style The style object
  * @returns `false` if the style was already disabled, `true` otherwise
  * @see {@link enableStyle} for info on getting the name of an imported style
  */
-export function disableStyle(name: string) {
+export function disableStyle(style: Style) {
-    const style = requireStyle(name);
+    compileStyle(style);
-
-    findDocuments().forEach(doc => {
-        [...doc.head.querySelectorAll<HTMLStyleElement>("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name)?.remove();
-    });
 
     if (!style.enabled)
         return false;
@@ -74,27 +71,16 @@ export function disableStyle(name: string) {
     return true;
 }
 
-/**
- * @param name The name of the style
- * @returns `true` in most cases, may return `false` in some edge cases
- * @see {@link enableStyle} for info on getting the name of an imported style
- */
-export const toggleStyle = (name: string) => isStyleEnabled(name) ? disableStyle(name) : enableStyle(name);
-
-/**
- * @param name The name of the style
- * @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).enabled ?? false;
-
 /**
  * @param style The new style object
  * @see {@link enableStyle} for info on getting the name of an imported style
  */
 export function setStyle(style: Style) {
-    styleMap.set(style.name, style);
+    if (!styleMap.has(style.name)) styleMap.set(style.name, style);
-    (style.enabled ? enableStyle : disableStyle)(style.name);
+    const storedStyle = requireStyle(style.name);
+    Object.assign(storedStyle, style);
+
+    (style.enabled ? enableStyle : disableStyle)(style);
 }
 
 /**
@@ -132,8 +118,7 @@ export const setStyleClassNames = (name: string, classNames: Record<string, stri
                 return className ? classNameToSelector(className) : match;
             });
     };
-    if (recompile && isStyleEnabled(style.name))
+    if (recompile) compileStyle(style);
-        compileStyle(style);
 };
 
 /**
@@ -145,12 +130,14 @@ export const setStyleClassNames = (name: string, classNames: Record<string, stri
 export const compileStyle = (style: Style) => {
     findDocuments().forEach(doc => {
         let styleElement = [...doc.head.querySelectorAll<HTMLStyleElement>("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name);
-        if (!styleElement) {
+        if (style.enabled) {
-            styleElement = doc.createElement("style");
+            if (!styleElement) {
-            styleElement.dataset.vencordName = style.name;
+                styleElement = doc.createElement("style");
-            document.head.appendChild(styleElement);
+                styleElement.dataset.vencordName = style.name;
-        }
+                document.head.appendChild(styleElement);
-        styleElement.textContent = style.edit ? style.edit(style.source) : style.source;
+            }
+            styleElement.textContent = style.edit ? style.edit(style.source) : style.source;
+        } else styleElement?.remove();
     });
 
 };

src/globals.d.ts

@@ -45,12 +45,7 @@ declare global {
 
     export var VencordNative: typeof import("./VencordNative").default;
     export var Vencord: typeof import("./Vencord");
-    export var VencordStyles: Map<string, {
+    export var VencordStyles: Map<string, import("@api/Styles").Style>;
-        name: string;
-        source: string;
-        enabled: boolean;
-        edit?(source: string): string;
-    }>;
     export var appSettings: {
         set(setting: string, v: any): void;
     };

src/modules.d.ts

@@ -18,6 +18,7 @@
 
 /// <reference types="standalone-electron-types"/>
 
+
 declare module "~plugins" {
     const plugins: Record<string, import("./utils/types").Plugin>;
     export default plugins;
@@ -50,6 +51,6 @@ declare module "file://*" {
 declare module "*.css";
 
 declare module "*.css?managed" {
-    const name: string;
+    const style: import("@api/Styles").Style;
-    export default name;
+    export default style;
 }