fix component preview styles

src/components/settings_modal/tabs/appearance_tab.js

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

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

@@ -729,7 +729,7 @@ export default {
     // Apart from "hover" we can't really show how component looks like in
     // certain states, so we have to fake them.
     const simulatePseudoSelectors = (css, prefix) => css
-      .replace(prefix, '.component-preview .preview-block')
+      .replace(prefix, '.preview-block')
       .replace(':active', '.preview-active')
       .replace(':hover', '.preview-hover')
       .replace(':active', '.preview-active')

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

@@ -155,12 +155,6 @@
           </ul>
         </div>
         <div class="preview-container">
-          <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
-          <component
-            :is="'style'"
-            v-html="previewCss"
-          />
-          <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
           <ComponentPreview
             class="component-preview"
             :show-text="componentHas('Text')"