postcss-simple-vars not working

[catamphetamine]

I'm using:

• postcss-simple-vars
• postcss-mixins
• postcss-calc

postcss-calc can only be placed after postcss-simple-vars, otherwise it throws.

If I place postcss-mixins anywhere after postcss-simple-vars it throws:

Undefined variable $infix

  62 | // https://github.com/twbs/bootstrap/blob/76d8291e3846d95b40dc4509a2e1bf36b0681a28/dist/css/bootstrap-grid.css
  63 |
> 64 | @define-mixin define_columns $infix
     | ^
  65 | {
  66 |  // http://getbootstrap.com.vn/examples/equal-height-columns/

Because postcss-simple-vars tries to interpret the mixin argument as a standalone variable.

If I place postcss-mixins before postcss-simple-vars then for such source code:

$grid-unit : 12px;

$screen-sm-min : calc($grid-unit * 64); // 768px
$screen-xs-max : calc($screen-sm-min - 1);
$screen-md-min : calc($grid-unit * 82); // 984px
$screen-sm-max : calc($screen-md-min - 1);
$screen-lg-min : calc($grid-unit * 100); // 1200px
$screen-md-max : calc($screen-lg-min - 1);

@define-mixin xs
{
  @media all and (max-width: $screen-xs-max)
  {
    @mixin-content;
  }
}

.title
{
  @mixin xs
  {
    color: red;
  }
}

It outputs:

@media (max-width: calc(12px * 64))
{
  .title
  {
    color: red;
  }
}

Which doesn't work because calc() doesn't work inside a media query.

If postcss-mixins used some other symbol for declaring mixin arguments then this bug would be resolved.

[ai]

Hi. Really interesting problem :).

Since every plugin run one-by-one, you see a limit of PostCSS here. We have a way to solve it (we call it event based plugin API), but it is a long way.

As I quick solution, you can put variables to JS file and load it by variables option.

[catamphetamine]

Ok, I'm closing this since it's pushing the limits of PostCSS further than it can currently handle.

[ai]

Maybe the best way is to use postcss-custom-media instead of custom mixins. In this case you can put postcss-custom-media after postcss-calc and postcss-simple-vars.

PostCSS way is not use CSSWG spec instead of mixins. The system will be more simple and work more stable.

[catamphetamine]

Hmm, so it becomes @media (--xs) { instead of @mixin xs {.
Dunno, maybe.
Looks interesting.
It's still a draft though, not an official CSS spec, so it could change anytime.
I guess i'll keep mixins for now.