i spent too much time on this

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

@@ -20,10 +20,7 @@ import Preview from '../theme_tab/theme_preview.vue'
 import VirtualDirectivesTab from './virtual_directives_tab.vue'
 
 import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
-import {
-  getCssRules,
-  getScopedVersion
-} from 'src/services/theme_data/css_utils.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 {
@@ -688,21 +685,38 @@ export default {
     const overallPreviewRules = ref([])
     exports.overallPreviewRules = overallPreviewRules
 
-    const overallPreviewCssRules = ref([])
-    watchEffect(throttle(() => {
+    watch([overallPreviewRules], () => {
+      let css = null
       try {
-        overallPreviewCssRules.value = getScopedVersion(
-          getCssRules(overallPreviewRules.value),
-          '#edited-style-preview'
-        ).join('\n')
+        css = getCssRules(overallPreviewRules.value).map(r => r.replace('html', '&'))
       } catch (e) {
         console.error(e)
+        return
       }
-    }, 500))
 
-    exports.overallPreviewCssRules = overallPreviewCssRules
+      const styleEl = document.getElementById('editor-overall-preview-holder')
+      const styleSheet = styleEl.sheet
 
-    const updateOverallPreview = throttle(() => {
+      console.log(styleSheet)
+      console.log('BEFORE', styleSheet.cssRules)
+      for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
+        styleSheet.deleteRule(i)
+      }
+
+      styleSheet.insertRule([
+        '#edited-style-preview {\n',
+        css.join('\n'),
+        '\n}'
+      ].join(''), 'index-max')
+      styleSheet.insertRule([
+        '#edited-style-preview {\n',
+        css.join('\n'),
+        '\n}'
+      ].join(''), 'index-max')
+      console.log('AFTER', styleSheet.cssRules)
+    })
+
+    const updateOverallPreview = () => {
       try {
         overallPreviewRules.value = init({
           inputRuleset: [
@@ -724,7 +738,7 @@ export default {
         console.error('Could not compile preview theme', e)
         return null
       }
-    }, 5000)
+    }
     //
     // Apart from "hover" we can't really show how component looks like in
     // certain states, so we have to fake them.

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -6,14 +6,6 @@
     <div class="setting-item heading">
       <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
       <div class="meta-preview">
-        <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-        <!-- eslint-disable vue/no-v-html -->
-        <component
-          :is="'style'"
-          v-html="overallPreviewCssRules"
-        />
-        <!-- eslint-enable vue/no-v-html -->
-        <!-- eslint-enable vue/no-v-text-v-html-on-component -->
         <Preview id="edited-style-preview" />
         <teleport
           v-if="isActive"