Vue-loader: /deep/ selector will be deprecated soon

[Jack-Works]

Version

12.2.2

Reproduction link

http://no-link/

Steps to reproduce

1. Use /deep/.

What is expected?

Nothing happened.

What is actually happening?

A deprecation warning.

---

[Deprecation] /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.

[yyx990803]

Use >>> instead.

[Jack-Works]

And less can not recognize >>>

[yyx990803]

Then you can just ignore the warning... /deep/ is compiled away and does not appear in your final CSS.

[Jack-Works]

Oh, that's cool, thanks

On Sat, 5 Aug 2017, 02:21 Evan You, [e-mail] wrote:

Then you can just ignore the warning... /deep/ is compiled away and does
not appear in your final CSS.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-loader/issues/913#issuecomment-320319528,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFJBfyRuboaygxgWgESN5zrMOj3FYn6Zks5sU2EvgaJpZM4OnU76
.

[Varkal]

That's not works for me : /deep/ selector aren't compiled at all.
Maybe sass-loader need a specific configuration to transpile them ?

[Yuliang-Lee]

@Varkal Did you solved this problem?

[Varkal]

I think i have made a mistake because now it's works... and don't change anything to my setup...

[paglias]

Confirmed that /deep/ isn't compiled away

[mercs600]

the same for me

[sesopenko]

Does this mean that vue-loader won't parse & replace /deep/ selectors, as described in the Scoped CSS documentation of vue-loader?

Some pre-processors, such as SASS, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.

Is this the feature being deprecated?

[mattaningram]

I'm confused, >>> doesn't work in scss for me, but /deep/ does, is this going to be removed?

[bovas85]

@mattaningram and @sesopenko, as Evan said, /deep/ is compiled from sass to css so it's not used in the build version in production

[julian-ca]

It's almost a year since this was reported and I'm still confused. :/

>>> won't work

[bovas85]

Use /deep/

[pbastowski]

/deep/ is no longer supported by Chrome.

I get the following message:

So, how do we do deep selectors now? Or is there a workaround that does not require them any more?

[Justineo]

>>> or /deep/ is just a compile-time thing and will not be included in your runtime code. If you see a deprecation warning, it’s probably because your style is not properly compiled via Vue Loader.

[ThomHurks]

This Angular commit says:

• /deep/ is deprecated and being removed from Chrome
• ">>>" is semantically invalid in a stylesheet
• sass will no longer support either in any version of sass

-> use ::ng-deep in emulated shadow DOM mode

Because the deep combinator is deprecated in the CSS spec,
/deep/, >>> and ::ng-deep are also deprecated in emulated shadow DOM mode
and will be removed in the future.

So it seems that vue-loader will hit the same problem? If >>> and /deep/ are not valid SASS/SCSS then we can't use it because you would get a parse error before you even get tovue-loader.

[bovas85]

I get that warning in production

[Justineo]

@bovas85 https://github.com/vuejs/vue-loader/issues/913#issuecomment-437237791

[mohamedelhosseiny]

https://stackoverflow.com/questions/35741722/whats-the-substitute-for-shadow-and-deep

I tried replicating the instructions given in the above thread in a Vue component but it doesn't seem to work. However, it is working fine with AngularJs.

How can I use :host() & :host-context() in a Vue component?

[pbastowski]

@mohamedelhosseiny
/deep/ still works for me inside Vue component files. These are file that have the .vue suffix.
It does not work for me in .scss or .css files.