From e95f669ec5c0283aa1518ce6d630871782d9ff4c Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Wed, 18 Dec 2024 22:07:36 +0200
Subject: [PATCH] web/preferences: allow imports in custom CSS

---
 web/src/ui/StylePreferences.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/web/src/ui/StylePreferences.tsx b/web/src/ui/StylePreferences.tsx
index 53cfe24..b410598 100644
--- a/web/src/ui/StylePreferences.tsx
+++ b/web/src/ui/StylePreferences.tsx
@@ -32,29 +32,39 @@ function css(strings: TemplateStringsArray, ...values: unknown[]) {
 	return newStyleSheet(String.raw(strings, ...values))
 }
 
+function pushSheet(sheet: CSSStyleSheet): () => void {
+	document.adoptedStyleSheets.push(sheet)
+	return () => {
+		const idx = document.adoptedStyleSheets.indexOf(sheet)
+		if (idx !== -1) {
+			document.adoptedStyleSheets.splice(idx, 1)
+		}
+	}
+}
+
 function useStyle(callback: () => CSSStyleSheet | false | undefined | null | "", dependencies: unknown[]) {
 	useInsertionEffect(() => {
 		const sheet = callback()
 		if (!sheet) {
 			return
 		}
-		document.adoptedStyleSheets.push(sheet)
-		return () => {
-			const idx = document.adoptedStyleSheets.indexOf(sheet)
-			if (idx !== -1) {
-				document.adoptedStyleSheets.splice(idx, 1)
-			}
-		}
+		return pushSheet(sheet)
 	}, dependencies)
 }
 
-function useAsyncStyle(callback: () => string | false | undefined | null, dependencies: unknown[]) {
+function useAsyncStyle(callback: () => string | false | undefined | null, dependencies: unknown[], id?: string) {
 	useInsertionEffect(() => {
 		const sheet = callback()
 		if (!sheet) {
 			return
 		}
+		if (!sheet.includes("@import")) {
+			return pushSheet(newStyleSheet(sheet))
+		}
 		const styleTags = document.createElement("style")
+		if (id) {
+			styleTags.id = id
+		}
 		styleTags.textContent = sheet
 		document.head.appendChild(styleTags)
 		return () => {
@@ -116,8 +126,8 @@ const StylePreferences = ({ client, activeRoom }: StylePreferencesProps) => {
 		}
 	` : `
 		@import url("_gomuks/codeblock/${preferences.code_block_theme}.css");
-	`, [preferences.code_block_theme])
-	useStyle(() => preferences.custom_css && newStyleSheet(preferences.custom_css), [preferences.custom_css])
+	`, [preferences.code_block_theme], "gomuks-pref-code-block-theme")
+	useAsyncStyle(() => preferences.custom_css, [preferences.custom_css], "gomuks-pref-custom-css")
 	return null
 }