Autoprefixer: Autoprefixer setting -ms-grid row and column to opposite actual values

[Dawdre]

https://stackoverflow.com/questions/52425765/css-grid-ms-grid-row-and-column-being-set-opposite-to-actual-value

I posted a question regarding this here. With a little more investigation I think this may be a autoprefixer issue. As when I manually add the -ms- syntax (I am compiling from Sass) into the compiled CSS file. It works correctly.

[Dan503]

That's odd :/
Are you using the latest version?

Try pasting your input code into this:

http://autoprefixer.github.io/

Does it still cause the issue?

[ai]

Hi. I am on conference today. I will try to look at weekend.

Maybe @Dan503 can help you?

[Dawdre]

Thanks for the quick replies.

Yes I will give that a go. And report back :D

[ai]

Check the version of Autoprefixer by npm ls | grep autoprefixer

[Dan503]

You can use this to convert your SCSS to CSS

https://www.sassmeister.com/

[Dawdre]

It does work in http://autoprefixer.github.io/.

[email protected]
[email protected]

[ai]

Try to update Autoprefixer first

[Dan503]

Ok well try upgrading you're version of Autoprefixer then.

You may need to upgrade gulp-postcss as well.

[Dawdre]

Does this need remedying?

+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| |   `-- [email protected]
| +-- [email protected]
| `-- [email protected]
|   +-- [email protected]
|   | `-- [email protected]
|   +-- [email protected]
|   `-- [email protected]
`-- [email protected]
  `-- [email protected]
    `-- [email protected]

PS C:\Users\escull\Documents\GitHub\Grid-Layout> npm ls | grep autoprefixer
npm ERR! extraneous: [email protected] C:\Users\escull\Documents\GitHub\Grid-Layout\node_modules\autoprefixer
+-- [email protected] extraneous
+-- [email protected]
| +-- [email protected]

[Dan503]

gulp-autoprefixer is your issue.

Use gulp-postcss instead and then import Autoprefixer as a post-css plugin.

https://www.npmjs.com/package/gulp-postcss

[Dan503]

You will need to uninstall gulp-autoprefixer for it to work.

[Dawdre]

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');

var sassOptions = {
    outputStyle: 'expanded'
};

var autoprefixerOptions = {
    browsers: ['last 3 versions', '> 0.1%', 'Firefox ESR'],
    grid: true
};

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
    .pipe(sass(sassOptions))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest('css'))
});

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

I have modified my gulpfile.js to this. Will this work?
Also what is the best way to uninstall that package? Can I just delete it from the directory?

[bogdan0083]

You can read about uninstalling npm packages here

In your gulpfile.js you don't use postcss plugin. You can read about usage examples here (this link has an example with autoprefixer):

[Dan503]

Easiest way to uninstall

npm uninstall gulp-autoprefixer

[Dawdre]

Thanks for your help. I uninstalled the package but it is still showing in my directory (node-modules/gulp-auto-prefixer). I tried both global uninstall and local.

I am still getting a TypeError: css.walkAtRules is not a function for my gulpfile.js.

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var sass = require('gulp-sass');

var sassOptions = {
    outputStyle: 'expanded'
};

// var autoprefixerOptions = {
//  browsers: ['last 3 versions', '> 0.1%', 'Firefox ESR'],
//  grid: true
// };

gulp.task('sass', function() {
    var plugins = autoprefixer({browsers: ['last 3 versions', '> 0.1%', 'Firefox ESR']});
    return gulp.src('scss/**/*.scss')
    .pipe(postcss(plugins))
    .pipe(sass(sassOptions))
    .pipe(gulp.dest('css'));
});

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

[bogdan0083]

postcss plugin should be run on the clean CSS, after sass to css compilation:

gulp.task('sass', function() {
    var plugins = [ 
                autoprefixer({browsers: ['last 3 versions', '> 0.1%', 'Firefox ESR']})
         ];
    return gulp.src('scss/**/*.scss')
    .pipe(sass(sassOptions))
    .pipe(postcss(plugins))
    .pipe(gulp.dest('css'));
});

[Dan503]

The critical bit you left out was this bit

    var plugins = [
        autoprefixer({browsers: ['<0.5%']})
    ];

[ai]

Also, Autoprefixer best practices is to use .browserslistrc file in project root with

> 0.5%

Instead of browsers option.

[Dawdre]

I very much appreciate everyone's help. But I just retested it. I now have latest versions of autoprefixer and gulp-postcss (The same versions as http://autoprefixer.github.io). And I am still getting my original problem 😭. -ms-grid-row and column are compiling to the exact opposite values stated in my sass file. This is very odd as no other div in my layout displays this behaviour.

Again I appreciate everyone's time.

[Dan503]

Can you post input, output, and expected output code samples?

Post reduced test cases that only have the problematic grid styles. Don't post your entire CSS file.

[Dawdre]

Input:

#content {
 //grid child of main
 grid-area: content;
 grid-row: 1;       
 grid-column: 2;
}

Output:

#content {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: content;
  grid-row: 1;
  grid-column: 2;
}

Exact same use case:
This #sidebar is the direct sibling of the #content div and both are the only children of the parent grid.
Input

#sidebar {
//grid child of main
grid-area: sidebar; 
grid-column: 1;
grid-row: 1;
}

Output:

#sidebar {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: sidebar;
  grid-column: 1;
  grid-row: 1;
}

Again if I manually add the correct values in the output css it works as intended in IE10 and 11.

[Dan503]

Why are you using both grid area and grid column/row settings in the same rule?

[Dan503]

Either use grid area or use grid column/row. Don't use both at the same time. That is why Autoprefixer is freaking out.

[ai]

Should we show warning?

[Dawdre]

Ah I see. Ok I was getting very confused because the sidebar was behaving as normal. I didn't see to try this. It does work now. Would you never use them together?

[Dan503]

Yeah we probably should to stop people from doing silly things like this.

[ai]

Let's not call it silly, because I do the same mistake many times 😅

[Dan503]

Would you never use them together?

They are never to be used together because they are two different ways of telling the grid cell where it belongs in the grid.

What were you even trying to achieve by setting both grid area and column/row in the same rule?

[Dawdre]

Well I apologise for being silly. https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ does give the impression you can use area properties together.
Honestly putting them together intentionally was not my intention. I set the areas before I started to make it IE compatible. But I can imagine this be quite a common occurrence?

I thank you all for your time and enjoy your weekends.