Autoprefixer: [css-grid] -ms-grid-columns -- wrong auto-fill value

[dkrnl]

input:

grid-template-columns:repeat(auto-fill,minmax(400px,1fr));

output:

-ms-grid-columns:(minmax(400px,1fr))[auto-fill];
grid-template-columns:repeat(auto-fill,minmax(400px,1fr));

browsers: last 4 version

[ai]

@yepninja do we support auto-fill. If not let's print warning

[yepninja]

IE doesn't support auto-fill and auto-fit. Let's don't add a prefixed prop and create warnings for these values.

[ai]

@yepninja good plan. Do you want to do it this weekend?

[yepninja]

Yes, I'll do it. Let's dedicate this weekend to "warnings" :)

[ai]

Done 30f3812

[ai]

Was released in 8.6.3

[tfalvo]

Hi.
I completely understand the coherence of your change.
However, since this update, I have a lot of warnings because IE is not supporting auto-fit. Could you bring me some help by giving an example on how to solve warning and to remove IE ?
I'm using Angular 6, and even if I remove IE from browsers list, warning remains.

package.json :
... "browserslist": [ "last 2 versions", "not ie <= 12", "not ie_mob <= 12" ], ...

output :
WARNING in ./src/app/asset/components/.../my-component.scss (Emitted value instead of an instance of Error) autoprefixer: /Users/xxx/yyy/src/app/asset/components/my-component.scss:23:27: auto-fit value is not supported by IE ...

Thanks a lot for your help !
Have a nice day.

[ai]

@tfalvo do you enabled Grid layout by grid: true option?

[tfalvo]

Hi. No I didn't change anything. In fact Autoprefixer is called directly by Angular CLI.
I force downgrade to previous version of Autoprefixer, and it works fine. No more warning.
For me it's ok now, but maybe you will receive soon new requests, if Angular changes its package dependencies...
Thank you !

[ai]

Strange. Maybe Angular team enabled Grid?

[koop4]

same problem here.
Just upgraded from Angular 5 to 6 and i got errors like these:

WARNING in ./somepath/some.component.scss
(Emitted value instead of an instance of Error) autoprefixer:
.../somepath/some.component.scss:190:33: auto-fill value is not supported by IE

WARNING in ./someotherpath/someother.component.scss
(Emitted value instead of an instance of Error) autoprefixer:
.../someotherpath/someother.component.scss:18:29: auto-fill value is not supported by IE

i'll be happy to provide anything you need to find a way to remove these warnings which are pretty annoying

[ai]

@koop4 try to investigate. Did they enable grid by default in Angular?

[nazarkryp]

I also get that annoying warning. (Emitted value instead of an instance of Error) autoprefixer ...auto-fill value is not supported by IE;
does anyone know how to disable those warnings, I don't give * about IE

[ai]

@nazarkryp just remove grid: true option from your Autoprefixer

[nazarkryp]

@ai i don't have specified 'grid: true' anywhere. i use default angular project generated by angular-cli

[ai]

@nazarkryp seems like Angular enabled Grid for everyone for some reason.

Can you create a issue to disable it in angular-cli?

[ai]

@nazarkryp I sent a PR to Angular CLI https://github.com/angular/angular-cli/pull/11453

[tfalvo]

Sorry but I don't understand, why we should disable completely grid feature in autoprefixer.
For example, in my case, I use grid layout and it was working perfectly with Angular.
But what about update you made in project mentioned at the beginning of this discussion.
Please @yepninja could you explain what is this change "IE doesn't support auto-fill and auto-fit. Let's don't add a prefixed prop and create warnings for these values.". And so why theses warnings appear even if you add browser rules omission on autoprefixer.

Is it possible to "unscope" IE but not all the grid feature ?

Sorry in advance if my comprehension is not good. but i'm a little afraid we'll shut down the tree while we can probably just cut a branch... ;-)

[ai]

@tfalvo we don't need to disable it completely. Current idea is to disable it by default and enable only if you understand it's limits

[tfalvo]

why not suppress warning recently added if IE is not in browser list ? It could in this way respect autoprefixer's coherence and rules. What do you think ?

[ai]

@tfalvo I think we don't see a warning if there is no IE 10-11 in Browserslist config. The problem is that some of users uses different techniques to run Grid in IE and they don't need prefixes

[tfalvo]

@ai it was my issue. I tried to exclude IE with a lot of different ways. But no change, warnings remain. So if we find the correct way to exclude IE I think it will be ok for every body. As Angular dev, we will add an exclude rule on project config. It could be a proper way to solve issue.

[ai]

@tfalvo how do you try to change browsers?

[ai]

I fixed the warning. Not it will not be printed if you didn’t select IE 11 in Browserslist config https://github.com/postcss/autoprefixer/commit/bc61818392eaed269a0efdada2fc5ce0c5095ee3

The fix was released in 8.6.5.