fix: multiple style tags

closes #79
vuejs · Jun 25, 2023 · d981424 · d981424
1 parent 02c8fc8
commit d981424
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/output/Preview.vue b/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('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
@@ -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
@@ -8,7 +8,6 @@
       }
     </style>
     <!-- PREVIEW-OPTIONS-HEAD-HTML -->
-    <style id="__sfc-styles"></style>
     <script>
       ;(() => {
         let scriptEls = []