fix(compiler-sfc): auto add nesting selector for nesting ::v-deep

[edison1105]

close #13159

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	38.1 kB	34.4 kB
vue.global.prod.js	158 kB	58.3 kB	51.9 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.4 kB	18.2 kB	16.6 kB
createApp	54.4 kB	21.2 kB	19.4 kB
createSSRApp	58.6 kB	22.9 kB	20.9 kB
defineCustomElement	59.2 kB	22.7 kB	20.7 kB
overall	68.5 kB	26.4 kB	24 kB

[pkg-pr-new[bot]]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13163

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13163

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13163

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13163

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13163

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13163

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13163

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13163

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13163

vue

npm i https://pkg.pr.new/vue@13163

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13163

commit: bfd11af

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	:white_check_mark: success	:white_check_mark: success
quasar	:white_check_mark: success	:white_check_mark: success
primevue	:white_check_mark: success	:white_check_mark: success
pinia	:white_check_mark: success	:white_check_mark: success
nuxt	:white_check_mark: success	:white_check_mark: success
radix-vue	:white_check_mark: success	:white_check_mark: success
test-utils	:white_check_mark: success	:white_check_mark: success
vite-plugin-vue	:white_check_mark: success	:white_check_mark: success
router	:white_check_mark: success	:white_check_mark: success
vant	:white_check_mark: success	:white_check_mark: success
vueuse	:white_check_mark: success	:white_check_mark: success
vue-i18n	:white_check_mark: success	:white_check_mark: success
vitepress	:white_check_mark: success	:white_check_mark: success
vue-simple-compiler	:white_check_mark: success	:white_check_mark: success
vuetify	:white_check_mark: success	:white_check_mark: success
vue-macros	:white_check_mark: success	:white_check_mark: success

[skirtles-code]

I think we'd also need to consider the case where the & is inside the :deep(). e.g.:

.foo {
  .bar :deep(&) {
    color: red;
  }
}

• Playground

This works on main, but it breaks with this PR due to the extra &.

The example above uses :deep(&), but the selector inside the :deep() could be something more complex, rather than just &.

---

I'm also wondering about media queries within the nesting. e.g.:

.foo {
  @media (screen) {
    :deep(.bar) {
      color: red;
    }
  }
}

There are quite a lot of edge cases here. Some combinations of nesting seem to work, while others don't.

I'm not sure whether this would be considered in scope for this PR, as some cases fail even without :deep().

[cchangwen]

强烈建议保留 :deep inner-selector 语法，因为它更符合语言上的直觉

而 :deep(inner-selector) 多了个小括号语法，是额外的知识负担 而且需要多次看文档、踩坑，才能理解它的一些细节 比如 :deep(inner-selector) 会强制添加空格，这和 scss 的 & 语法冲突：

div:deep() {
  &:hover span { color: red; }
}

// 编译结果：
// 这里 :hover 前面多了个非预期的空格
div[data-v-2ecdb3cb] :hover span {
  color: red;
}

而 :deep 能与 scss 的 & 语法兼容，显然更灵活， 重要的是它符合直觉、容易理解：只需要把 :deep 理解成决定 [data-v-] 位置 css 伪类

div:deep {
  &:hover span { color: red; }
  ... 更多嵌套规则，也只需要在外层加一个 :deep
}

div[data-v-2ecdb3cb]:hover span {
  color: red;
}

https://github.com/orgs/vuejs/discussions/13446

[dylanmccall]

Oh, I didn't realize there was a pull request for this! I added a note over here: https://github.com/vuejs/core/issues/13159#issuecomment-3215357316. I'd really prefer to see Vue adhering to the CSS spec in this case, rather than deviating from it further.