[css grid] Overriding a grid-area assignment with more specific one may result in incorrect -ms-grid-(row|column)-span

[argv-minus-one]

Autoprefixer does not seem to know that it should output -ms-grid-(row|column)-span: 1 when a grid-area assignment (that spans only one row/column) overrides another, less specific one (that spans multiple rows/columns).

Using Autoprefixer 9.7.4 and PostCSS 7.0.27. This issue seems similar to #1146, but that was fixed already, so this one must be different somehow.

Here's an example:

Command line

postcss --use autoprefixer -o output.css input.css

Input

/* autoprefixer grid: autoplace */

body {
	display: grid;
	grid-template:
		"other other"
		"one   two  ";
}

body > * {
	grid-area: other;
}

body > .one {
	grid-area: one;
}

body > .two {
	grid-area: two;
}

Output

/* autoprefixer grid: autoplace */

body {
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto;
	    grid-template:
		"other other"
		"one   two  ";
}

body > * {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-area: other;
}

body > .one {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	grid-area: one;
}

body > .two {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	grid-area: two;
}

This leaves .one and .two with an effective -ms-grid-column-span: 2, which does not match the grid-template.

This also applies to -ms-grid-row-span. Assigning to a grid-area spanning multiple rows, then overriding it with a more specific grid-area assignment that doesn't span multiple rows, will also result in a missing -ms-grid-row-span: 1.

Expected output

/* autoprefixer grid: autoplace */

body {
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto;
	    grid-template:
		"other other"
		"one   two  ";
}

body > * {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-area: other;
}

body > .one {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-area: one;
}

body > .two {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-area: two;
}

Workaround

Give the missing -ms-grid-column-span explicitly in the input:

body > .one, body > .two {
	-ms-grid-column-span: 1;
}

[ai]

Hi. Thanks for the issue. You really fill it very well.

I will be happy to accept and release PR. Sorry, I do not improve Grid support (since IE is dying). But I can help you. You should start with lib/hacks/grid-template.js.

[argv-minus-one]

That's understandable. I wish I could ignore IE too, but it still accounts 3.76% of my page views last month. It is dying, but it's not dead yet.

Unfortunately, I can't make sense of the Autoprefixer/PostCSS code. Dynamic typing makes my head spin. So, I'll have to live with the workaround.