Styles: Replace the edit function with a variables object

scripts/build/module/style.js

@@ -19,7 +19,8 @@
 (window.VencordStyles ??= new Map()).set(STYLE_NAME, {
     name: STYLE_NAME,
     source: STYLE_SOURCE,
-    enabled: false
+    enabled: false,
+    variables: {}
 });
 
 export default window.VencordStyles.get(STYLE_NAME);

src/api/Styles.ts

@@ -24,7 +24,7 @@ export interface Style {
     name: string;
     source: string;
     enabled: boolean;
-    edit?(source: string): string;
+    variables?: Record<string, string>;
 }
 
 export function requireStyle(name: string) {
@@ -148,26 +148,21 @@ export function deleteStyle(style: Style | string) {
  * .plugin-root .thin-31rlnD.scrollerBase-_bVAAt::-webkit-scrollbar { ... }
  * ```
  * @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 variables 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 classNamesToSelectors} for converting a class names object to variables
  * @see {@link enableStyle} for info on importing managed styles
  */
-export const setStyleClassNames = (style: Style | string, classNames: Record<string, string>, recompile = true) => {
+export const setStyleVariables = (style: Style | string, variables: Record<string, string>, recompile = true) => {
     if (typeof style === "string") style = requireStyle(style);
-    style.edit = source => {
+    style.variables = variables;
-        return source
-            .replace(/\[--(\w+)\]/g, (match, name) => {
-                const className = classNames[name];
-                return className ? classNameToSelector(className) : match;
-            });
-    };
     if (recompile) compileStyle(style);
 };
 
 /**
  * Updates the style in a document. This should only be called by {@link compileStyle} or when a new popout is created.
  * @param style A style object
- * @see {@link setStyleClassNames} for more info on style classnames
+ * @see {@link setStyleVariables} for more info on style classnames
  */
 export function updateStyleInDocument(style: Style, doc: Document) {
     const parent = doc.documentElement;
@@ -178,14 +173,21 @@ export function updateStyleInDocument(style: Style, doc: Document) {
             styleElement.dataset.vencordName = style.name;
             parent.appendChild(styleElement);
         }
-        styleElement.textContent = style.edit ? style.edit(style.source) : style.source;
+        let content = style.source;
+        if (style.variables) {
+            Object.entries(style.variables).forEach(([key, value]) => {
+                const kebabCaseKey = key.replaceAll(/(?<=[a-z])[A-Z0-9]/g, v => `-${v}`).toLowerCase();
+                content = content.replaceAll(`[--${kebabCaseKey}]`, value);
+            });
+        }
+        styleElement.textContent = content;
     } else styleElement?.remove();
 }
 
 /**
  * Updates a style in the DOM of all documents
  * @param style A style object
- * @see {@link setStyleClassNames} for more info on style classnames
+ * @see {@link setStyleVariables} for more info on style classnames
  */
 export function compileStyle(style: Style) {
     findDocuments().forEach(doc => updateStyleInDocument(style, doc));
@@ -194,7 +196,7 @@ export function compileStyle(style: Style) {
 /**
  * Adds all enabled styles to the DOM of all documents
  * @param doc The document to add styles to
- * @see {@link setStyleClassNames} for more info on style classnames
+ * @see {@link setStyleVariables} for more info on style classnames
  */
 export function addStylesToDocument(doc: Document) {
     styleMap.forEach(style => updateStyleInDocument(style, doc));
@@ -209,6 +211,15 @@ export function addStylesToDocument(doc: Document) {
  */
 export const classNameToSelector = (name: string, prefix = "") => name.split(" ").map(n => `.${prefix}${n}`).join("");
 
+/**
+ * @param classNames The classNames object
+ * @param prefix A prefix to add each class, defaults to `""`
+ * @return A css selector for the classname
+ * @example
+ * classNamesToSelectors({ a: "foo bar" }) // => { a: ".foo.bar" }
+ */
+export const classNamesToSelectors = (classNames: Record<string, string>, prefix = "") => Object.fromEntries(Object.entries(classNames).map(([k, v]) => [k, classNameToSelector(v, prefix)]));
+
 type ClassNameFactoryArg = string | string[] | Record<string, unknown> | false | null | undefined | 0 | "";
 /**
  * @param prefix The prefix to add to each class, defaults to `""`

src/plugins/blurNsfw/index.ts

@@ -17,7 +17,7 @@
 */
 
 import { Settings } from "@api/Settings";
-import { compileStyle } from "@api/Styles";
+import { setStyleVariables } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 
@@ -43,12 +43,14 @@ export default definePlugin({
             type: OptionType.NUMBER,
             description: "Blur Amount",
             default: 10,
-            onChange: () => compileStyle(style)
+            onChange(v) {
+                setStyleVariables(style, { blurAmount: v });
+            }
         }
     },
 
     start() {
-        style.edit = src => src.replace("blur-amount", Settings.plugins.BlurNSFW.blurAmount);
+        setStyleVariables(style, { blurAmount: Settings.plugins.BlurNSFW.blurAmount });
     },
 
     style

src/plugins/blurNsfw/style.css

@@ -1,6 +1,6 @@
 .vc-nsfw-img [class^="imageWrapper"] img,
 .vc-nsfw-img [class^="wrapperPaused"] video {
-    filter: blur(blur-amount);
+    filter: blur([--blur-amount]px);
     transition: filter 0.2s;
 }