search

gavinmcfarland / flex-gap-polyfill

A PostCSS plugin to emulate flex gap using margins
https://gavinmcfarland.github.io/flex-gap-polyfill/
Creative Commons Zero v1.0 Universal
147 stars 6 forks source link

`margin-top` overriden when using just `column-gap` #22

Closed thewilkybarkid closed 3 years ago

thewilkybarkid commented 3 years ago

Using column-gap on its own still results in margin-top being changed, but overriden to 0 rather than recaluclated.

.something {
  display: flex;
  column-gap: 2rem;
  margin-top: 10px;
}
Output ```css .something { display: flex; margin-top: 10px; --fgp-has-polyfil_gap-container: initial; --fgp-gap_container_row: var(--fgp-has-polyfil_gap-container, calc(var(--fgp-gap_parent_row, 0px) - )) !important; pointer-events: none; --fgp-gap_parent_row: initial; --fgp-gap_item_row: initial; --fgp-gap_row: var(--fgp-gap_container_row) !important; padding-top: 0.02px; --fgp-margin-top: calc(var(--fgp-gap_row) + 10px); margin-top: var(--fgp-margin-top) !important; --fgp-gap_container_column: var(--fgp-has-polyfil_gap-container, calc(var(--fgp-gap_parent_column, 0px) - 2rem)) !important; pointer-events: none; --fgp-gap_parent_column: initial; --fgp-gap_item_column: initial; --fgp-gap_column: var(--fgp-gap_container_column) !important; padding-top: 0.02px; --fgp-margin-right: calc(var(--fgp-gap_column) + 0px); margin-right: var(--fgp-margin-right) !important; } ```

Both

.something {
  display: flex;
  column-gap: 2rem;
  row-gap: 0;
  margin-top: 10px;
}

and

.something {
  display: flex;
  gap: 0 2rem;
  margin-top: 10px;
}

work in the the margin-top is recalculated correctly, but it's redundant to do so. I'd expect just margin-right to change in all these cases, not margin-top.

gavinmcfarland commented 3 years ago

Thanks for your pull request. This is now in version 2.0.2.