diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js
index c0a2aad72..9f830cd72 100644
--- a/src/components/component_preview/component_preview.js
+++ b/src/components/component_preview/component_preview.js
@@ -52,7 +52,7 @@ export default {
       this.$emit('update:shadow', { axis, value: Number(value) })
     },
     update () {
-      const sheet = createStyleSheet('style-component-preview')
+      const sheet = createStyleSheet('style-component-preview', 90)
 
       sheet.clear()
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index e0f446a0e..838ac6d6c 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -412,11 +412,9 @@ const AppearanceTab = {
       }
 
 
-      const sheet = createStyleSheet('appearance-tab-previews')
+      const sheet = createStyleSheet('appearance-tab-previews', 90)
       sheet.addRule([
-        '#theme-preview-',
-        key,
-        ' {\n',
+        '#theme-preview-', key, ' {\n',
         getCssRules(theme3.eager).join('\n'),
         '\n}'
       ].join(''))
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 f92579bb2..5453da57b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -695,7 +695,7 @@ export default {
         return
       }
 
-      const sheet = createStyleSheet('style-tab-overall-preview')
+      const sheet = createStyleSheet('style-tab-overall-preview', 90)
 
       sheet.clear()
       sheet.addRule([
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 70854e3bd..4b558471f 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -697,7 +697,7 @@ export default {
         liteMode: true
       })
 
-      const sheet = createStyleSheet('theme-tab-overall-preview')
+      const sheet = createStyleSheet('theme-tab-overall-preview', 90)
       const rule = getScopedVersion(
         getCssRules(theme3.eager),
         '&'
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 6312d5b89..0cf3fb854 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -10,11 +10,12 @@ const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
 
 const stylesheets = {}
 
-export const createStyleSheet = (id) => {
+export const createStyleSheet = (id, priority) => {
   if (stylesheets[id]) return stylesheets[id]
   const newStyleSheet = {
     rules: [],
     ready: false,
+    priority,
     clear () {
       this.rules = []
     },
@@ -40,9 +41,10 @@ export const adoptStyleSheets = throttle(() => {
     document.adoptedStyleSheets = Object
       .values(stylesheets)
       .filter(x => x.ready)
-      .map(x => {
+      .sort((a, b) => a.priority - b.priority)
+      .map(sheet => {
         const css = new CSSStyleSheet()
-        x.rules.forEach(r => css.insertRule(r, css.cssRules.length))
+        sheet.rules.forEach(r => css.insertRule(r, css.cssRules.length))
         return css
       })
   } else {
@@ -50,8 +52,10 @@ export const adoptStyleSheets = throttle(() => {
 
     Object
       .values(stylesheets)
+      .filter(x => x.ready)
+      .sort((a, b) => a.priority - b.priority)
       .forEach(sheet => {
-        sheet.rules.forEach(r => holder.sheet.insertRule(r))
+        sheet.rules.forEach(r => holder.sheet.insertRule(r, holder.sheet.cssRules.length))
       })
   }
   // Some older browsers do not support document.adoptedStyleSheets.
@@ -115,8 +119,8 @@ export const tryLoadCache = async () => {
   if (!cache) return null
   try {
     if (cache.engineChecksum === getEngineChecksum()) {
-      const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
-      const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
+      const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
+      const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
 
       cache.data[0].forEach(rule => eagerStyles.addRule(rule))
       cache.data[1].forEach(rule => lazyStyles.addRule(rule))
@@ -144,8 +148,8 @@ export const applyTheme = (
   onFinish = () => {},
   debug
 ) => {
-  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
-  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
+  const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
+  const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
 
 
   const { lazyProcessFunc } = generateTheme(
@@ -165,7 +169,7 @@ export const applyTheme = (
         console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
       },
       onLazyFinished () {
-        eagerStyles.ready = true
+        lazyStyles.ready = true
         adoptStyleSheets()
         const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
@@ -235,7 +239,7 @@ export const applyConfig = (input) => {
     .filter(([, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-  const styleSheet = createStyleSheet('theme-holder')
+  const styleSheet = createStyleSheet('theme-holder', 30)
 
   styleSheet.addRule(`:root { ${rules} }`)