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: eslint/eslint#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...)

[DMOAbove]

I am getting this error with this:

:deep(.select-input) {
    .dropdown-container {
      @apply bg-dark-stone #{!important};
      .dropdown-menu {
        .dropdown-input-select-item {
          &:hover {
            @apply text-white #{!important};
          }
        }
      }
    } <- gives error here

Seems related with interpolating the important from tailwind. If I remove both importants the error doesn't happen.

[dcvermeer]

@Keyframes slideFromLeft7 {
0% {
width: 0;
}
100% {
width: %;
}
} <---- gives a "at-rule or selector expectedcss(css-ruleorselectorexpected)"
i have no clue how to fix it ?