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

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -31,6 +31,7 @@ import {
   getCssRules,
   getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
+import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
@@ -68,7 +69,6 @@ const colorConvert = (color) => {
 export default {
   data () {
     return {
-      themeV3Preview: [],
       themeImporter: newImporter({
         validator: this.importValidator,
         onImport: this.onImport,
@@ -697,10 +697,15 @@ export default {
         liteMode: true
       })
 
-      this.themeV3Preview = getScopedVersion(
+      const sheet = createStyleSheet('theme-tab-overall-preview')
+      const rule = getScopedVersion(
         getCssRules(theme3.eager),
-        '#theme-preview'
+        '&'
       ).join('\n')
+
+      sheet.addRule('#theme-preview {\n' + rule + '\n}')
+      sheet.ready = true
+      adoptStyleSheets()
     }
   },
   watch: {

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -123,12 +123,6 @@
       </div>
     </div>
 
-    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
-    <component
-      :is="'style'"
-      v-html="themeV3Preview"
-    />
-    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
     <preview id="theme-preview" />
 
     <div>

src/services/style_setter/style_setter.js

@@ -115,8 +115,8 @@ export const tryLoadCache = async () => {
       const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
       const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-      cache.data[0].forEach(rule => eagerStyles.addRule(rule, 'index-max'))
-      cache.data[1].forEach(rule => lazyStyles.addRule(rule, 'index-max'))
+      cache.data[0].forEach(rule => eagerStyles.addRule(rule))
+      cache.data[1].forEach(rule => lazyStyles.addRule(rule))
 
       eagerStyles.ready = true
       lazyStyles.ready = true
@@ -234,13 +234,13 @@ export const applyConfig = (input) => {
 
   const styleSheet = createStyleSheet('theme-holder')
 
-  styleSheet.addRule(`:root { ${rules} }`, 'index-max')
+  styleSheet.addRule(`:root { ${rules} }`)
 
   // TODO find a way to make this not apply to theme previews
   if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
     styleSheet.addRule(` *:not(.preview-block) {
         --roundness: var(--forcedRoundness) !important;
-    }`, 'index-max')
+    }`)
   }
   styleSheet.ready = true
   adoptStyleSheets()