Gap Polyfill for Styled Components and Gatsby / Safari suport

I'm building website with Gatsby + Styled Components and I would love to use css gap property. unfortunately Safari does not support this property so my layouts end up broken. I could rewrite my css with margins etc, but it doesn't seem right.

Is there any way to add polyfill for gap property with Gatsby and Styled Components?

What I want to achive

I would like to use css gap property with suport for Safari

My issue

I couldn't find any polyfill that would work with Gatsby and Styled Components

Solution

There's not "native" way to achieve it, since it's a property that is not standardized (yet) in Safari, as you can see in Can I Use.

Regarding the polyfill, maybe this package helps you: https://www.npmjs.com/package/flex-gap-polyfill

For an input like:

.container {
    display: flex;
    gap: 40px;
}

It will output:

.container > * {
    --fgp-gap-parent: 40px !important;
    --fgp-gap-item: 40px !important;
    --fgp-gap: var(--fgp-gap-item) !important;
    margin-top: var(--fgp-gap);
    margin-right: var(--fgp-gap);
}

.container {
    --fgp-gap-container: calc(var(--fgp-gap-parent, 0px) - 40px) !important;
    --fgp-gap: var(--fgp-gap-container);
    margin-top: var(--fgp-gap);
    margin-right: var(--fgp-gap);
}

I think you can get exactly the same effect Simulating the CSS Gap, even with margins, with:

.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}