16

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:

enter image description here

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

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

1 Answers1

23

You can use variables inside like so: 

calc(#{$a} + 10px)
Daniel Kemeny
  • 640
  • 1
  • 5
  • 11