fix: multiple style tags (vuejs#116)

Author: sxzz

src/output/Preview.vue

@@ -216,15 +216,18 @@ async function updatePreview() {
     )
 
     const codeToEval = [
-      `window.__modules__ = {};window.__css__ = '';` +
+      `window.__modules__ = {};window.__css__ = [];` +
         `if (window.__app__) window.__app__.unmount();` +
         (isSSR
           ? ``
           : `document.body.innerHTML = '<div id="app"></div>' + \`${
               previewOptions?.bodyHTML || ''
             }\``),
       ...modules,
-      `setTimeout(()=> document.getElementById('__sfc-styles').innerHTML = window.__css__,1)`,
+      `setTimeout(()=> {
+        document.querySelectorAll('style[css]').forEach(el => el.remove())
+        document.head.insertAdjacentHTML('beforeend', 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
   }
 }

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

src/output/srcdoc.html

@@ -8,7 +8,6 @@
       }
     </style>
     <!-- PREVIEW-OPTIONS-HEAD-HTML -->
-    <style id="__sfc-styles"></style>
     <script>
       ;(() => {
         let scriptEls = []