diff --git a/src/api/Styles.ts b/src/api/Styles.ts
index 5119519f6..fd620424b 100644
--- a/src/api/Styles.ts
+++ b/src/api/Styles.ts
@@ -16,6 +16,8 @@
* along with this program. If not, see .
*/
+import { PopoutWindowStore } from "@webpack/common";
+
export const styleMap = window.VencordStyles ??= new Map();
export interface Style {
@@ -31,9 +33,9 @@ export function requireStyle(name: string) {
return style;
}
-// TODO: Implement popouts
function findDocuments() {
- return [document];
+ const popouts = PopoutWindowStore?.getWindowKeys()?.map(k => PopoutWindowStore?.getWindow(k)?.document) ?? [];
+ return [document, ...popouts];
}
/**
@@ -163,25 +165,39 @@ export const setStyleClassNames = (style: Style | string, classNames: Record {
- findDocuments().forEach(doc => {
- let styleElement = [...doc.head.querySelectorAll("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name);
- if (style.enabled) {
- if (!styleElement) {
- styleElement = doc.createElement("style");
- styleElement.dataset.vencordName = style.name;
- document.head.appendChild(styleElement);
- }
- styleElement.textContent = style.edit ? style.edit(style.source) : style.source;
- } else styleElement?.remove();
- });
+export function updateStyleInDocument(style: Style, doc: Document) {
+ let styleElement = [...doc.head.querySelectorAll("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name);
+ if (style.enabled) {
+ if (!styleElement) {
+ styleElement = doc.createElement("style");
+ styleElement.dataset.vencordName = style.name;
+ doc.documentElement.appendChild(styleElement);
+ }
+ styleElement.textContent = style.edit ? style.edit(style.source) : style.source;
+ } else styleElement?.remove();
+}
-};
+/**
+ * Updates styles in the DOM of all documents
+ * @param style A style object
+ * @see {@link setStyleClassNames} for more info on style classnames
+ */
+export function compileStyle(style: Style) {
+ findDocuments().forEach(doc => updateStyleInDocument(style, doc));
+}
+
+/**
+ * Updates styles in the DOM of all documents
+ * @param doc The document to add styles to
+ * @see {@link setStyleClassNames} for more info on style classnames
+ */
+export function addStylesToDocument(doc: Document) {
+ styleMap.forEach(style => updateStyleInDocument(style, doc));
+}
/**
* @param name The classname
diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts
index 65927a8b7..98aad86a7 100644
--- a/src/utils/quickCss.ts
+++ b/src/utils/quickCss.ts
@@ -17,8 +17,8 @@
*/
import { Settings, SettingsStore } from "@api/Settings";
-import { createStyle, setStyle } from "@api/Styles";
-import { ThemeStore } from "@webpack/common";
+import { addStylesToDocument, createStyle, setStyle } from "@api/Styles";
+import { PopoutWindowStore, ThemeStore } from "@webpack/common";
async function initSystemValues() {
const values = await VencordNative.themes.getSystemValues();
@@ -86,4 +86,12 @@ document.addEventListener("DOMContentLoaded", () => {
if (!IS_WEB)
VencordNative.quickCss.addThemeChangeListener(initThemes);
+
+ window.addEventListener("message", event => {
+ const { discordPopoutEvent } = event.data || {};
+ if (discordPopoutEvent?.type !== "loaded") return;
+ const popoutWindow = PopoutWindowStore.getWindow(discordPopoutEvent.key);
+ if (!popoutWindow?.document) return;
+ addStylesToDocument(popoutWindow.document);
+ });
});