Styles: Add createStyle function and migrate plugins to it

src/api/Styles.ts

@@ -25,8 +25,6 @@ export interface Style {
     edit?(source: string): string;
 }
 
-export type PartialStyle = Partial<Style> & Pick<Style, "name">;
-
 export function requireStyle(name: string) {
     const style = styleMap.get(name);
     if (!style) throw new Error(`Style "${name}" does not exist`);
@@ -40,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 style The style object
+ * @param style The style object or name
  * @returns `false` if the style was already enabled, `true` otherwise
  * @example
  * import pluginStyle from "./plugin.css?managed";
@@ -48,7 +46,9 @@ function findDocuments() {
  * // Inside some plugin method like "start()" or "[option].onChange()"
  * enableStyle(pluginStyle);
  */
-export function enableStyle(style: Style) {
+export function enableStyle(style: Style | string) {
+    if (typeof style === "string") style = requireStyle(style);
+
     style.enabled = true;
     compileStyle(style);
 
@@ -59,11 +59,19 @@ export function enableStyle(style: Style) {
 }
 
 /**
- * @param style The style object
+ * @param style The style object or name
  * @returns `false` if the style was already disabled, `true` otherwise
- * @see {@link enableStyle} for info on getting the name of an imported style
+ * @see {@link enableStyle} for info on importing managed styles
  */
-export function disableStyle(style: Style) {
+export function disableStyle(style: Style | string) {
+    if (typeof style === "string") {
+        try {
+            style = requireStyle(style);
+        } catch (e) {
+            return false;
+        }
+    }
+
     compileStyle(style);
 
     if (!style.enabled)
@@ -75,16 +83,47 @@ export function disableStyle(style: Style) {
 
 /**
  * @param style The new style object
- * @see {@link enableStyle} for info on getting the name of an imported style
+ * @see {@link enableStyle} for info on importing managed styles
  */
-export function setStyle(style: PartialStyle) {
-    if (!styleMap.has(style.name)) styleMap.set(style.name, { name: style.name, source: "", enabled: true });
+export function setStyle(style: Style) {
+    if (!styleMap.has(style.name)) styleMap.set(style.name, style);
     const storedStyle = requireStyle(style.name);
     Object.assign(storedStyle, style);
 
     (style.enabled ? enableStyle : disableStyle)(storedStyle);
 }
 
+/**
+ * Create a new style or update an existing style. Style will be enabled.
+ * @param name The name of the style
+ * @param source The CSS you want to inject
+ * @see {@link enableStyle} for info on importing managed styles
+ */
+export function createStyle(name: string, source: string) {
+    return setStyle({ name, source, enabled: true });
+}
+
+/**
+ * Deletes a style.
+ * This should only be used with programmatically injected styles.
+ * @param style The style to delete
+ * @see {@link enableStyle} for info on importing managed styles
+ */
+export function deleteStyle(style: Style | string) {
+    if (typeof style === "string") {
+        try {
+            style = requireStyle(style);
+        } catch (e) {
+            return false;
+        }
+    }
+
+    style.enabled = false;
+    compileStyle(style);
+
+    return styleMap.delete(style.name);
+}
+
 /**
  * Sets the variables of a style
  * ```ts
@@ -106,13 +145,13 @@ export function setStyle(style: PartialStyle) {
  * // -- final stylesheet --
  * .plugin-root .thin-31rlnD.scrollerBase-_bVAAt::-webkit-scrollbar { ... }
  * ```
- * @param name The name of the style
+ * @param style The style object or name
  * @param classNames An object where the keys are the variable names and the values are the variable values
  * @param recompile Whether to recompile the style after setting the variables, defaults to `true`
- * @see {@link enableStyle} for info on getting the name of an imported style
+ * @see {@link enableStyle} for info on importing managed styles
  */
-export const setStyleClassNames = (name: string, classNames: Record<string, string>, recompile = true) => {
-    const style = requireStyle(name);
+export const setStyleClassNames = (style: Style | string, classNames: Record<string, string>, recompile = true) => {
+    if (typeof style === "string") style = requireStyle(style);
     style.edit = source => {
         return source
             .replace(/\[--(\w+)\]/g, (match, name) => {

src/plugins/clientTheme/index.tsx

@@ -7,7 +7,7 @@
 import "./clientTheme.css";
 
 import { definePluginSettings } from "@api/Settings";
-import { setStyle } from "@api/Styles";
+import { createStyle, deleteStyle } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
@@ -125,7 +125,7 @@ export default definePlugin({
     },
 
     stop() {
-        ["vars", "offsets", "lightModeFixes"].forEach(i => setStyle({ name: `ClientTheme-${i}`, enabled: false }));
+        ["vars", "offsets", "lightModeFixes"].forEach(i => deleteStyle(`ClientTheme-${i}`));
     }
 });
 
@@ -158,13 +158,10 @@ function generateColorOffsets(styles) {
         variableMatch = variableRegex.exec(styles);
     }
 
-    setStyle({
-        name: "ClientTheme-offsets",
-        source: [
+    createStyle("ClientTheme-offsets", [
         `.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`,
         `.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`,
-        ].join("\n\n")
-    });
+    ].join("\n\n"));
 }
 
 function generateLightModeFixes(styles) {
@@ -190,14 +187,11 @@ function generateLightModeFixes(styles) {
     // create css to reassign every var
     const reassignVariables = `.theme-light {\n ${lightBgVars.map(variable => `${variable}: var(--primary-100);`).join("\n")} \n}`;
 
-    setStyle({
-        name: "ClientTheme-lightModeFixes",
-        source: [
+    createStyle("ClientTheme-lightModeFixes", [
         reassignBackgrounds,
         reassignBackgroundColors,
         reassignVariables,
-        ].join("\n\n")
-    });
+    ].join("\n\n"));
 }
 
 function captureOne(str, regex) {
@@ -212,14 +206,11 @@ function mapReject(arr, mapFunc) {
 function updateColorVars(color: string) {
     const { hue, saturation, lightness } = hexToHSL(color);
 
-    setStyle({
-        name: "ClientTheme-vars",
-        source: `:root {
+    createStyle("ClientTheme-vars", `:root {
         --theme-h: ${hue};
         --theme-s: ${saturation}%;
         --theme-l: ${lightness}%;
-        }`
-    });
+    }`);
 }
 
 // returns all of discord's native styles in a single string

src/plugins/hideAttachments/index.tsx

@@ -18,7 +18,7 @@
 
 import { get, set } from "@api/DataStore";
 import { addButton, removeButton } from "@api/MessagePopover";
-import { setStyle } from "@api/Styles";
+import { deleteStyle, setStyle } from "@api/Styles";
 import { ImageInvisible, ImageVisible } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
@@ -61,10 +61,7 @@ export default definePlugin({
     },
 
     stop() {
-        setStyle({
-            name: "HideAttachments",
-            enabled: false
-        });
+        deleteStyle("HideAttachments");
         hiddenMessages.clear();
         removeButton("HideAttachments");
     },

src/utils/margins.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { setStyle } from "@api/Styles";
+import { createStyle } from "@api/Styles";
 
 let styleStr = "";
 
@@ -31,7 +31,4 @@ for (const dir of ["top", "bottom", "left", "right"] as const) {
 }
 
 document.addEventListener("DOMContentLoaded", () =>
-    setStyle({
-        name: "vencord-margins",
-        source: styleStr,
-    }), { once: true });
+    createStyle("vencord-margins", styleStr), { once: true });

src/utils/quickCss.ts

@@ -17,7 +17,7 @@
 */
 
 import { Settings, SettingsStore } from "@api/Settings";
-import { setStyle } from "@api/Styles";
+import { createStyle, setStyle } from "@api/Styles";
 import { ThemeStore } from "@webpack/common";
 
 async function initSystemValues() {
@@ -27,10 +27,7 @@ async function initSystemValues() {
         .map(([k, v]) => `--${k}: ${v};`)
         .join("");
 
-    setStyle({
-        name: "vencord-os-theme-values",
-        source: `:root{${variables}}`
-    });
+    createStyle("vencord-os-theme-values", `:root{${variables}}`);
 }
 
 export async function toggle(isEnabled: boolean, css?: string) {
@@ -69,10 +66,8 @@ async function initThemes() {
         links.push(...localThemes);
     }
 
-    setStyle({
-        name: "vencord-themes",
-        source: links.map(link => `@import url("${link.trim()}");`).join("\n")
-    });
+    createStyle("vencord-themes",
+        links.map(link => `@import url("${link.trim()}");`).join("\n"));
 }
 
 document.addEventListener("DOMContentLoaded", () => {