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

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.

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(…)

Maybe this will help someone resolve this issue in larger code bases. We made the changes above to use :deep() { ... } and did so using regex find/replace

Find: ::v-deep (.*?) \{ Replace :deep($1) {

And for any that are strung together: Find: ::v-deep (.*?), Replace :deep($1),

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.

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

:deep() {
  .class {}
}

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 {}
}

We cleaned up all the ::v-deep occurrences in our code but I believe the warnings keep happening because third party libraries use still ::v-deep with the old syntax.

[@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?

vue2 fixed: v2.7.11 https://github.com/vuejs/vue/releases/tag/v2.7.11 https://github.com/vuejs/vue/commit/2f335b2f9d09b962f40e38740826d444e4fff073

https://github.com/vuejs/core/issues/4745#issuecomment-1254989020

Thank you, that was it!

instead of: ::v-deep.v-text-field .v-input__prepend-inner I used: .v-text-field :deep(.v-input__prepend-inner)

in a case more complicated, instead of: ::v-deep.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer I used: .v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined :deep(.v-input__prepend-outer)

And if we’ve something as: ::v-deep.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded) > .v-input__control > .v-input__slot:hover fieldset Solution would be: .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded) > :deep(.v-input__control > .v-input__slot:hover fieldset)

Hope it helps others

https://github.com/vuejs/core/issues/4745#issuecomment-1256583705

About the regex, I recommend those instead:

This one will do the same as both on comment above: FIND: ::v-deep (.+?)(\s?(\{|,)) REPLACE: :deep($1)$2

And this one for multiple lines: FIND: ::v-deep((\s*\n\s*.+?)*)(\s*(\{|,)) REPLACE: :deep($1)$3

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.

vue3 没有根节点，如何用:deep(xxx)进行样式穿透？第一种可行，但会抛出警告，第二种没有效果

<template>
    <my-box-01></my-box-01>
    <my-box-02></my-box-02>
</template>

<style scoped lang="scss">
// 没有效果，这种该怎么写
:deep(.my-box-01) {
    background-color: red;
    .mb-text {
        color: green;
    }
}

</style>

I was able to migrate all to :deep, but I’ve found out that the style is not the same anymore. It doesn’t overwrite the css classes.

I am using vue 2 (2.7.10) + nuxt(2.15.8) + vuetify(2.6.10)

I was changing one component that only have this simple css line:

::v-deep.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
  > .v-input__control
  > .v-input__slot {
  padding: 0 4px;
}

This was the result on the final code, it was overwriting vuetify class as it should:

And when changed to

:deep(.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
  > .v-input__control
  > .v-input__slot) {
  padding: 0 4px;
}```

The padding is not being overwritten anymore.

![image](https://user-images.githubusercontent.com/101707687/189876983-51694643-c0a7-46c5-a62c-f8098527b67e.png)

When I do as you suggested I get an error in the IDE

[@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?

hi, do you find any solutions for this?

A solution is kindly needed for this. Warnings keeps coming up even after removing all ::v-deep occurrences from the code.

A helpful feature is to add a file path or code reference for where the warning is being triggered. This will surely help locating the issue and fix it.

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

• This warning is really disturbing in console, just because it occurs too much.
• I hope it’s displayed less time or removed at all as soon as possible.

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(…)

As @adamxi remarked, this feature is expected to come soon. If this is possible, it’s not a problem that above warning is shown.

So, I discover that :deep(.class) works the same as ::v-deep .class BUT then… how can I do ::v-deep.class (without spaces) with the new :deep() ?