Plugins: Migrate plugins to style property in the plugin object from enableStyle/disableStyle in start/stop

src/plugins/blurNsfw/index.ts

@@ -17,7 +17,7 @@
 */
 
 import { Settings } from "@api/Settings";
-import { compileStyle, disableStyle, enableStyle } from "@api/Styles";
+import { compileStyle } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 
@@ -49,10 +49,7 @@ export default definePlugin({
 
     start() {
         style.edit = src => src.replace("blur-amount", Settings.plugins.BlurNSFW.blurAmount);
-        enableStyle(style);
     },
 
-    stop() {
-        disableStyle(style);
-    }
+    style
 });

src/plugins/gameActivityToggle/index.tsx

@@ -17,7 +17,6 @@
 */
 
 import { definePluginSettings } from "@api/Settings";
-import { disableStyle, enableStyle } from "@api/Styles";
 import { getUserSettingLazy } from "@api/UserSettings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
@@ -102,11 +101,5 @@ export default definePlugin({
 
     GameActivityToggleButton: ErrorBoundary.wrap(GameActivityToggleButton, { noop: true }),
 
-    start() {
-        enableStyle(style);
-    },
-
-    stop() {
-        disableStyle(style);
-    }
+    style
 });

src/plugins/imageZoom/index.tsx

@@ -18,7 +18,6 @@
 
 import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
-import { disableStyle, enableStyle } from "@api/Styles";
 import { makeRange } from "@components/PluginSettings/components";
 import { debounce } from "@shared/debounce";
 import { Devs } from "@utils/constants";
@@ -29,7 +28,7 @@ import type { Root } from "react-dom/client";
 
 import { Magnifier, MagnifierProps } from "./components/Magnifier";
 import { ELEMENT_ID } from "./constants";
-import styles from "./styles.css?managed";
+import style from "./styles.css?managed";
 
 export const settings = definePluginSettings({
     saveZoomValues: {
@@ -247,16 +246,16 @@ export default definePlugin({
     },
 
     start() {
-        enableStyle(styles);
         this.element = document.createElement("div");
         this.element.classList.add("MagnifierContainer");
         document.body.appendChild(this.element);
     },
 
     stop() {
-        disableStyle(styles);
         // so componenetWillUnMount gets called if Magnifier component is still alive
         this.root && this.root.unmount();
         this.element?.remove();
-    }
+    },
+
+    style
 });

src/plugins/index.ts

@@ -19,6 +19,7 @@
 import { registerCommand, unregisterCommand } from "@api/Commands";
 import { addContextMenuPatch, removeContextMenuPatch } from "@api/ContextMenu";
 import { Settings } from "@api/Settings";
+import { disableStyle, enableStyle } from "@api/Styles";
 import { Logger } from "@utils/Logger";
 import { canonicalizeFind } from "@utils/patches";
 import { Patch, Plugin, ReporterTestable, StartAt } from "@utils/types";
@@ -215,7 +216,7 @@ export function subscribeAllPluginsFluxEvents(fluxDispatcher: typeof FluxDispatc
 }
 
 export const startPlugin = traceFunction("startPlugin", function startPlugin(p: Plugin) {
-    const { name, commands, contextMenus } = p;
+    const { name, commands, contextMenus, style } = p;
 
     if (p.start) {
         logger.info("Starting plugin", name);
@@ -257,11 +258,13 @@ export const startPlugin = traceFunction("startPlugin", function startPlugin(p:
         }
     }
 
+    if (style) enableStyle(style);
+
     return true;
 }, p => `startPlugin ${p.name}`);
 
 export const stopPlugin = traceFunction("stopPlugin", function stopPlugin(p: Plugin) {
-    const { name, commands, contextMenus } = p;
+    const { name, commands, contextMenus, style } = p;
 
     if (p.stop) {
         logger.info("Stopping plugin", name);
@@ -300,5 +303,7 @@ export const stopPlugin = traceFunction("stopPlugin", function stopPlugin(p: Plu
         }
     }
 
+    if (style) disableStyle(style);
+
     return true;
 }, p => `stopPlugin ${p.name}`);

src/plugins/usrbg/index.tsx

@@ -17,7 +17,6 @@
 */
 
 import { definePluginSettings } from "@api/Settings";
-import { enableStyle } from "@api/Styles";
 import { Link } from "@components/Link";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
@@ -115,11 +114,10 @@ export default definePlugin({
     },
 
     async start() {
-        enableStyle(style);
-
         const res = await fetch(API_URL);
         if (res.ok) {
             this.data = await res.json();
         }
-    }
+    },
+    style
 });

src/utils/types.ts

@@ -18,6 +18,7 @@
 
 import { Command } from "@api/Commands";
 import { NavContextMenuPatchCallback } from "@api/ContextMenu";
+import { Style } from "@api/Styles";
 import { FluxEvents } from "@webpack/types";
 import { JSX } from "react";
 import { Promisable } from "type-fest";
@@ -140,6 +141,10 @@ export interface PluginDef {
      * The key will be used as text for the button
      */
     toolboxActions?: Record<string, () => void>;
+    /**
+     * An imported managed style to be enabled only when the plugin is enabled
+     */
+    style?: Style;
 
     tags?: string[];
 }