sass/libsass

@supports selector() not supported

Ariane-B opened this issue · 1 comments

@supports selector(.some-selector) does not appear to be supported by either Libsass or Dart Sass. In the mean time, is there a way I can "fake" it? The query is in a mixin in my case.

input.scss

div {
  @supports selector( *:focus-visible ) {
    color: red;
  }
}

Actual results

libsass 3.6.4-r1

Error: Invalid CSS after "	@supports ": expected @supports condition (e.g. (display: flexbox)), was "selector( *:focus-v"

Dart Sass result

dart sass 1.26.9

Error: Expected "not".
  ╷
2 │   @supports selector( *:focus-visible ) {
  │             ^

Actually expected result

@supports selector(*:focus-visible) {
  div {
    color: red; } }

version info:

$ node-sass --version
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

It seems the issue is covered by this proposal in the Sass spec: sass/sass#2780

It's marked as accepted, but it seems implementations have not yet followed? I'm a little confused about how this works. When can I expect to be able to use this?

Edit: Looks like this is underway but will not be ready anytime soon, as hinted in sass/dart-sass#1023. Reluctantly closing the issue.