Nuxt2 postcss-calc error

[Muluk-m]

Hi, I encountered this problem in my project

This is my project dependency version "flex-gap-polyfill": "1.0.4", "nuxt": "2.10.2", Is there any way I can handle this error

[gavinmcfarland]

Hi @Muluk-m. I think what is happening is max-content somewhere in your project and this is being combined with something in the polyfill. Since max-content can't be computed by CSS calc it's possibly throwing an error?

Can you find where max-content is being used and provide the CSS rule it's inside?

Meanwhile here are a couple of things you could try:

1. Try upgrading flex-gap-polyfill to version 4.1.2
2. Try changing the order offlex-gap-polyfill and postcss-calc in your project

Let me know how you get on.

Thanks!

[Muluk-m]

This is where I find that the component reporting an error contains the max-content rule

/deep/ .klk-poptip-popper-inner {
      width: max-content;
      max-width: calc(100vw - 32px) !important;
      padding: 0 36px 0 12px;
      margin: 12px 0;
    }

But everything worked fine until I introduced flex-gap-polyfill

postcss: {
      plugins: {
        'flex-gap-polyfill': {}
      }
    },

this is my nuxt2 config

[gavinmcfarland]

Thank you. Ok, I see what's happening. For the polyfill to work, it needs to rewrite the width because it uses negative margins and needs to recalculate the width. Therefore when you use postcss-calc with flex-gap-polyfill it tries to reduce a calc function that contains max-content.

For now you can try the following options:

1. Replace max-content with 100%
2. Disable warnings in postcss-calc when it cannot resolve them -> https://github.com/postcss/postcss-calc#warnwhencannotresolve-default-false