Add Warning when grid-gap could not be Transpiled for IE

[fabb]

In #1032, grid-gap support was introduced in order to support IE. It only works though when grid-template-areas, grid-template-rows and grid-template-columns are provided in the same rule. Since this is a hard to spot IE problem, it would be very helpful to output Warnings when grid-gap could not be translated for IE (and maybe even an Error #1165). Would that be possible?

[Dan503]

Are you using the latest version of Autoprefixer and have autoplacement enabled?

We added this warning already in 9.4. We realised that the rules around when grid-gap was supported were starting to get a bit complex.

[Dan503]

v9.4.2 is the latest version.

[fabb]

I'm on 9.4.1 (and now I updated to 9.4.2, same there), but I hadn't activated autoplace. When I activate autoplace, I get a warning Autoplacement does not work without grid-template-rows property as expected. Why does the warning not show up when grid option is just set to true?

[fabb]

Unfortunately I cannot activate autoplace since it will jumble the elements in the wrong order, as autoplace ignores grid-column set in child css rules of the input css.

[ai]

@fabb Update to 9.4.2. We already fixed you issue.

Reopen issue if it will be repeated in 9.4.2.

[Dan503]

@fabb I entered the following CSS:

/* grid is enabled and autoplacement is disabled */
/* autoprefixer grid: on */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

I received this warning from Autoprefixer:

grid-gap only works if grid-template(-areas) is being used

That suggests that the warnings are working as expected.

If you are still having an issue, would you mind posting a sample of the CSS code that is causing a warning to not appear?

[fabb]

I was using grid-column-gap and grid-row-gap separately:

.blah {
  grid-template-areas: 'left right';
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
}

[Dan503]

Ahh ok, @ai this is probably a valid bug then.

[ai]

@bogdan0083 do you want to send PR? Next 2 days I will be in flights.

[fabb]

Would it be possible to also show a warning when I just specify grid-template-columns and grid-template-rows but forget about grid-template-areas? That would help to reduce regressions in IE11 support a lot.

[Dan503]

@fabb in the sample that you posted, you are using grid-template-areas. If you are using areas then grid-gap will work.

[Dan503]

Would it be possible to also show a warning when I just specify grid-template-columns and grid-template-rows but forget about grid-template-areas?

Not really. It is a bit too annoying for people who have not used areas for placing grid cells.

Manually placing cells using line numbers is still a valid way to write grid styles. It's not the recommended way, but it is a valid way.

[Dan503]

We could feasibly provide an option for not allowing grid at all without either the areas or autoplacement algorithms being used. That would need to be tracked in a seperate issue.

[fabb]

Manually placing cells using line numbers is still a valid way to write grid styles.

True, forgot about that. And postcss has no way of knowing if all children are being placed manually.

We could feasibly provide an option for not allowing grid at all without either the areas or autoplacement algorithms being used.

That sounds very good, since it would force devs to write control comments when they want to leave the save path.

[fabb]

Created followup ticket: #1167

[Dan503]

Yep, I can confirm that grid-column-gap and grid-row-gap do not trigger the grid-gap warning.