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

feat(sfc): ::slotted selector support

Browse Source
This commit is contained in:
Evan You 2019-12-16 16:45:10 -05:00
parent 69c9dbc825
commit f194aa0eea
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,12 +5,12 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
const id: string = options const id: string = options
const keyframes = Object.create(null) const keyframes = Object.create(null)
root.each(function rewriteSelector(node: any) { root.each(function rewriteSelectors(node: any) {
if (!node.selector) { if (!node.selector) {
// handle media queries // handle media queries
if (node.type === 'atrule') { if (node.type === 'atrule') {
if (node.name === 'media' || node.name === 'supports') { if (node.name === 'media' || node.name === 'supports') {
node.each(rewriteSelector) node.each(rewriteSelectors)
} else if (/-?keyframes$/.test(node.name)) { } else if (/-?keyframes$/.test(node.name)) {
// register keyframes // register keyframes
keyframes[node.params] = node.params = node.params + '-' + id keyframes[node.params] = node.params = node.params + '-' + id
@ -18,26 +18,26 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
} }
return return
} }
node.selector = selectorParser((selectors: any) => { node.selector = selectorParser((selectors: any) => {
selectors.each((selector: any) => { selectors.each(function rewriteSelector(
selector: any,
_i: number,
slotted?: boolean
) {
let node: any = null let node: any = null
// 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) => {
// ">>>" combinator if (n.type === 'pseudo' && n.value === '::v-deep') {
// and /deep/ alias for >>>, since >>> doesn't work in SASS n.value = n.spaces.before = n.spaces.after = ''
if (
n.type === 'combinator' &&
(n.value === '>>>' || n.value === '/deep/')
) {
n.value = ' '
n.spaces.before = n.spaces.after = ''
return false return false
} }
// in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias if (n.type === 'pseudo' && n.value === '::v-slotted') {
if (n.type === 'pseudo' && n.value === '::v-deep') { rewriteSelector(n.nodes[0], 0, true)
n.value = n.spaces.before = n.spaces.after = '' selectors.insertAfter(selector, n.nodes[0])
selectors.removeChild(selector)
return false return false
} }
@ -55,12 +55,14 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => {
selector.first.spaces.before = '' selector.first.spaces.before = ''
} }
const idToAdd = slotted ? id + '-s' : id
selector.insertAfter( selector.insertAfter(
node, node,
selectorParser.attribute({ selectorParser.attribute({
attribute: id, attribute: idToAdd,
value: id, value: idToAdd,
raws: {} raws: {},
quoteMark: `"`
}) })
) )
}) })

6
packages/runtime-core/src/renderer.ts
View File

@ -384,13 +384,15 @@ export function createRenderer<
} }
// scopeId // scopeId
if (__BUNDLER__ && scopeId !== null) { if (__BUNDLER__) {
if (scopeId !== null) {
hostSetScopeId(el, scopeId) hostSetScopeId(el, scopeId)
}
const treeOwnerId = parentComponent && parentComponent.type.__scopeId const treeOwnerId = parentComponent && parentComponent.type.__scopeId
// vnode's own scopeId and the current patched component's scopeId is // vnode's own scopeId and the current patched component's scopeId is
// different - this is a slot content node. // different - this is a slot content node.
if (treeOwnerId != null && treeOwnerId !== scopeId) { if (treeOwnerId != null && treeOwnerId !== scopeId) {
hostSetScopeId(el, treeOwnerId + '::slot') hostSetScopeId(el, treeOwnerId + '-s')
} }
} }