From 8e32588897f7dc1c77f9f9221ccc20350cf34e13 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Fri, 24 Jan 2025 16:05:36 +1300 Subject: [PATCH] Styles: Replace the edit function with a variables object --- scripts/build/module/style.js | 3 ++- src/api/Styles.ts | 39 ++++++++++++++++++++++------------ src/plugins/blurNsfw/index.ts | 8 ++++--- src/plugins/blurNsfw/style.css | 2 +- 4 files changed, 33 insertions(+), 19 deletions(-) diff --git a/scripts/build/module/style.js b/scripts/build/module/style.js index 8fbe6d367..2d9bdcb89 100644 --- a/scripts/build/module/style.js +++ b/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); diff --git a/src/api/Styles.ts b/src/api/Styles.ts index 1acc3b8c3..a33a7793a 100644 --- a/src/api/Styles.ts +++ b/src/api/Styles.ts @@ -24,7 +24,7 @@ export interface Style { name: string; source: string; enabled: boolean; - edit?(source: string): string; + variables?: Record; } 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, recompile = true) => { +export const setStyleVariables = (style: Style | string, variables: Record, recompile = true) => { if (typeof style === "string") style = requireStyle(style); - style.edit = source => { - return source - .replace(/\[--(\w+)\]/g, (match, name) => { - const className = classNames[name]; - return className ? classNameToSelector(className) : match; - }); - }; + style.variables = variables; 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, prefix = "") => Object.fromEntries(Object.entries(classNames).map(([k, v]) => [k, classNameToSelector(v, prefix)])); + type ClassNameFactoryArg = string | string[] | Record | false | null | undefined | 0 | ""; /** * @param prefix The prefix to add to each class, defaults to `""` diff --git a/src/plugins/blurNsfw/index.ts b/src/plugins/blurNsfw/index.ts index 1310ca5c4..2eedc4da0 100644 --- a/src/plugins/blurNsfw/index.ts +++ b/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 diff --git a/src/plugins/blurNsfw/style.css b/src/plugins/blurNsfw/style.css index ac5e82210..f7cce7416 100644 --- a/src/plugins/blurNsfw/style.css +++ b/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; }