bytedo
/
fite
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

重构style[scoped]的实现

pull/1/head 0.7.3
yutent 2023-04-27 17:13:58 +08:00
parent 574dd7e693
commit d5dcd44fec
2 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
lib/compile-vue.js
View File

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

2
lib/constants.js
View File

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