@supports fails when passing variables

[jhpratt]

input.scss

@mixin supports($prop, $val) {
  @supports ($prop: $val) {
    $prop: $val;
  }
}

div {
  @include supports(display, flow-root);
}

Actual results

node-sass 4.5.3 (via gulp)

Error: Invalid CSS after "  @supports (": expected "}", was "$prop: $val) {"
        on line 2 of css/all.scss
>>   @supports ($prop: $val) {
   ------------^

Expected result

ruby sass 3.5.1

@supports (display: flow-root) {
  div {
    display: flow-root; } }

Spec sass/sass-spec#1219

[nschonni]

Trying with Ruby 3.4.21 on sassmeister doesn't output anything.

To find the version of node-sass installed with gulp-sass, try npm ls node-sass

[jhpratt]

@nschonni node-sass is 4.5.3.

[nschonni]

Can you also confirm the Ruby Sass version as well, since I didn't get any output when trying on Sassmeister.

[jhpratt]

Just running sass --version, which is what I think you want, gives 3.5.1, which is the current release.

[nschonni]

I'm not 💯 that the variables in the support query is supported, but using the @supports without the mixin works in both Ruby and Node so I'll update the title

div {
  @supports(display: flow-root) {
    display: flow-root;
  }
}

[jhpratt]

Ah, gotcha. It works using regular compilation, that's why I couldn't figure out why it wasn't working. Thanks for figuring that out! Hopefully this can be resolved at some point.

[meduzen]

I encountered this blocking situation while writing a @mixin. I have a @supports declaration with logic. Basically, and a bit shortened, what I’d like to do is this, which seems impossible at the moment:

@each $offset, $val in $offsets {
  @supports(#{$prop}-#{$offset}: unquote('max(0px)')) {
    #{$prop}-#{$offset}: unquote('max(constant(safe-area-inset#{$offset}), #{$value})');
  }
}

[hitautodestruct]

This issue is occurring for me on node-sass v4.7.2 any ideas if this will be fixed?

[xzyfer]

The issue here is that Sass does not support $variables as the prop in @supports.

$prop: display;
$val: flow-root;

div {
  @supports ($prop: $val) {
    $prop: $val;
  }
}

The following works as expected.

$val: flow-root;

div {
  @supports (display: $val) {
    display: $val;
  }
}

There are a couple things here:

• Dart and Ruby produce no output (@nex3 can you please comment on whether this is intended?)
• LibSass throws an error (it should either do nothing, or do something, but not error)

[nex3]

@xzyfer The Dart/Ruby output is intended. The issue isn't that @supports ($prop: $val) doesn't work (it does); the issue is that the $prop: $val; in the body is a variable assignment, not a property declaration. If you wrote instead

$prop: display;
$val: flow-root;

div {
  @supports ($prop: $val) {
    #{$prop}: $val;
  }
}

Ruby and Dart Sass will both produce

@supports (display: flow-root) {
  div {
    display: flow-root;
  }
}

[xzyfer]

@nex3 thanks for clearing that up. Makes total sense.