postcss autoprefixer ignoring grid properties with gulp

Question

i'm using autoprefixer with gulp to add browser render prefix to properties. but seems like autoprefixer ignoring all grid properties.

gulp.task('postcss',function() {

  console.log("Running postcss task");
  var plugins = [autoprefixer({browsers: "last 5 versions"}),orderValues()];
  return gulp.src('www/css/*.css')
              .pipe(postcss(plugins,{ map:true , inline:true }))
              .pipe(gulp.dest("www/css/"));

});

Answer 1

This feature is disabled by default. You need to enable it in the options given to Autoprefixer with grid: true

Documentation of Autoprefixer

Autoprefixer has 4 features, which can be enabled or disabled by options:

• supports: false will disable @supports parameters prefixing.
• flexbox: false will disable flexbox properties prefixing. Or flexbox: "no-2009" will add prefixes only for final and IE versions of specification.
• remove: false will disable cleaning outdated prefixes.
• grid: true will enable Grid Layout prefixes for IE.

The decision was made after a vote on Twitter (Issue #817) and the reason behind that is that the old Grid specification implemented in IE10-11 and Edge 12-15 is way too different from the modern one implemented in Chr, Fx, Saf (?) and incoming Edge 16.
You'll need more manual work to achieve an equivalent result on IE10-Edge 15, either a fallback or restraining from using unsupported properties (grid-area, etc) and values (repeat() I think, etc): in both cases it can't be automatically done by Autoprefixer so nope, disabled by default.

EDIT: Going farther than your question and answering "What can I do with browsers supporting the old first Grid Layout spec introduced with IE10?":

• useful table from Rachel Andrew on "IE 10-Edge 15" vs "modern browsers and Edge 16+" grid properties if you want to do it by hand or verify if Autoprefixer is doing it right.
• if you want to separate CSS for those 2 categories of browsers, you can use this gem from Building Production-Ready CSS Grid Layouts Today article in SmashingMag by Morten Rand-Hendriksen: @supports (grid-area: auto) { /* */ }

but not @supports (display: grid) {} which won't work alas (see article).