Vscode: CSS @supports throws errors

[tomliv]

Using @supports in scss and css throws errors.

• VSCode Version: 1.13.0
• OS Version: MacOS 10.12.5

Steps to Reproduce:

1. Using this syntax:
   @supports ( prop: value ) {
   /* styles */
   }
   Errors are flagged in bottom info bar.

2.

[tomliv]

My apologies. I think this is in the wrong place. This is for the caniuse extension. Moving...

[tomliv]

Nope. Two separate issues. Carry on. Reopening...

[bradkemper]

Yeah, the spec for @supports and other conditionals (@media) has been stable for at least 4 years:

https://www.w3.org/TR/css3-conditional/

The "problems" panel also seems to be even confused by the syntax of where the curly brackets are, implying it doesn't really parse unknown @ rules in general well either.

[lrs]

Also throws out autocomplete:

*even with scss.validate set to false in settings.

**I can work around for now by moving the @supports block to a separate file and importing to my main scss file. e.g.:

// use @supports to exclude <=IE11 because SVG doesn't stick to bottom when browser window gets smaller.
@import 'welcome_supports';

[codingcircus]

Is this on the roadmap already? Would be great to get support for this feature soon.

[achenwei-chwy]

yea crazy annoying keep seeing all these red curlies under so many places because one @support on top....

Can we have some sort of hack to at least disable scss from linting @support? That will be great.

How those curlies look like? See it here https://stackoverflow.com/questions/45595698/vs-code-report-support-in-scss-mode-that-expected/45602610#45602610

[aeschli]

duplicate of #1505