I submitted this issue to https://github.com/postcss/autoprefixer/, but they got pissy because I mentioned https://autoprefixer.github.io/ (didn't know until today that they're not affiliated with that site). Anyway:

I'm using Autoprefixer via Webpack and postcss-loader. My browser rules are > 1%, last 2 versions, Firefox ESR. If I enter my source CSS on https://autoprefixer.github.io/ using the same rules I get different results. For example, when I run Webpack display: flex; becomes display: -webkit-box; display: -ms-flexbox; display: flex;, whereas the website generates display: -ms-flexbox; display: flex;. I know the website isn't official, but they claim to be using versions of Autoprefixer and PostCSS that are close to mine if not exact. My version of Autoprefixer is 9.7.4, theirs is 9.7.3; my version of PostCSS is 7.0.26, theirs is exactly that. CanIUse says that about 0.23% of browsers need display: -webkit-box, so that alone makes me suspicious of the output.

My postcss.config.js file:

const config = {

plugins: [

require('postcss-import')({

plugins: [

require('stylelint')]

}), require('postcss-preset-env')({

autoprefixer: {grid: true},

browsers : require('./package.json').browserslist.legacyBrowsers,

features : {

'nesting-rules': true

}

})]

};

module.exports = config;

As you can see it gets the browsers list from package.json:

"browserslist": {

"production": [

"> 1%",

"last 2 versions",

"Firefox ESR"

],

"legacyBrowsers": [

"> 1%",

"last 2 versions",

"Firefox ESR"

],

"modernBrowsers": [

"last 2 Chrome versions",

"not Chrome < 60",

"last 2 Safari versions",

"not Safari < 10.1",

"last 2 iOS versions",

"not iOS < 10.3",

"last 2 Firefox versions",

"not Firefox < 54",

"last 2 Edge versions",

"not Edge < 15"

]

}

For the record, I debugged Webpack and the correct browsers list is passed to Autoprefixer.

EDIT: Oh COME ON, Reddit botched my code formatting!