Vetur: at-rule or selector expectedcss(css-ruleorselectorexpected) validation error display for styles beginning ">>>"

[simonbrent]

Info

• Platform: Windows 10
• Vetur version: 0.24.0
• VS Code version: 1.45.1

Problem

at-rule or selector expectedcss(css-ruleorselectorexpected) validation error display for styles beginning ">>>"

Reproducible Case

Create a .vue file with the following style block:

<style scoped>
  >>> .foo { display: block; }
</style>

Open the file in VS Code - you will see the error "at-rule or selector expectedcss(css-ruleorselectorexpected)"

Disable the Veture > Validation: Style setting and reload VS Code - the error will no longer be present.

[octref]

There's no support for non-standard CSS features.

[simonbrent]

But this is the documented way to do deep selectors for scoped style:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Should I be doing * >>> .foo { display: block; } instead?

[octref]

From what I see you need to have a selector before and after >>>. What's the grammar for >>>?

[simonbrent]

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors is the only place I've seen it officially documented, which doesn't define whether you must have a selector before and after. However, I know that not having a selector before does work, since my code behaves as expected.

[octref]

You can try your luck by opening an issue here: https://github.com/microsoft/vscode-css-languageservice, but I doubt they'd make the change to accommodate non-standard CSS. Vetur uses it and it parses standard CSS/SCSS/Less.

[rchl]

You can use /deep/ instead.

[frederikheld]

Same issue with /deep/. I tried to disable the rule with /* eslint-disable-next-line */ but no luck: https://github.com/eslint/eslint/issues/11138

As /deep/ and/or >>> seem to be a (somehow hidden but) very important feature of Vue, it would be great to have eslint support or at least the option to use disable-nextline...

[simonbrent]

FYI ::v-deep appears to work without an error (for now...)