Working with Autoprefixer CSS Grid
Opened this issue · 2 comments
Hi,
Is it there a way to combine the replacement of a custom property with autoprefixers CSS grid support?
:root {
--base-padding: 1.25rem;
}
.class {
display: grid;
grid-gap: var(--base-padding);
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
Outputs:
:root {
--base-padding: 1.25rem;
}
.class {
display: -ms-grid;
display: grid;
grid-gap: 1.25rem;
grid-gap: var(--base-padding);
-ms-grid-columns: 1fr var(--base-padding) 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
}
Is it possible to have the line as:
-ms-grid-columns: 1fr 1.25rem 1fr;
Cheers
we have the same issue, the grid fallback doesn't work properly.
i think the problem is the order of the fallbacks. the fallback should always be written after the variable. is it possible to switch the order in the configuration?
output now:
grid-gap: 1.25rem; grid-gap: var(--base-padding);
required output:
grid-gap: var(--base-padding); grid-gap: 1.25rem;
No, the fallback should be written before the variable, otherwise, the variable will never be used.
Autoprefixer needs to ignore the lines with var
, as they are invalid in IE11.