优化样式scoped的实现; 优化HMR恢复时刷新页面

lib/compile-vue.js

@@ -30,12 +30,8 @@ function md5(str = '') {
 }
 
 function scopeCss(css = '', hash) {
-  let rules = css.matchAll(CSS_SHEET_EXP)
-
-  return [...rules]
-    .map(r => {
-      let selector = r[1]
-      let style = r[2]
+  return css.replace(CSS_SHEET_EXP, (m, selector) => {
+    if (!selector.startsWith('@')) {
       selector = selector.split(',')
 
       selector = selector
@@ -51,10 +47,9 @@ function scopeCss(css = '', hash) {
           return tmp.join(' ')
         })
         .join(', ')
-
-      return selector + ` {${style}}`
-    })
-    .join('\n')
+    }
+    return selector + '{'
+  })
 }
 
 /**
@@ -224,7 +219,7 @@ export function compileVue(file, imports, options = {}, isBuild) {
       let scoped = it[0].includes('scoped')
       let css = compileScss(it[1])
       if (scoped) {
-        return scopeCss(css, hash)
+        css = scopeCss(css, hash)
       }
       return css
     })

lib/constants.js

@@ -8,8 +8,7 @@ export const JS_EXP = /<script[^>]*?>([\w\W]*?)<\/script>/
 export const STYLE_EXP = /<style[^>]*?>([\w\W]*?)<\/style>/g
 export const HTML_EXP = /<template[^>]*?>([\w\W]*?)<\/template>/
 
-export const CSS_SHEET_EXP =
-  /([\w\.,#\-:>\+\~\|\(\)\[\]"'\=\s]+)\{([^\{\}]*?)\}/g
+export const CSS_SHEET_EXP = /([@\w\.,#\-:>\+\~\|\(\)\[\]"'\=\s]+)\{/g
 
 export const COMMON_HEADERS = {
   'Cache-Control': 'no-store'
@@ -20,10 +19,15 @@ export const HMR_SCRIPT = `
   var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-vue-live\`)
 
   ws.addEventListener('open', function (r) {
+    if(vue_live_hmr.closed){
+      delete vue_live_hmr.closed
+      location.reload()
+    }
     console.log('vue-live hmr ready...')
   })
 
   ws.addEventListener('close', function(){
+    vue_live_hmr.closed = true
     setTimeout(vue_live_hmr, 2000)
   })
   

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bytedo/vue-live",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "bin": {
     "vue-live": "index.js"
   },