Unexpected term when using calc() with $variables

Question

I use postcss-precss (simulates most of Sass features, but not math) combined with postcss-cssnext (provides newest native CSS features, i.e. calc() which I'm missing in postcss-precss).

Normally I would combine Sass and calc() by interpolating $vars with #{}:

$size-width-search-btn: 40px;
.btn--search {
    width: calc(#{$size-width-search-btn} + 5); // is compiled to: width: calc(#{$size-width-search-btn} + 5); 
}

but this interpolation doesn't seem to be supported by postcss-precss - it's not proccessed at all. Good news, however, is that it works with no interpolation:

width: calc($size-width-search-btn + 5); // is compiled to: 45px

but then my IDE (PhpStorm 2016.3) doesn't recognize this syntax and I get this irritating highlight:

despite the fact this syntax is correct.

I cannot expect that cssnext would start to support interpolated vars (because it's an awful hack anyway), I'd rather make WebStorm/PhpStorm recognize the simplified syntax with calc() and $vars:

calc($var1 + $var2)

but how?

I cannot use postcss-sass, because this loader's source maps are broken. I also don't want to change my .scss into .pcss, because JetBrain's PostCSS plugin still doesn't support some of Sass features (like $variables, or inline comments).

Answer 1

You can use variables inside like so:

calc(#{$a} + 10px)