修复单文件组件中同时引入多个样式文件时重名的bug; 优化vue文件的解析

lib/compile-vue.js

@@ -6,12 +6,16 @@
 
 import fs from 'iofs'
 import scss from '@bytedo/sass'
-import { createHash } from 'crypto'
+import { createHash, randomUUID } from 'crypto'
 import Es from 'esbuild'
 import { join } from 'path'
 import { compile } from '@vue/compiler-dom'
 import { red, cyan, blue } from 'kolorist'
 
+function uuid() {
+  return randomUUID().slice(-8)
+}
+
 import {
   JS_EXP,
   STYLE_EXP,
@@ -208,12 +212,8 @@ export function parseJs(
           if (isBuild) {
             name = name.replace(/\.scss/, '.css')
           }
-          let tmp = `style${Date.now()}`
-          fixedStyle += `
-          let __sheets__ = [...document.adoptedStyleSheets]
-          __sheets__.push(${tmp})
-          document.adoptedStyleSheets = __sheets__
-          `
+          let tmp = `style_${uuid()}`
+          fixedStyle += `__sheets__.push(${tmp})\n`
 
           // 修正那反人类的windows路径
           return `import ${tmp} from '${name}' assert { type: 'css' }\n${tmp}.path = '${name.replace(
@@ -300,7 +300,12 @@ export function compileVue(file, imports, options = {}, isBuild) {
     isCustomElement: tag => tag.startsWith('wc-')
   }).code.replace('export function render', 'function render')
 
-  output += html + '\n\n'
+  html = html
+    .replace(/import .* from "vue"/, str => {
+      output += str + '\n'
+      return ''
+    })
+    .trim()
 
   if (CACHE[file]) {
     CACHE[file] = {
@@ -314,7 +319,7 @@ export function compileVue(file, imports, options = {}, isBuild) {
 
   output += parseJs(js, imports, options, isBuild, file).replace(
     'export default {',
-    'const __sfc__ = {\n  render,\n'
+    `\nconst __sheets__ = [...document.adoptedStyleSheets]\n${html}\n\nconst __sfc__ = {\n  render,\n`
   )
 
   if (scss) {
@@ -322,11 +327,12 @@ export function compileVue(file, imports, options = {}, isBuild) {
 
     // 修正那反人类的windows路径
     output += `
-let stylesheet = new CSSStyleSheet()
-let __sheets__ = [...document.adoptedStyleSheets]
-stylesheet.path = '${filename}'
-stylesheet.replaceSync(\`${scss}\`)
-__sheets__.push(stylesheet)
+{
+  let stylesheet = new CSSStyleSheet()
+  stylesheet.path = '${filename}'
+  stylesheet.replaceSync(\`${scss}\`)
+  __sheets__.push(stylesheet)
+}
 document.adoptedStyleSheets = __sheets__
 `
   }