Autoprefixer: -webkit-box vs -webit-flex

[denniscohn]

iOS 7 and higher needs the newer -webkit-flex instead of the old -webkit-box in order to work.
How can I set this right in the autoprefixer? I'm always getting the old -webkit-box.

Also -webkit-justify-content: space-between; need to be added instead of -webkit-box-pack: justify;

Or am I missing something?

[ai]

Remove all prefixes from you code if you use Autoprefixer. So write only:

.foo {
  display: flex
}

[denniscohn]

Yeah, we do:

```
display: flex;
flex-flow: row wrap;
justify-content: space-between;

But autoprefixer 'compiles' it to:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
```
And not display: -webkit-flex;

[ai]

Set browsers what you need to support into browserslist config: https://github.com/ai/browserslist

[denniscohn]

We've checked:
"last 3 iOS versions",
"last 4 iOS versions",
"iOS",
"ios_saf",

But we never get the "display: -webkit-flex;"
Are you?

[ai]

How do you run Autoprefixer? By gulp, webpack or PostCSS CLI?

You have a syntax error in your config and your Autoprefixer runner didn’t show it to you.

[denniscohn]

We use gulp:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    prefix = require('gulp-autoprefixer'),
    notify  = require('gulp-notify'),
    svgmin = require('gulp-svgmin');

gulp.task('sass', function() {
  return gulp.src('scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass()).on('error', notify.onError(function (error) {
      return 'An error occurred while compiling sass.' + error;
    }))
    .pipe(prefix({browserslist: ['last 3 iOS versions']}))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('css'))
});

gulp.task('watch', function () {
  gulp.watch('scss/**/*.scss', ['sass']);
});

gulp.task('default', ['watch']);

[denniscohn]

display: -webkit-box; should only be used for old iOS:

display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */

[ai]

gulp-autoprefixer is unofficial plugin. Use official gulp-postcss as in official docs https://github.com/postcss/autoprefixer#gulp

[ai]

Also there is no browserslist option. Add this to your package.json:

  "browserslist": [
    "defaults",
    "last 5 iOS versions"
  ]

[denniscohn]

We now use the official gulp-postcss and it works! Thanks!

[roopemerikukka]

I'm having the same problem but I'm using the autoprefixer via postcss-cli. With this configuration:

"browserslist": [
    "defaults",
    "last 2 versions",
    "ie >= 10",
    "Android >= 4",
    "Safari >= 6"
  ]

I think i should get these results (and it works in the https://autoprefixer.github.io):

Original:

.example {
    display: flex;
    flex-wrap: wrap;
}

Prefixed:

.example {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

But this is what I'm getting:
```css
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

[sarukuku]

This issue appeared when I updated postcss-cli from version 2.6.0 to 3.0.0. With version 2.6.0 of the CLI the prefixing is done properly but with 3.0.0 not.

Steps to reproduce:

1. Compile the css above with the browserlist config above using postcss-cli version 2.6.0 and take note of the results
2. Compile the css above with the browserlist config above using postcss-cli version 3.0.0 and take note of the results

[sarukuku]

ping @ai

[ai]

What input CSS do you have, what output, what is browserslist config content?

[sarukuku]

Here you go:

browserslist

"browserslist": [
  "defaults",
  "last 4 versions",
  "last 6 iOS versions",
  "last 6 Android versions",
  "last 6 Safari versions",
  "last 2 ie versions"
]

input css

.example {
  display: flex;
  flex-wrap: wrap;
}

output css with postcss-cli version 2.6.0

.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }

output css with postcss-cli version 3.0.0

.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

[ai]

Could you try move browsers to browsers option? Maybe we found a issue in postcss-cli and it doesn't send current file path to plugins?

[sarukuku]

Sure but what do you mean by:

Could you try move browsers to browsers option?

I'm not really sure.

[ai]

autoprefixer ({ browsers: "" })

[sarukuku]

So, tested with this script and the same css as above.

var autoprefixer = require('autoprefixer')
var postcss = require('postcss')
var fs = require('fs')

fs.readFile('./postcsstest.css', 'utf8', function (err, data) {
  if (err) {
    return console.log(err)
  }

  postcss([
    autoprefixer({
      browsers: 'defaults, last 4 versions, last 6 iOS versions, last 6 Android versions, last 6 Safari versions, last 2 ie versions'
    })
  ])
  .process(data)
  .then(function (result) {
    result.warnings().forEach(function (warn) {
      console.warn(warn.toString())
    })
    console.log(result.css)
  })
})

output css with postcss-cli version 3.0.0

.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

output css with postcss-cli version 2.6.0

.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

[sarukuku]

And as the CLI doesn't get used it doesn't affect the results.

[ai]

@sarukuku sorry, I will send you to postcss-cli repo. I think it is their problem.

[sarukuku]

@ai no worries, I'll open an issue there