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).

So your problem is that PhpStorm doesn't support a certain, kind of hacky, syntax? — Kyle
Well -- PhpStorm's PostCSS plugin page clearly indicates what modules it supports. The variables ticket (looks similar in terms of variables definition): youtrack.jetbrains.com/issue/WEB-24368 (github.com/postcss/postcss-simple-vars). In mean time -- use CSS Custom properties perhaps (w3.org/TR/css-variables). P.S. All PostCSS tickets: youtrack.jetbrains.com/issues/WEB?q=postcss — LazyOne
@Kyle No, please read carefully - this hacky syntax is normally supported, the simplified syntax (with no $var interpolation) is not supported. — van_folmert
@LazyOne - thanks, if I find no better alternative, I'm probably going to switch to native CSS vars, .pcss and PostCSS plugin. — van_folmert

Daniel Kemeny Daniel Kemeny · Accepted Answer · 2019-04-20T11:20:57

17

votes

You can use variables inside like so:

calc(#{$a} + 10px)

Unexpected term when using calc() with $variables

1 Answers