Merge branch 'fix-style-editors' into shigusegubu-themes3

index.html

@@ -11,17 +11,26 @@
     <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" />
-    <link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="pleroma-lazy-styles" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="theme-holder" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="theme-preview-holder" type="text/css" href="/static/empty.css" />
-
     <!-- These seem to work better in dev mode but don't work at all with strict CSP -->
-    <style rel="stylesheet" id="component-style-holder"></style>
-    <style rel="stylesheet" id="editor-overall-holder"></style>
-    <style rel="stylesheet" id="old-editor-overall-holder"></style>
+    <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" />
+    <link rel="stylesheet" id="pleroma-lazy-styles-link" type="text/css" href="/static/empty.css" />
+
+    <link rel="stylesheet" id="theme-holder-link" type="text/css" href="/static/empty.css" />
+
+    <link rel="stylesheet" id="theme-previews-holder-link" type="text/css" href="/static/empty.css" />
+
     <link rel="stylesheet" id="component-style-holder-link" type="text/css" href="/static/empty.css" />
     <link rel="stylesheet" id="editor-overall-holder-link" type="text/css" href="/static/empty.css" />
     <link rel="stylesheet" id="old-editor-overall-holder-link" type="text/css" href="/static/empty.css" />

src/components/component_preview/component_preview.js

@@ -2,6 +2,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
 
 import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
+import { createStyleSheet } from 'src/services/style_setter/style_setter.js'
 
 export default {
   components: {
@@ -27,6 +28,9 @@ export default {
       randomSeed: genRandomSeed()
     }
   },
+  mounted () {
+    this.update()
+  },
   computed: {
     hideControls () {
       return typeof this.shadow === 'string'
@@ -48,18 +52,9 @@ export default {
       this.$emit('update:shadow', { axis, value: Number(value) })
     },
     update () {
-      let styleEl = document.getElementById('component-style-holder')
-      if (!styleEl.sheet) {
-        styleEl = document.getElementById('component-style-holder')
-      }
-      const styleSheet = styleEl.sheet
-
-      for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
-        styleSheet.deleteRule(i)
-      }
+      const styleSheet = createStyleSheet('component-style-holder').sheet
 
       const result = []
-
       if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
 
       const styleRule = [

src/components/settings_modal/tabs/appearance_tab.js

@@ -410,7 +410,10 @@ const AppearanceTab = {
         this.compilationCache[key] = theme3
       }
 
-      const styleEl = document.getElementById('theme-preview-holder')
+      let styleEl = document.getElementById('theme-previews-holder')
+      if (!styleEl.sheet) {
+        styleEl = document.getElementById('theme-previews-holder-link')
+      }
       const styleSheet = styleEl.sheet
       styleSheet.insertRule([
         '#theme-preview-',

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

@@ -1,6 +1,6 @@
-import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, watch, provide, getCurrentInstance } from 'vue'
 import { useInterfaceStore } from 'src/stores/interface'
-import { get, set, unset, throttle } from 'lodash'
+import { get, set, unset } from 'lodash'
 
 import Select from 'src/components/select/select.vue'
 import SelectMotion from 'src/components/select/select_motion.vue'
@@ -23,6 +23,7 @@ import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js
 import { getCssRules } from 'src/services/theme_data/css_utils.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
 import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { createStyleSheet } from 'src/services/style_setter/style_setter.js'
 import {
   rgb2hex,
   hex2rgb,
@@ -667,7 +668,7 @@ export default {
     })
 
     exports.clearStyle = () => {
-      onImport(interfaceStore().styleDataUsed)
+      onImport(interfaceStore.styleDataUsed)
     }
 
     exports.exportStyle = () => {
@@ -694,15 +695,7 @@ export default {
         return
       }
 
-      let styleEl = document.getElementById('editor-overall-holder')
-      if (!styleEl.sheet) {
-        styleEl = document.getElementById('editor-overall-holder-link')
-      }
-      const styleSheet = styleEl.sheet
-
-      for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
-        styleSheet.deleteRule(i)
-      }
+      const styleSheet = createStyleSheet('editor-overall-holder')
 
       styleSheet.insertRule([
         '#edited-style-preview {\n',

src/services/style_setter/style_setter.js

@@ -6,9 +6,11 @@ import localforage from 'localforage'
 
 // On platforms where this is not supported, it will return undefined
 // Otherwise it will return an array
-const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
+const supportsAdoptedStyleSheets = false //!!document.adoptedStyleSheets
 
-const createStyleSheet = (id) => {
+const adoptedStyleSheets = {}
+
+export const createStyleSheet = (id) => {
   if (supportsAdoptedStyleSheets) {
     return {
       el: null,
@@ -17,7 +19,10 @@ const createStyleSheet = (id) => {
     }
   }
 
-  const el = document.getElementById(id)
+  let el = document.getElementById(id)
+  if (!el?.sheet) {
+    el = document.getElementById(id + '-link')
+  }
   // Clear all rules in it
   for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
     el.sheet.deleteRule(i)
@@ -32,6 +37,7 @@ const createStyleSheet = (id) => {
 
 const EAGER_STYLE_ID = 'pleroma-eager-styles'
 const LAZY_STYLE_ID = 'pleroma-lazy-styles'
+const THEME_HOLDER_ID = 'theme-holder'
 
 const adoptStyleSheets = (styles) => {
   if (supportsAdoptedStyleSheets) {
@@ -239,8 +245,7 @@ export const applyConfig = (input) => {
     .filter(([, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-  const styleEl = document.getElementById('theme-holder')
-  const styleSheet = styleEl.sheet
+  const styleSheet = createStyleSheet(THEME_HOLDER_ID).sheet
 
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')