Fix Themes v3 not working on Safari

3 files changed, 59 insertions, 20 deletions

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 369d2c9f..83faa0b3 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,6 +6,45 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
+// On platforms where this is not supported, it will return undefined
+// Otherwise it will return an array
+const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
+
+const createStyleSheet = (id) => {
+  if (supportsAdoptedStyleSheets) {
+    return {
+      el: null,
+      sheet: new CSSStyleSheet(),
+      rules: []
+    }
+  }
+
+  const el = document.getElementById(id)
+  // Clear all rules in it
+  for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
+    el.sheet.deleteRule(i)
+  }
+
+  return {
+    el,
+    sheet: el.sheet,
+    rules: []
+  }
+}
+
+const EAGER_STYLE_ID = 'pleroma-eager-styles'
+const LAZY_STYLE_ID = 'pleroma-lazy-styles'
+
+const adoptStyleSheets = (styles) => {
+  if (supportsAdoptedStyleSheets) {
+    document.adoptedStyleSheets = styles.map(s => s.sheet)
+  }
+  // Some older browsers do not support document.adoptedStyleSheets.
+  // In this case, we use the <style> elements.
+  // Since the <style> elements we need are already in the DOM, there
+  // is nothing to do here.
+}
+
 export const generateTheme = async (input, callbacks) => {
   const {
     onNewRule = (rule, isLazy) => {},
@@ -98,13 +137,13 @@ export const tryLoadCache = () => {
     return false
   }
   if (cache.engineChecksum === getEngineChecksum()) {
-    const styleSheet = new CSSStyleSheet()
-    const lazyStyleSheet = new CSSStyleSheet()
+    const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+    const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-    cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max'))
-    cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max'))
+    cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
+    cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
 
-    document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+    adoptStyleSheets([eagerStyles, lazyStyles])
 
     return true
   } else {
@@ -114,29 +153,27 @@ export const tryLoadCache = () => {
 }
 
 export const applyTheme = async (input, onFinish = (data) => {}) => {
-  const styleSheet = new CSSStyleSheet()
-  const styleArray = []
-  const lazyStyleSheet = new CSSStyleSheet()
-  const lazyStyleArray = []
+  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
       onNewRule (rule, isLazy) {
         if (isLazy) {
-          lazyStyleSheet.insertRule(rule, 'index-max')
-          lazyStyleArray.push(rule)
+          lazyStyles.sheet.insertRule(rule, 'index-max')
+          lazyStyles.rules.push(rule)
         } else {
-          styleSheet.insertRule(rule, 'index-max')
-          styleArray.push(rule)
+          eagerStyles.sheet.insertRule(rule, 'index-max')
+          eagerStyles.rules.push(rule)
         }
       },
       onEagerFinished () {
-        document.adoptedStyleSheets = [styleSheet]
+        adoptStyleSheets([eagerStyles])
       },
       onLazyFinished () {
-        document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
-        const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] }
+        adoptStyleSheets([eagerStyles, lazyStyles])
+        const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
         localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
index 2d9dd0b5..83ca8242 100644
--- a/src/services/theme_data/iss_utils.js
+++ b/src/services/theme_data/iss_utils.js
@@ -1,3 +1,5 @@
+import { sortBy } from 'lodash'
+
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
 // into an array [item2, item3] for iterating
 export const unroll = (item) => {
@@ -24,7 +26,7 @@ export const getAllPossibleCombinations = (array) => {
     })
     const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
     const uniqueComboStrings = new Set()
-    const uniqueCombos = flatCombos.map(x => x.toSorted()).filter(x => {
+    const uniqueCombos = flatCombos.map(sortBy).filter(x => {
       if (uniqueComboStrings.has(x.join())) {
         return false
       } else {
@@ -64,7 +66,7 @@ export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelecto
   }
 
   const selectors = [realSelector, applicableVariant, ...applicableStates]
-    .toSorted((a, b) => {
+    .sort((a, b) => {
       if (a.startsWith(':')) return 1
       if (/^[a-z]/.exec(a)) return -1
       else return 0
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 15b4493e..047ba8a2 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,6 +1,6 @@
 import { convert, brightness } from 'chromatism'
 import sum from 'hash-sum'
-import { flattenDeep } from 'lodash'
+import { flattenDeep, sortBy } from 'lodash'
 import {
   alphaBlend,
   getTextColor,
@@ -226,7 +226,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         combination.variant === 'normal'
           ? ''
           : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
-        ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+        ...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
       ].join('')
 
       let inheritedTextColor = computedDirectives.textColor