PostCSS Autoprefixer not working with command line

Question

Right now, I'm currently working in a project in which i have to support flexbox for ie10, I'm trying to autoprefix some of my CSS code independently via terminal.

The project does not support any build tool like gulp or webpack.

So i have installed postcss and autoprefixer as follows:

npm install -g postcss autoprefixer

and then i'm trying to autoprefix a single file like so:

npx postcss --use autoprefixer --autoprefixer.flexbox --autoprefix.browser "> 0%" -o main.css test.css

It works for most of my code, but it does not include any prefix for flexbox in ie10.

Am i doing something wrong?

Answer 1

The cli command that you are calling is for postcss-cli-simple not for postcss itself or postcss-cli

To use your command you have to install this packages

npm install postcss-cli-simple autoprefixer

And then is possible to use this command

./node_modules/.bin/postcss --use autoprefixer --autoprefixer.browsers "ie 10" -o main.css test.pcss

This command will convert this:

body {
  display: flex;
  flex: 1 0 calc(1vw - 1px);
}

Into this

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 calc(1vw - 1px);
      flex: 1 0 calc(1vw - 1px);
}

Answer 2

Try using .browserslistrc file

last 20 versions

Link