Can't use !important for css vars

[bhollis]

input.scss

body {
    --foo: 999 !important;
}

Actual results

libsass 3.5.0 via node-sass 4.8.1

Invalid CSS after "999": expected "}", was "!important;"

Expected result

body {
    --foo: 999 !important;
}

(This worked fine in node-sass 4.7.2 / libsass 3.5.0.beta.2)

version info:

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

[asottile]

Bisects to efd97da

[mgreter]

AFAICT ruby sass 3.5 (and latest dart-sass) gives the same error!

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#3_5_0__12_July_2017_

The way CSS variables are handled has changed to better correspond to the CSS spec. They no longer allow arbitrary SassScript in their values; instead, almost all text in the property values will be passed through unchanged to CSS. The only exception is #{}, which will inject a SassScript value as before.

[xzyfer]

According to the spec, this is allowed

Note: Custom properties can contain a trailing !important, but this is automatically removed from the property’s value by the CSS parser, and makes the custom property "important" in the CSS cascade. In other words, the prohibition on top-level "!" characters does not prevent !important from being used, as the !important is removed before syntax checking happens.

This is a bug in all the Sass implementations.

[xzyfer]

I filed an issue with the reference implementation sass/dart-sass#260

[xzyfer]

This has been fixed in ruby sass and dart sass

[xzyfer]

Spec added sass/sass-spec#1236