unifification and testing

index.html

@@ -11,17 +11,6 @@
     <link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
     <!-- putting styles here to avoid having to wait for styles to load up -->
     <link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
-    <!-- These seem to work better in dev mode but don't work at all with strict CSP -->
-    <style id="pleroma-eager-styles"></style>
-    <style id="pleroma-lazy-styles"></style>
-
-    <style id="theme-holder"></style>
-
-    <style id="theme-previews-holder"></style>
-
-    <style id="component-style-holder"></style>
-    <style id="editor-overall-holder"></style>
-    <style id="old-editor-overall-holder"></style>
 
     <!-- These work with strict CSP... somehow -->
     <link rel="stylesheet" id="pleroma-eager-styles-link" type="text/css" href="/static/empty.css" />

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -695,7 +695,7 @@ export default {
         return
       }
 
-      const styleSheet = createStyleSheet('editor-overall-holder')
+      const styleSheet = createStyleSheet('editor-overall-holder').sheet
 
       styleSheet.insertRule([
         '#edited-style-preview {\n',

src/services/style_setter/style_setter.js

@@ -8,8 +8,6 @@ import localforage from 'localforage'
 // Otherwise it will return an array
 const supportsAdoptedStyleSheets = false //!!document.adoptedStyleSheets
 
-const adoptedStyleSheets = {}
-
 export const createStyleSheet = (id) => {
   if (supportsAdoptedStyleSheets) {
     return {
@@ -23,15 +21,47 @@ export const createStyleSheet = (id) => {
   if (!el?.sheet) {
     el = document.getElementById(id + '-link')
   }
+  console.log(el)
+  const sheet = el.sheet
   // Clear all rules in it
-  for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
-    el.sheet.deleteRule(i)
+  for (let i = sheet.cssRules.length - 1; i >= 0; --i) {
+    sheet.deleteRule(i)
   }
+  const rules = []
 
   return {
     el,
-    sheet: el.sheet,
-    rules: []
+    rules,
+    sheet,
+    add (rule) {
+      try {
+        try {
+          sheet.insertRule(rule, 'index-max')
+          rules.push(rule)
+        } catch {
+          // Fallback for older browsers that don't support 'index-max'
+          sheet.insertRule(rule, sheet.cssRules.length)
+          rules.push(rule)
+        }
+      } catch (e) {
+        console.warn('Can\'t insert rule due to lack of support', e, rule)
+
+        // Try to sanitize the rule for better compatibility
+        try {
+          // Remove any potentially problematic CSS features
+          let sanitizedRule = rule
+              .replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
+              .replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
+
+          if (sanitizedRule !== rule) {
+            sheet.insertRule(sanitizedRule, sheet.cssRules.length)
+            rules.push(sanitizedRule)
+          }
+        } catch (e2) {
+          console.error('Failed to insert even sanitized rule', e2)
+        }
+      }
+    }
   }
 }
 
@@ -103,8 +133,8 @@ export const tryLoadCache = async () => {
       const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
       const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-      cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
-      cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
+      cache.data[0].forEach(rule => eagerStyles.add(rule))
+      cache.data[1].forEach(rule => lazyStyles.add(rule))
 
       adoptStyleSheets([eagerStyles, lazyStyles])
 
@@ -129,45 +159,14 @@ export const applyTheme = (
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-  const insertRule = (styles, rule) => {
-    try {
-      // Try to use modern syntax first
-      try {
-        styles.sheet.insertRule(rule, 'index-max')
-        styles.rules.push(rule)
-      } catch {
-        // Fallback for older browsers that don't support 'index-max'
-        styles.sheet.insertRule(rule, styles.sheet.cssRules.length)
-        styles.rules.push(rule)
-      }
-    } catch (e) {
-      console.warn('Can\'t insert rule due to lack of support', e, rule)
-
-      // Try to sanitize the rule for better compatibility
-      try {
-        // Remove any potentially problematic CSS features
-        let sanitizedRule = rule
-          .replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
-          .replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
-
-        if (sanitizedRule !== rule) {
-          styles.sheet.insertRule(sanitizedRule, styles.sheet.cssRules.length)
-          styles.rules.push(sanitizedRule)
-        }
-      } catch (e2) {
-        console.error('Failed to insert even sanitized rule', e2)
-      }
-    }
-  }
-
   const { lazyProcessFunc } = generateTheme(
     input,
     {
       onNewRule (rule, isLazy) {
         if (isLazy) {
-          insertRule(lazyStyles, rule)
+          lazyStyles.add(rule)
         } else {
-          insertRule(eagerStyles, rule)
+          eagerStyles.add(rule)
         }
       },
       onEagerFinished () {
@@ -245,15 +244,15 @@ export const applyConfig = (input) => {
     .filter(([, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-  const styleSheet = createStyleSheet(THEME_HOLDER_ID).sheet
+  const styleSheet = createStyleSheet(THEME_HOLDER_ID)
 
-  styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
+  styleSheet.add(`:root { ${rules} }`)
 
   // TODO find a way to make this not apply to theme previews
   if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
-    styleSheet.insertRule(` *:not(.preview-block) {
+    styleSheet.add(` *:not(.preview-block) {
         --roundness: var(--forcedRoundness) !important;
-    }`, 'index-max')
+    }`)
   }
 }