Merge branch 'fix-palememe' into 'develop'

Fix Palemoon

See merge request pleroma/pleroma-fe!2072

changelog.d/palemoon-css-compatibility.fix

@@ -0,0 +1 @@
+Fix CSS compatibility issues in style_setter.js for older browsers like Palemoon

src/main.js

@@ -5,6 +5,13 @@ import { createPinia } from 'pinia'
 import 'custom-event-polyfill'
 import './lib/event_target_polyfill.js'
 
+// Polyfill for Array.prototype.toSorted (ES2023)
+if (!Array.prototype.toSorted) {
+  Array.prototype.toSorted = function(compareFn) {
+    return [...this].sort(compareFn)
+  }
+}
+
 import vuexModules from './modules/index.js'
 
 import { createI18n } from 'vue-i18n'

src/services/style_setter/style_setter.js

@@ -124,16 +124,33 @@ export const applyTheme = (
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
   const insertRule = (styles, rule) => {
-    if (rule.indexOf('webkit') >= 0) {
+    try {
+      // Try to use modern syntax first
       try {
         styles.sheet.insertRule(rule, 'index-max')
         styles.rules.push(rule)
-      } catch (e) {
-        console.warn('Can\'t insert rule due to lack of support', e)
+      } 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)
       }
-    } else {
-      styles.sheet.insertRule(rule, 'index-max')
-      styles.rules.push(rule)
     }
   }