i spent too much time on this

fix component preview styles
2025-07-02 02:26:17 +03:00 · 2025-07-02 00:36:37 +03:00
8 changed files with 271 additions and 241 deletions
--- a/index.html
+++ b/index.html
@ -11,9 +11,13 @@
    <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" />
+    <style id="pleroma-eager-styles"></style>
+    <style id="pleroma-lazy-styles"></style>
+    <style id="theme-holder"></style>
+    <style id="theme-preview-holder"></style>
+    <style id="component-style-holder"></style>
+    <style id="editor-overall-preview-holder"></style>
+    <style id="old-editor-preview-style-holder"></style>
    <!--server-generated-meta-->
  </head>
  <body>
--- a/public/static/empty.css
+++ b/public/static/empty.css
@ -1 +0,0 @@
-// nothing here //
--- a/src/components/component_preview/component_preview.js
+++ b/src/components/component_preview/component_preview.js
@ -0,0 +1,80 @@
+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'
+
+export default {
+  components: {
+    Checkbox,
+    ColorInput
+  },
+  props: [
+    'shadow',
+    'shadowControl',
+    'previewClass',
+    'previewStyle',
+    'previewCss',
+    'disabled',
+    'invalid',
+    'noColorControl'
+  ],
+  emits: ['update:shadow'],
+  data () {
+    return {
+      colorOverride: undefined,
+      lightGrid: false,
+      zoom: 100,
+      randomSeed: genRandomSeed()
+    }
+  },
+  computed: {
+    hideControls () {
+      return typeof this.shadow === 'string'
+    }
+  },
+  watch: {
+    previewCss () {
+      this.update()
+    },
+    previewStyle () {
+      this.update()
+    },
+    zoom () {
+      this.update()
+    }
+  },
+  methods: {
+    updateProperty (axis, value) {
+      this.$emit('update:shadow', { axis, value: Number(value) })
+    },
+    update () {
+      const styleEl = document.getElementById('component-style-holder')
+      const styleSheet = styleEl.sheet
+
+      for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
+        styleSheet.deleteRule(i)
+      }
+
+      const result = []
+
+      if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
+
+      const styleRule = [
+        '#component-preview-', this.randomSeed, ' {\n',
+        '.preview-block {\n',
+        `zoom: ${this.zoom / 100};`,
+        this.previewStyle,
+        '\n}',
+        '\n}'
+      ].join('')
+
+      styleSheet.insertRule(styleRule)
+      styleSheet.insertRule([
+        '#component-preview-', this.randomSeed, ' {\n',
+        this.previewCss,
+        ...result,
+        '\n}'
+      ].join(''), 'index-max')
+    }
+  }
+}
--- a/src/components/component_preview/component_preview.scss
+++ b/src/components/component_preview/component_preview.scss
@ -0,0 +1,151 @@
+.ComponentPreview {
+  display: grid;
+  grid-template-columns: 1em 1fr 1fr 1em;
+  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
+  grid-template-areas:
+    "header     header     header     header "
+    "preview    preview    preview    y-slide"
+    "preview    preview    preview    y-slide"
+    "preview    preview    preview    y-slide"
+    "x-slide    x-slide    x-slide    .      "
+    "x-num      x-num      y-num      y-num  "
+    "assists    assists    assists    assists";
+  grid-gap: 0.5em;
+
+  &:not(.-shadow-controls) {
+    grid-template-areas:
+      "header     header     header     header "
+      "preview    preview    preview    y-slide"
+      "preview    preview    preview    y-slide"
+      "preview    preview    preview    y-slide"
+      "assists    assists    assists    assists";
+    grid-template-rows: 2em 1fr 1fr 1fr max-content;
+  }
+
+  .header {
+    grid-area: header;
+    place-self: baseline center;
+    line-height: 2;
+  }
+
+  .invalid-container {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center center;
+    background-color: rgb(100 0 0 / 50%);
+
+    .alert {
+      padding: 0.5em 1em;
+    }
+  }
+
+  .assists {
+    grid-area: assists;
+    display: grid;
+    grid-auto-flow: row;
+    grid-auto-rows: 2em;
+    grid-gap: 0.5em;
+  }
+
+  .input-light-grid {
+    justify-self: center;
+  }
+
+  .input-number {
+    min-width: 2em;
+  }
+
+  .x-shift-number {
+    grid-area: x-num;
+    justify-self: right;
+  }
+
+  .y-shift-number {
+    grid-area: y-num;
+    justify-self: left;
+  }
+
+  .x-shift-number,
+  .y-shift-number {
+    input {
+      max-width: 4em;
+    }
+  }
+
+  .x-shift-slider {
+    grid-area: x-slide;
+    height: auto;
+    align-self: start;
+    min-width: 10em;
+  }
+
+  .y-shift-slider {
+    grid-area: y-slide;
+    writing-mode: vertical-lr;
+    justify-self: left;
+    min-height: 10em;
+  }
+
+  .x-shift-slider,
+  .y-shift-slider {
+    padding: 0;
+  }
+
+  .preview-window {
+    --__grid-color1: rgb(102 102 102);
+    --__grid-color2: rgb(153 153 153);
+    --__grid-color1-disabled: rgb(102 102 102 / 20%);
+    --__grid-color2-disabled: rgb(153 153 153 / 20%);
+
+    &.-light-grid {
+      --__grid-color1: rgb(205 205 205);
+      --__grid-color2: rgb(255 255 255);
+      --__grid-color1-disabled: rgb(205 205 205 / 20%);
+      --__grid-color2-disabled: rgb(255 255 255 / 20%);
+    }
+
+    position: relative;
+    grid-area: preview;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 10em;
+    min-height: 10em;
+    background-color: var(--__grid-color2);
+    background-image:
+      linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+    border-radius: var(--roundness);
+
+    &.disabled {
+      background-color: var(--__grid-color2-disabled);
+      background-image:
+        linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
+    }
+
+    .preview-block {
+      background: var(--background, var(--bg));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 33%;
+      min-height: 33%;
+      max-width: 80%;
+      max-height: 80%;
+      border-width: 0;
+      border-style: solid;
+      border-color: var(--border);
+      border-radius: var(--roundness);
+      box-shadow: var(--shadow);
+    }
+  }
+}
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@ -2,13 +2,8 @@
  <div
    class="ComponentPreview"
    :class="{ '-shadow-controls': shadowControl }"
