[css-grid] grid-gap is depracated

[yepninja]

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap
https://drafts.csswg.org/css-grid/#change-2016-grid-gap

grid-gap is already deprecated (renamed to gap). It's would be also good to handle gap property.

[ai]

Autoprefixer is only about prefixes. We can generate -ms- from gap, but not grid-gap.

[yepninja]

It's not about adding prefixes to gap. It's about latest release (the feature of adding empty tracks when grid-gap and grid-template-areas detected). Now we handle only grid-gap.

[ai]

Yeap, we need to support gap in this case too.

[ai]

Closed by #1054

[ai]

Released in 8.6 “Follow Reason”

[JLHwung]

Autoprefixer is only about prefixes. We can generate -ms- from gap, but not grid-gap.

FYI I just write a plugin that generates grid-gap from gap: https://github.com/JLHwung/postcss-gap-grid-prefix

[Dan503]

@ai found the old grid-gap deprecation issue.

The comments in this issue suggest that it has been fixed in v8.6 but when I tried on https://autoprefixer.github.io/ (v9.7.3) gap isn't getting prefixed with grid-gap ☹

tailwindlabs/tailwindcss#1274 (comment)

[ai]

@Dan503 sorry, I have too many open-source tasks today. Can you help me? What is input CSS, what is current warnings and what is expected warnings?

[yepninja]

@Dan503 This issue is not about prefixing gap property with grid prefix. It's about support of gap property as grid-gap when calculating tracks for IE.

For example:

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

transpiles to:

.example {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

If you want to transpile gap to grid-gap, you should use postcss-gap-properties, which is a part of postcss-preset-env

[yepninja]

@ai I think this issue can be closed again

[Dan503]

Oh ok, the bug title was misleading.

I'll open a new issue because I still think this should be built directly into Autoprefixer core rather than rely on third-party alternatives.