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
143 stars 6 forks source link

postcss 7 suppport? #37

Closed ricky11 closed 3 years ago

ricky11 commented 3 years ago

I believe version 4 does not support postcss 7?

I searched the docs and the releases, but couldn't find which previous versions support postcss 7?

Thanks

gavinmcfarland commented 3 years ago

Hey @ricky11. Sorry, I should have been better at documenting this in the version log. I believe I changed to PostCSS 8 at version 2.0.0 and the last version before that was 1.0.4. It's moved on quite a bit so will apologise in advance if you encounter any issues.

If you want to use PostCSS 7 because of Nuxt.js you could check out this https://github.com/nuxt/postcss8

There's also an example in the repo for setting up with Nuxt.js.

ricky11 commented 3 years ago

Thanks. i am actually using the latest version of vue 2.x, surprising even vue 3.x does not come with postcss 8 out of the box.

ill see if I can upgrade to post css 8 without breaking my app.

is postcss 7 deprecated now?

thanks.

gavinmcfarland commented 3 years ago

I don't think it's depreciated yet, but as a few other's have asked about PostCSS 7, I've patched a previous release (1.1.0) that's up to date with new bug fixes and features. Hopefully, this will work for you if you can't get your app to work with PostCSS 8.

npm install flex-gap-polyfill@1.1.0
ricky11 commented 3 years ago

Great thanks,

should be 1.1.0 i believe.

I am using it with post in package.json, do I need to pass any options to it, or will it pick up all vue components sfc style sheets?

does your package polyfill down to ie11?

  "postcss": {
    "plugins": {
      "postcss-custom-properties": {
        "importFrom": "src/assets/styles.css"
      },
      "flex-gap-polyfill" : {}
    }
  },
gavinmcfarland commented 3 years ago

Ah yes, I've corrected that typo now. Thanks.

Unfortunately, it won't work for ie11 because var() is not supported.

You don't need to pass any options to it by default, it should process all styles in Vue components, but let me know if you run into any problems.

I'll close this issue for now, but feel free to reply with any more thoughts or if you have any other issues.

ricky11 commented 3 years ago

I am using the snippet below but I cant get it to work in chrome 83 and safari 14.03

both of these browsers do support css custom variables?

image

any ideas?

"postcss": { "plugins": { "postcss-custom-properties": { "importFrom": "src/assets/styles.css" }, "flex-gap-polyfill" : {} } },

I can see however in dev tools that there is some css injected, here is small screenshot from dev tools

if you have any ideas, what I'm doing wrong, please let me know.

image

gavinmcfarland commented 3 years ago

Hi @ricky11 can you share the original CSS for this example that you're using?

ricky11 commented 3 years ago

Here is the div class

.linkWrapper { display:flex; flex-direction: row; gap:2.5rem; justify-content: space-between; align-items: center; }

and this is what i found in the devtools

image

gavinmcfarland commented 3 years ago

Thanks. Everything looks normal there. I think I would have to see a repo if possible so I can diagnose what the issue might be. It could be something happening with the framework you're using that I'm not familiar with.

ricky11 commented 3 years ago

vue uses scoped css, but i do see thats working correctly with the data attribute. ill do some testing

gavinmcfarland commented 3 years ago

The polyfill adds a few other rules in addition to the rule in question with gap.

Here is an example:

:root{
    /* added by fgp */
    --has-fgp: initial;
    --parent-has-fgp: initial;
}

.gap-8 > * > *{
    /* added by fgp */
    --fgp-parent-gap-row: initial;
    --fgp-parent-gap-column: initial;
}

.gap-8 > *{
    /* added by fgp */
    pointer-events: var(--parent-has-fgp) auto;
    --fgp-parent-gap-row: 2em;
    --fgp-margin-top: var(--parent-has-fgp) calc(var(--fgp-gap-row) + var(--orig-margin-top, 0px));
    margin-top: var(--fgp-margin-top);
    --fgp-parent-gap-column: 2em;
    --fgp-margin-left: var(--parent-has-fgp) calc(var(--fgp-gap-column) + var(--orig-margin-left, 0px));
    margin-left: var(--fgp-margin-left);
}

.gap-8{
    /* added by fgp */
    pointer-events: var(--has-fgp) none;
    --fgp-gap-row: 2em;
    --fgp-margin-top: var(--has-fgp) calc(var(--fgp-parent-gap-row, 0px) / (1 + var(--fgp--parent-gap-as-decimal, 0)) - var(--fgp-gap-row) + var(--orig-margin-top, 0px)) !important;
    --fgp-gap-column: 2em;
    --fgp-margin-left: var(--has-fgp) calc(var(--fgp-parent-gap-column, 0px) / (1 + var(--fgp--parent-gap-as-decimal, 0)) - var(--fgp-gap-column) + var(--orig-margin-left, 0px)) !important;
}

.gap-8 {
    --fgp-gap: var(--has-fgp, 2em);
    gap: var(--fgp-gap, 0px);
    margin-top: var(--fgp-margin-top, var(--orig-margin-top));
    margin-left: var(--fgp-margin-left, var(--orig-margin-left));
}

So it might be worth checking if these additional rules are being added.