"css-ruleorselectorexpected" when combine "apply" with "important" in .vue style tag

[horans]

What version of Tailwind CSS IntelliSense are you using?

v0.9.7

What version of Tailwind CSS are you using?

v3.2.7

What package manager are you using?

npm

What operating system are you using?

Windows10

Tailwind config

Describe your issue

I am running TailwindCSS with Vue/Vite and SASS. When I trying to employ #{!important} along with @apply in my .vue component's style tag, VScode is showing "at-rule or selector expectedscss(css-ruleorselectorexpected)" error at the end. However it's ok to run/compile, so I guess it has something to do with VScode displaying.

/* ✔ works just fine */
<style lang="scss">
.test-ok {
  @apply m-0;
}
</style>

/* ❌ showing error but ok to run */
<style lang="scss">
.test-error {
  @apply m-0 #{!important};
} //at-rule or selector expectedscss(css-ruleorselectorexpected)
</style>

possible related issues:

• postcss(css-lcurlyexpected) error with Tailwind media query screen() function vuejs/language-tools#791
• Sass variable interpolation broken in an unknown at rule value microsoft/vscode-css-languageservice#269

[bradlc]

Hey @horans. Unfortunately this is not something we can control. The only way that I'm aware of to suppress the message is to disable SCSS validation using the scss.validate setting:

"scss.validate": false

I hope that helps!

[relliv]

@bradlc hi, thanks for the suggestion. when I added this to the .vscode/settings.json file and then the error was suppressed.