Subscribe on changes!

incorrect warning about "::v-deep", when ":deep" is wrongly used in a nested block with SASS

avatar
May 15th 2023

Vue version

3.2.47

Link to minimal reproduction

https://codesandbox.io/s/vue-next-sass-v-deep-compiler-warning-forked-qcvg7p?file=/src/App.vue

Steps to reproduce

NOTE: click the minimal reproduction link and change the vuejs version to another, then return 3.2.47 to get the warning, it wont appear when you enter minimal reproduction first time. just use :deep selector{style;}, then got incorrect warning

What is expected?

got correct warning

What is actually happening?

when i use :deep .class{style;}, it works but warn me ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

System Info

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.

Any additional comments?

vdeep judge code

log the n

n.nodes

avatar
May 16th 2023

I don't think this is a bug, but rather a problem of relatively bad coding style. The introduction in the official document also uses :deep(xxxx), just like the native pseudo-class selector :nth-of-type(n), not using parentheses will cause postcss-selector-parser to generate Different results, so I think the prompt can be enhanced