From dc37c7b28b2142227f73a36acc27a7ac77c7e59a Mon Sep 17 00:00:00 2001 From: tusooa Date: Fri, 31 May 2024 14:33:44 -0400 Subject: [PATCH] Fix Themes v3 not working on Safari --- changelog.d/themesv3-on-safari.fix | 1 + index.html | 2 + src/services/style_setter/style_setter.js | 69 ++++++++++++++----- src/services/theme_data/iss_utils.js | 6 +- .../theme_data/theme_data_3.service.js | 4 +- 5 files changed, 62 insertions(+), 20 deletions(-) create mode 100644 changelog.d/themesv3-on-safari.fix diff --git a/changelog.d/themesv3-on-safari.fix b/changelog.d/themesv3-on-safari.fix new file mode 100644 index 0000000000..af767b3aaa --- /dev/null +++ b/changelog.d/themesv3-on-safari.fix @@ -0,0 +1 @@ +Fix Themes v3 on Safari not working diff --git a/index.html b/index.html index e790fb57ad..6d9c4ce5c1 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + + diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 369d2c9f16..83faa0b3c1 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