title: Unexpected term when using calc() with $variables
body: <p>I use <a href="https://github.com/jonathantneal/precss" rel="noreferrer">postcss-precss</a> (simulates most of Sass features, but not math) combined with <a href="https://github.com/MoOx/postcss-cssnext" rel="noreferrer">postcss-cssnext</a> (provides newest native CSS features, i.e. calc() which I'm missing in postcss-precss).</p>
  
  <p>Normally I would combine Sass and calc() by interpolating <code>$vars</code> with <code>#{}</code>:</p>
  
  <pre><code>$size-width-search-btn: 40px;
  .btn--search {
      width: calc(#{$size-width-search-btn} + 5); // is compiled to: width: calc(#{$size-width-search-btn} + 5); 
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>width: calc($size-width-search-btn + 5); // is compiled to: 45px
  </code></pre>
  
  <p>but then my IDE (PhpStorm 2016.3) doesn't recognize this syntax and I get this irritating highlight:</p>
  
  <p><a href="https://i.stack.imgur.com/ATIzo.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ATIzo.jpg" alt="enter image description here"></a></p>
  
  <p>despite the fact this syntax is correct.</p>
  
  <p>I cannot expect that cssnext would start to support interpolated vars (because it's an awful hack anyway), <strong>I'd rather make WebStorm/PhpStorm recognize the simplified syntax with calc() and $vars</strong>: </p>
  
  <pre><code>calc($var1 + $var2)
  </code></pre>
  
  <p>but how?</p>
  
  <p>I cannot use postcss-sass, because this loader's source maps are <a href="https://stackoverflow.com/questions/40784122/sass-loader-generates-broken-source-maps">broken</a>. I also don't want to change my .scss into .pcss, because JetBrain's <a href="https://plugins.jetbrains.com/plugin/8578" rel="noreferrer">PostCSS plugin</a> still doesn't support some of Sass features (like $variables, or inline comments).</p>