Plugins interaction/order

[pciarach]

Hi, we recently upgraded our PostCSS and plugins to version 8. The order of plugins in the configuration remained unchanged. However, we’ve noticed that some of them are executing in an unexpected sequence. Specifically, the affected plugins are postcss-mixins and postcss-simple-vars.

To pass multiple values as a single parameter, we define a variable and then pass it to a mixin (simplified example):

@define-mixin myMixin $properties, $timing {
  transition-property: $properties;
  transition-duration: $timing;
}

.selector {
  $props: background-color, border-color, color;
  @mixin myMixin $props, 400ms;
}

Previously, the mixin would be expanded first, and then the variable values would be substituted (which is the same order as in the configuration). However, now we observe that variables are substituted before resolving the mixin. As a result, the mixin interprets them as separate parameters, leading to unexpected CSS output:

.selector {
  transition-property: background-color;
  transition-duration: border-color;
}

It’s hard for me to tell whether this behavior is a bug in one of the plugins/PostCSS itself or maybe I'm missing something after the upgrade and there is a way to control this behavior and ensure that variables are not substituted too early. Alternatively, is there another approach to achieve our desired outcome?

[ai]

Yes, this is exactly the changes of new event-based system of PostCSS 8.

This system is more flexible and can solve circular dependencies issues (which can’t be solved by old order-based system).

There are a few options:

1. We can fix the problem in that case by moved postcss-mixins from AtRule event to AtRuleExit event. Please send PR.
2. I personally think that having a programming code in CSS is not good for readability and maintainability (complexity always creates issues). Use simpler code in CSS.

[pciarach]

Thank you for the quick response!

After some debugging, I think I understand it a bit better. I've decided to pick the first option, as, while I generally agree with your comment in the second point, I think that this particular case is not very complex and is directly connected with the CSS spec which allows multiple values to be provided for the certain properties.

I see that you have already noticed my PR so we will probably continue the discussion there ^^