refactor: streamline font face URL handling in stylesheets by consolidating extraction and replacement logic

Author: tonyhu-012

entrypoints/content/ui.ts

@@ -22,11 +22,7 @@ async function loadStyleSheet(shadowRoot: ShadowRoot) {
   )
   injectStyleSheetToDocument(shadowRoot, styleSheet)
   // font-face can only be applied to the document, not the shadow root
-  const fontFaceStyleSheet = extractFontFace(styleSheet)
-  // Content script stylesheets are parsed via new CSSStyleSheet() + replaceSync(),
-  // so @font-face URLs (e.g. /fonts/Inter.woff2) resolve against the page URL
-  // instead of the extension URL. Convert to absolute extension URLs.
-  replaceFontFaceUrl(fontFaceStyleSheet, (url) => {
+  const fontFaceStyleSheet = replaceFontFaceUrl(extractFontFace(styleSheet), (url) => {
     if (
       url.startsWith('data:')
       || url.startsWith('moz-extension://')

utils/css.ts

@@ -64,18 +64,18 @@ export function createStyleSheetByCssText(cssText: string) {
 }
 
 export function replaceFontFaceUrl(sheet: CSSStyleSheet, converter: (url: string) => string) {
+  let cssText = ''
   for (const rule of sheet.cssRules) {
     if (rule instanceof CSSFontFaceRule) {
-      const src = rule.style.getPropertyValue('src')
-      if (src) {
-        const newSrc = src.replace(/url\(['"]?([^'")]+)['"]?\)/g, (_match, url) => {
-          return `url('${converter(url)}')`
-        })
-        rule.style.setProperty('src', newSrc)
-      }
+      cssText += rule.cssText.replace(/url\(['"]?([^'")]+)['"]?\)/g, (_match, url) => {
+        return `url('${converter(url)}')`
+      }) + '\n'
+    }
+    else {
+      cssText += rule.cssText + '\n'
     }
   }
-  return sheet
+  return createStyleSheetByCssText(cssText)
 }
 
 export function extractFontFace(sheet: CSSStyleSheet) {