Problem with vendor prefix inserted *after* standard syntax

Good morning,

I’m using autoprefixer 6.6.1 and I noticed a problem with the order of a CSS selector it produces.

In my Sass file, if I write:

.some-selector {
  transition: color .15s, transform .5s;
}

Autoprefixer generates the following code:

.some-selector {
  -webkit-transition: color .15s, -webkit-transform .5s;
  transition: color .15s, -webkit-transform .5s;
  transition: color .15s, transform .5s;
  transition: color .15s, transform .5s, -webkit-transform .5s;
}

The last line (transition: color .15s, transform .5s, -webkit-transform .5s;) contains a vendor prefix but since it comes last, it has priority over the previous line (transition: color .15s, transform .5s;) which contains no vendor prefix.

As a result, the transition does not work on Chrome 55.0.2883.95 (64-bit) nor on Firefox 50.1.0.

How would it be possible to invert both lines please? I’m stuck. Thanks for your help!

[ai]

I found problem. transition-delay is hard coded to 2 values only, so it stop working on 3 values in transition: color .15s, transform .5s, -webkit-transform .5s.

transition-delay: 0s, #{50 + (50 * $i)}ms;

You can fix it by:

transition-delay: 0s, #{50 + (50 * $i)}ms, #{50 + (50 * $i)}ms;

Unfortunately, there is no way to prefix it in other way. Browsers that you support requires -webkit-transform. And the only way to fix it is this big preset and different values length (we thought a lot about some other solution).

Technically, Autoprefixer even warn you about this risk. But you should use gulp/webpack Aurtoprefixer to see warnings. Maybe we need ask @chriscoyier to add some UI and show warnings from PostCSS plugins.

[kReEsTaL]

Great, thank you so much for your help @ai!

I still cannot figure why I cannot compile the line you suggested:

transition-delay: 0s, #{50 + (50 * $i)}ms, #{50 + (50 * $i)}ms;

Anyway, if I ditch the Sass for loop and write it by hand, it works. Another mystery yet to solve!

By the way, menu animation is really gorgeous 👍

All credits go to @Twikito! 😃 As for the BEM syntax, yes you’re absolutely right. However the original CodePen is a quick demo he wrote, so that may be the reason why the code is not as compact as it could be.

Thank you again so much for your help! \m/