+    :id="'component-preview-' + randomSeed"
  >
-    <!-- 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 -->
    <label
      v-show="shadowControl"
      role="heading"
@ -74,7 +69,6 @@
      <div
        class="preview-block"
        :class="previewClass"
-        :style="style"
      >
        {{ $t('settings.style.themes3.editor.test_string') }}
      </div>
@ -116,203 +110,5 @@
  </div>
 </template>

-<script>
-import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ColorInput from 'src/components/color_input/color_input.vue'
-
-export default {
-  components: {
-    Checkbox,
-    ColorInput
-  },
-  props: [
-    'shadow',
-    'shadowControl',
-    'previewClass',
-    'previewStyle',
-    'previewCss',
-    'disabled',
-    'invalid',
-    'noColorControl'
-  ],
-  emits: ['update:shadow'],
-  data () {
-    return {
-      colorOverride: undefined,
-      lightGrid: false,
-      zoom: 100
-    }
-  },
-  computed: {
-    style () {
-      const result = [
-        this.previewStyle,
-        `zoom: ${this.zoom / 100}`
-      ]
-      if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
-      return result
-    },
-    hideControls () {
-      return typeof this.shadow === 'string'
-    }
-  },
-  methods: {
-    updateProperty (axis, value) {
-      this.$emit('update:shadow', { axis, value: Number(value) })
-    }
-  }
-}
-</script>
-<style lang="scss">
-.ComponentPreview {
-  display: grid;
-  grid-template-columns: 1em 1fr 1fr 1em;
-  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
-  grid-template-areas:
-    "header     header     header     header "
-    "preview    preview    preview    y-slide"
-    "preview    preview    preview    y-slide"
-    "preview    preview    preview    y-slide"
-    "x-slide    x-slide    x-slide    .      "
-    "x-num      x-num      y-num      y-num  "
-    "assists    assists    assists    assists";
-  grid-gap: 0.5em;
-
-  &:not(.-shadow-controls) {
-    grid-template-areas:
-      "header     header     header     header "
-      "preview    preview    preview    y-slide"
-      "preview    preview    preview    y-slide"
-      "preview    preview    preview    y-slide"
-      "assists    assists    assists    assists";
-    grid-template-rows: 2em 1fr 1fr 1fr max-content;
-  }
-
-  .header {
-    grid-area: header;
-    place-self: baseline center;
-    line-height: 2;
-  }
-
-  .invalid-container {
-    position: absolute;
-    inset: 0;
-    display: grid;
-    place-items: center center;
-    background-color: rgb(100 0 0 / 50%);
-
-    .alert {
-      padding: 0.5em 1em;
-    }
-  }
-
-  .assists {
-    grid-area: assists;
-    display: grid;
-    grid-auto-flow: row;
-    grid-auto-rows: 2em;
-    grid-gap: 0.5em;
-  }
-
-  .input-light-grid {
-    justify-self: center;
-  }
-
-  .input-number {
-    min-width: 2em;
-  }
-
-  .x-shift-number {
-    grid-area: x-num;
-    justify-self: right;
-  }
-
-  .y-shift-number {
-    grid-area: y-num;
-    justify-self: left;
-  }
-
-  .x-shift-number,
-  .y-shift-number {
-    input {
-      max-width: 4em;
-    }
-  }
-
-  .x-shift-slider {
-    grid-area: x-slide;
-    height: auto;
-    align-self: start;
-    min-width: 10em;
-  }
-
-  .y-shift-slider {
-    grid-area: y-slide;
-    writing-mode: vertical-lr;
-    justify-self: left;
-    min-height: 10em;
-  }
-
-  .x-shift-slider,
-  .y-shift-slider {
-    padding: 0;
-  }
-
-  .preview-window {
-    --__grid-color1: rgb(102 102 102);
-    --__grid-color2: rgb(153 153 153);
-    --__grid-color1-disabled: rgb(102 102 102 / 20%);
-    --__grid-color2-disabled: rgb(153 153 153 / 20%);
-
-    &.-light-grid {
-      --__grid-color1: rgb(205 205 205);
-      --__grid-color2: rgb(255 255 255);
-      --__grid-color1-disabled: rgb(205 205 205 / 20%);
-      --__grid-color2-disabled: rgb(255 255 255 / 20%);
-    }
-
-    position: relative;
-    grid-area: preview;
-    aspect-ratio: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 10em;
-    min-height: 10em;
-    background-color: var(--__grid-color2);
-    background-image:
-      linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
-    background-size: 20px 20px;
-    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-    border-radius: var(--roundness);
-
-    &.disabled {
-      background-color: var(--__grid-color2-disabled);
-      background-image:
-        linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
-        linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
-        linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
-    }
-
-    .preview-block {
-      background: var(--background, var(--bg));
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-width: 33%;
-      min-height: 33%;
-      max-width: 80%;
-      max-height: 80%;
-      border-width: 0;
-      border-style: solid;
-      border-color: var(--border);
-      border-radius: var(--roundness);
-      box-shadow: var(--shadow);
-    }
-  }
-}
-</style>
+<script src="./component_preview.js" />
+<style src="./component_preview.scss" lang="scss" />
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/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-',
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/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,12 +738,12 @@ 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.
    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')
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/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"
@ -155,12 +147,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')"
Author	SHA1	Message	Date
Henry Jameson	567bccb9fa	i spent too much time on this	2025-07-02 02:26:17 +03:00
Henry Jameson	1cb4740fc9	fix component preview styles	2025-07-02 00:36:37 +03:00