重构style[scoped]的实现

lib/compile-vue.js

@@ -38,6 +38,16 @@ function md5(str = '') {
   return sum.digest('hex').slice(0, 8)
 }
 
+function parseVDeep(curr, val, scoped) {
+  let res = V_DEEP.exec(curr)
+  if (res) {
+    scoped && (val = val.replace(/\[data\-[^\]]+\]/g, ''))
+    return `${res[1] + res[2]} ${val}`
+  } else {
+    return `${curr} ${val}`
+  }
+}
+
 function scopeCss(css = '', hash) {
   return css.replace(CSS_SHEET_EXP, (m, selector) => {
     if (!selector.startsWith('@')) {
@@ -50,29 +60,28 @@ function scopeCss(css = '', hash) {
             return s
           }
           let tmp = s.split(' ')
-          let last = tmp.pop()
-          if (last.includes(':')) {
-            let res = V_DEEP.exec(last)
-            if (res) {
-              if (tmp.length) {
-                last = tmp.pop()
-                last += `[data-${hash}] `
+          let output = ''
+          let last
+          let scoped = false
+
+          while ((last = tmp.pop())) {
+            if (scoped) {
+              if (last.startsWith(':')) {
+                output = parseVDeep(last, output, true)
               } else {
-                last = res[1]
+                output = `${last} ${output}`
               }
             } else {
               if (last.startsWith(':')) {
-                let _prev = tmp.pop()
-                last = `${_prev}[data-${hash}] ` + last
+                output = parseVDeep(last, output)
               } else {
-                last = last.replace(':', `[data-${hash}]:`)
+                scoped = true
+                output = `${last}[data-${hash}] ${output}`
               }
             }
-          } else {
-            last += `[data-${hash}]`
           }
-          tmp.push(last)
-          return tmp.join(' ')
+
+          return output
         })
         .join(', ')
     }

lib/constants.js

@@ -7,7 +7,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]*?)\n<\/template>/
-export const V_DEEP = /:deep\(([^)]*?)\)/
+export const V_DEEP = /:deep\(([^)]*?)\)(.*)/
 
 export const CSS_SHEET_EXP = /([%@\w\.,#\-:>\+\~\|\(\)\[\]"'\=\s]+)\{/g
 export const PERCENT_EXP = /^\d+%$/