diff --git a/index.html b/index.html
index e27aa6850..1423b00f0 100644
--- a/index.html
+++ b/index.html
@@ -11,13 +11,13 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/public/static/empty.css b/public/static/empty.css
deleted file mode 100644
index 3dfa88151..000000000
--- a/public/static/empty.css
+++ /dev/null
@@ -1 +0,0 @@
-// nothing here //
diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js
index 455fc1e8a..ae80ad947 100644
--- a/src/components/component_preview/component_preview.js
+++ b/src/components/component_preview/component_preview.js
@@ -51,8 +51,8 @@ export default {
const styleEl = document.getElementById('component-style-holder')
const styleSheet = styleEl.sheet
- for (let i = styleEl.sheet.cssRules.length - 1; i >= 0; --i) {
- styleEl.sheet.deleteRule(i)
+ for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
+ styleSheet.deleteRule(i)
}
const result = []
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 184fd0d62..5268ad4e7 100644
--- 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,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.
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index fc1f4437b..a386822ee 100644
--- 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 @@
{{ $t('settings.style.themes3.editor.title') }}