theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(sfc): ::v-global() pseudo selector support

Browse Source
This commit is contained in:
Evan You 2019-12-17 11:06:56 -05:00
parent 8ea2101553
commit 31ca7858bb
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/compiler-sfc/src/stylePluginScoped.ts
View File

@ -29,18 +29,34 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
// find the last child node to insert attribute selector // find the last child node to insert attribute selector
selector.each((n: any) => { selector.each((n: any) => {
if (n.type === 'pseudo' && n.value === '::v-deep') { if (n.type === 'pseudo') {
// deep: inject [id] attribute at the node before the ::v-deep
// combinator.
// .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
if (n.value === '::v-deep') {
n.value = n.spaces.before = n.spaces.after = '' n.value = n.spaces.before = n.spaces.after = ''
return false return false
} }
if (n.type === 'pseudo' && n.value === '::v-slotted') { // slot: use selector inside `::v-slotted` and inject [id + '-s']
rewriteSelector(n.nodes[0], 0, true) // instead.
// ::v-slotted(.foo) -> .foo[xxxxxxx-s]
if (n.value === '::v-slotted') {
rewriteSelector(n.nodes[0], 0, true /* slotted */)
selectors.insertAfter(selector, n.nodes[0]) selectors.insertAfter(selector, n.nodes[0])
selectors.removeChild(selector) selectors.removeChild(selector)
return false return false
} }
// global: replace with inner selector and do not inject [id].
// ::v-global(.foo) -> .foo
if (n.value === '::v-global') {
selectors.insertAfter(selector, n.nodes[0])
selectors.removeChild(selector)
return false
}
}
if (n.type !== 'pseudo' && n.type !== 'combinator') { if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n node = n
} }