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

[theHacker]

Version

3.2.19

Reproduction link

codesandbox.io

Steps to reproduce

• Use Vue 3 with SFC and SASS
• Use :deep inside a nested block

<style scoped lang="scss">
:deep {
  // more rules
}

:deep() {
  // more rules
}
</style>

What is expected?

A clear definition in the manual, what is the correct way to do this.

I would expect the first syntax to work at least.
For the second syntax I would either expect the same, or a fitting error message, telling me, that this is not allowed.

What is actually happening?

https://v3.vuejs.org/api/sfc-style.html#style-scoped only has an easy example .a :deep(.b), but no nesting together with SASS.

The first syntax works, but brings up a misleading warn message

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

I do not use the (legacy) ::v-deep, but moved to the (new Vue3) :deep.

The second syntax works as intended without any warning. However I am not sure, if this is intended by Vue.

---

Being not so deep into Vue and its modules and dependencies, I am not sure, whether this is a SASS thing, a Vue thing or whether you two have to figure this out together.

I just lost a few hours searching for an incompatible library, just ending up finding it's still a component of mine and the deprecation message mislead me totally. Hope, this bug report helps others :)

I read and understood, that you don't want to answer questions, but I think the question, whether :deep() { ... } is the right way to go, should be answered (and put into the manual). Thank you! :)

Affected version:
I noticed it after upgrading from Vue 2 to 3.1.0, but the issue is also reproducible with latest 3.2.19 (see sandbox)

[yyx990803]

The new syntax require using :deep (or ::v-deep) as a pseudo function - i.e. the parens are required:

:deep {} /* this is wrong */

:deep(div) {} /* this is correct */

Without parens you are using it as a combinator, which is exactly what the message is warning you about.

[adamxi]

Is there any way to disable the warning?
We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

[webturtles18]

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

::v-deep {
  .v-input--dense {}
  .v-skeleton-loader {}
}

I don't understand how to use :deep() for above scenario.

can anyone help for the same?

[monaounagi]

@webturtles18
The following worked, but I am not sure if it is the intended use, as @theHacker says.

:deep() {
  .class {}
}

[edum18]

@webturtles18 The following worked, but I am not sure if it is the intended use, as @theHacker says.

:deep() {
  .class {}
}

@monaounagi Didn't work in my case. Gives me the following error:
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js): friendly-errors 15:43:31 ModuleBuildError: Module build failed (from ./node_modules/vue-loader/lib/loaders/stylePostLoader.js): TypeError: Cannot read properties of undefined (reading 'spaces')

[rs3d]

I'm having the same issue and would like to see, that ::v-deep could be supported in parallel or maybe to add an option to disable the warning. I'm currently migrating from webpack to vite (at least for development), but this is the last incompatibility I need to overcome (prod=webpack, dev=vite).

[adamxi]

I can add that we managed to make it work the same as before using:

:deep() {
  ..
}

[zhylmzr]

If you use less, you can nest styles in two ways.

// component style
@deep: ~':deep()';
@{deep} {
    .cls-1 {}
	.cls-2 {}
}

or

// vite.config.js
export default {
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    'deep': ':deep()'
                }
            },
        },
    },
}

// component style
@{deep} {
    .cls-1 {}
	.cls-2 {}
}

[gkatsanos]

Is there any way to disable the warning? We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

@yyx990803 we would appreciate a solution to this, we're working with a 200 component Nuxt app and our DX is ruined by the flood of warnings. We don't wanna be warned.

[vaban-ru]

Is there any way to disable the warning? We are upgrading an exiting project from Vue 2x to Vue 3. Due to technical reasons out of scope to explain here, we have +12000 lines of scss nested under a single ::v-deep { .. }. It's not an alternative for us to wrap every single class in a :deep(..)

@yyx990803 we would appreciate a solution to this, we're working with a 200 component Nuxt app and our DX is ruined by the flood of warnings. We don't wanna be warned.

Same problem, someone found a solution? May be some SCSS mixin?