Autoprefixer: @supports (display: flex) is not prefixed

[ghost]

The result of gulp-autoprefixer on the following block

@supports (display: flex) {
  div {
     display: flex;
     /* ... */
  }
}

is

@supports (display: flex) {
  div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /* ... */
  }
}

So the display declaration is well prefixed but, if I'm not wrong, the @supports should be prefixed like this:

@supports (display: -webkit-box) or (display: -webkit-flex) or (display: -ms-flexbox) or (display: flex) {
  div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /* ... */
  }
}

Is it a bug ? Thank you in advance and sorry if I'm wrong.

[ai]

Could you try some flex property instead of display?

[ghost]

I just tried with:

@supports (flex: 1) {
  div {
     flex: 1;
     /* ... */
  }
}

and it is prefixed like this:

@supports (flex: 1) {
  div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    /* ... */
  }
}

[ai]

Strange. Could you try in https://autoprefixer.github.io/

[ghost]

Here is the result:

[ai]

Yeap. Seems like we have a bug here. I will look at in on next week (sorry, preparing for conference)

[ai]

I found that is was not a bug, but a feature :D.

-webkit-flex browsers from your browsers list doesn’t support @supports. All your browsers with @supports support works with unprefixed flexbox.

Technically only few browsers doesn’t support unprefixed flexbox, but support @supports.

You can test my thoughts by chrome 28 browser in Autoprefixer settings. Output will be:

@supports ((-webkit-flex: 1) or (flex: 1)) {
  div {
     -webkit-flex: 1;
             flex: 1;
  }
}

[ai]

There is a small real issue — Autoprefixer adds prefixes to flex: 1, but not display: flex. But because right now there is not browsers for flexbox and @support in real use, I think we could ignore this issue.

[ghost]

Thank you Andrey for your explanation and in general for your great plugin !

You're right, but wouldn't it be better then that when Autoprefixer doesn't add the prefixes in @supports (...) because of the lack of @supportssupport, it doesn't add the prefixes in the blocks inside @supports as well ? So instead of having, like now, the following result:

@supports (flex: 1) {
  div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    /* ... */
  }
}

We would have this result:

@supports (flex: 1) {
  div {
    flex: 1;
    /* ... */
  }
}

[ai]

@owenders good question :D. Could you open separated issue.

I don’t want to fix it (because it is rare case), but I will promote this issue as good “first PR” task for new developers.

[ghost]

Ok Andrey, I will do that.