From c302957a78b10d28b3c5fc19faebb4b40fd07342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 25 Jun 2023 12:20:28 +0800
Subject: [PATCH] fix: multiple style tags

closes #79
---
 src/output/Preview.vue       | 8 ++++++--
 src/output/moduleCompiler.ts | 4 ++--
 src/output/srcdoc.html       | 1 -
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index ee20d4ad..fa0de49d 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -216,7 +216,7 @@ async function updatePreview() {
     )
 
     const codeToEval = [
-      `window.__modules__ = {};window.__css__ = '';` +
+      `window.__modules__ = {};window.__css__ = [];` +
         `if (window.__app__) window.__app__.unmount();` +
         (isSSR
           ? ``
@@ -224,7 +224,10 @@ async function updatePreview() {
               previewOptions?.bodyHTML || ''
             }\``),
       ...modules,
-      `setTimeout(()=> document.getElementById('__sfc-styles').innerHTML = window.__css__,1)`,
+      `setTimeout(()=> {
+        document.querySelectorAll('style[css]').forEach(el => el.remove())
+        document.head.insertAdjacentHTML('afterbegin', window.__css__.map(s => \`<style css>\${s}</style>\`).join('\\n'))
+      }, 1)`,
     ]
 
     // if main file is a vue file, mount it.
@@ -256,6 +259,7 @@ async function updatePreview() {
     // eval code in sandbox
     await proxy.eval(codeToEval)
   } catch (e: any) {
+    console.error(e)
     runtimeError.value = (e as Error).message
   }
 }
diff --git a/src/output/moduleCompiler.ts b/src/output/moduleCompiler.ts
index 57a047a6..d726109a 100644
--- a/src/output/moduleCompiler.ts
+++ b/src/output/moduleCompiler.ts
@@ -28,7 +28,7 @@ export function compileModulesForPreview(store: Store, isSSR = false) {
         const file = store.state.files[filename]
         if (!seen.has(file)) {
           processed.push(
-            `\nwindow.__css__ += ${JSON.stringify(file.compiled.css)}`
+            `\nwindow.__css__.push(${JSON.stringify(file.compiled.css)})`
           )
         }
       }
@@ -79,7 +79,7 @@ function processFile(
   )
   // append css
   if (file.compiled.css && !isSSR) {
-    js += `\nwindow.__css__ += ${JSON.stringify(file.compiled.css)}`
+    js += `\nwindow.__css__.push(${JSON.stringify(file.compiled.css)})`
   }
 
   // push self
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
index 6e30d766..f93ff788 100644
--- a/src/output/srcdoc.html
+++ b/src/output/srcdoc.html
@@ -8,7 +8,6 @@
       }
     </style>
     <!-- PREVIEW-OPTIONS-HEAD-HTML -->
-    <style id="__sfc-styles"></style>
     <script>
       ;(() => {
         let scriptEls = []