Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(compiler-sfc): support global selector nesting #12416

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(compiler-sfc): support global selector nesting #12416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions packages/compiler-sfc/__tests__/compileStyle.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,12 +181,40 @@ color: red
".foo .bar { color: red;
}"
`)
// global ignores anything before it

expect(compileScoped(`.baz .qux ::v-global(.foo .bar) { color: red; }`))
.toMatchInlineSnapshot(`
".foo .bar { color: red;
".baz .qux[data-v-test] .foo .bar { color: red;
Copy link
Member

@edison1105 edison1105 Nov 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original behavior was that global would ignore the preceding rules, but it will no longer do so after this PR. this will introduce some edge cases. see:

}"
`)

expect(compileScoped(`::v-global(body) h1 { color: red; }`))
.toMatchInlineSnapshot(`
"body h1[data-v-test] { color: red;
}"
`)

expect(compileScoped(`::v-global(body h1) { color: red; }`))
.toMatchInlineSnapshot(`
"body h1 { color: red;
}"
`)

expect(compileScoped(`html ::v-global(body) h1 { color: red; }`))
.toMatchInlineSnapshot(`
"html body h1[data-v-test] { color: red;
}"
`)

expect(compileScoped(`::v-global(body){ color: red; h1 { color: blue; } }`))
.toMatchInlineSnapshot(`
"body{
&{ color: red;
}
h1[data-v-test] { color: blue;
}
}"
`)
})

test(':is() and :where() with multiple selectors', () => {
Expand Down
19 changes: 15 additions & 4 deletions packages/compiler-sfc/src/style/pluginScoped.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,14 @@ function rewriteSelector(
) {
let node: selectorParser.Node | null = null
let shouldInject = !deep
let wrappedGlobal = false
// find the last child node to insert attribute selector
selector.each(n => {
if ((rule as any).__global) {
shouldInject = false
return false
}

// DEPRECATED ">>>" and "/deep/" combinator
if (
n.type === 'combinator' &&
Expand Down Expand Up @@ -189,8 +195,12 @@ function rewriteSelector(
// global: replace with inner selector and do not inject [id].
// ::v-global(.foo) -> .foo
if (value === ':global' || value === '::v-global') {
selector.replaceWith(n.nodes[0])
return false
n.replaceWith(...n.nodes)
if (selector.nodes.length === 1) {
shouldInject = false
wrappedGlobal = true
return false
}
}
}

Expand Down Expand Up @@ -233,7 +243,7 @@ function rewriteSelector(
if (rule.nodes.some(node => node.type === 'rule')) {
const deep = (rule as any).__deep
if (!deep) {
extractAndWrapNodes(rule)
extractAndWrapNodes(rule, wrappedGlobal)
const atruleNodes = rule.nodes.filter(node => node.type === 'atrule')
for (const atnode of atruleNodes) {
extractAndWrapNodes(atnode)
Expand Down Expand Up @@ -281,7 +291,7 @@ function isSpaceCombinator(node: selectorParser.Node) {
return node.type === 'combinator' && /^\s+$/.test(node.value)
}

function extractAndWrapNodes(parentNode: Rule | AtRule) {
function extractAndWrapNodes(parentNode: Rule | AtRule, wrappedGlobal = false) {
if (!parentNode.nodes) return
const nodes = parentNode.nodes.filter(
node => node.type === 'decl' || node.type === 'comment',
Expand All @@ -294,6 +304,7 @@ function extractAndWrapNodes(parentNode: Rule | AtRule) {
nodes: nodes,
selector: '&',
})
;(wrappedRule as any).__global = wrappedGlobal
parentNode.prepend(wrappedRule)
}
}
Expand Down