Autoprefixer generates the same css code with additional commented sourceMappingURL. How is that useful? Or How do I use it?

Question

I am currently using Sass in my ExpressJS code and have been able to generate a css file using the following command -

postcss main.css -u autoprefixer -d dist/

The css file BEFORE using autoprefixer has the following code :

.container {
  display: grid;
  grid-template-columns: 2px 2px;
}

The css file AFTER using autoprefixer has the following code + some commented sourceMappingURL:

.container {
  display: grid;
  grid-template-columns: 2px 2px;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL21haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBYTtFQUNiLDhCQUE4QjtBQUNoQyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jb250YWluZXIge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDJweCAycHg7XG59XG4iXX0= */

The expected css output (as per autoprefixer.github.io) should be :

.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2px 2px;
  grid-template-columns: 2px 2px;
}

My confusion is two-part.

1. Have I messed up the autoprefixer command in anyway? Do I need to correct it somehow to get the expected output?
2. Am I lacking knowledge about how the current output file works ie., (a) Is the generated css file using the autoprefixer command enough? (b) Do I need to do something with the sourceMappingURL to get the desired output?

Hope I have explained my question clearly enough. Thanks in advance!

Answer 1

1. At autoprefixer.github.io there is Browserlist setting below textareas saying "last 4 version". This tells Autoprefixer to add prefixes for older browsers. Most probably you don't have .browserslistrc in the root of your project or a browserslist key in your package.json that would tell autoprefixer which browsers are you targeting, so it takes defaults. browserl.ist would help to visualize that (please compare defaults with last 4 version to see the difference in coverage).
2. Create browserslist in the root of your project and explicitly indicate the baseline of browsers you are targeting. Here you will find examples on how to construct your queries. Don't worry about source maps - there's nothing you have to do on that side.

Note: Prior to prefix Grid for IE11 (if that's your case), I encourage you to get aquatinted with CSS Grid in IE: CSS Grid and the New Autoprefixer