autoprefixer
autoprefixer copied to clipboard
[css grid] Overriding a grid-area assignment with more specific one may result in incorrect -ms-grid-(row|column)-span
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;
}
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
.
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.