Cssnano: Parentheses inside calc are removed

[GrimLink]

When I run CSSNano my nested calc's are trimmed.

.class {
  // Original
  padding-top: calc(100% / (var(--aspect-ratio, 16/9)));
  // After Nano
  padding-top: calc(100% / var(--aspect-ratio, 16/9));
}

Disabling the calc plugin did not help.
So was expecting some other plugin was doing this.
But I can not find which one.

If it is not an plugin than at least give an option to prevent this use case.

[andyjansson]

When I run CSSNano my nested calc's are trimmed.

This is intended behaviour. Why is this an issue?

Disabling the calc plugin did not help.

I just tested disabling the plugin, it works fine:

preset: [
    'default',
    {
        calc: false
    }
]

Input:

.test {
    padding-top: calc(100% / (var(--aspect-ratio, 16/9)));
}

Output:

.test{padding-top:calc(100% / (var(--aspect-ratio, 16/9)))}

[GrimLink]

@andyjansson sorry 😅
I somehow managed to put it outside the default config, directly in preset.
Stupid me.

[abstractvector]

Can we reopen this issue as a very specific use case please?

I am able to reproduce the initial report, that the following two CSS styles produce different outputs (confirmed in Chrome 80 and Firefox 74 on Mac OS 10.15.3):

padding-bottom: calc(100% / (var(--aspect-ratio)));

Computed: padding-bottom: 276.906px (correct)

padding-bottom: calc(100% / var(--aspect-ratio));

Computed: padding-bottom: 0px (incorrect)

As per your suggestion in https://github.com/cssnano/cssnano/issues/628#issuecomment-427660027, disabling the calc optimization does solve this, but also disables other benefits of the optimization.

I'm not sure why the parentheses matter in this situation, but the empirical evidence suggests they do. I suggest therefore the calc optimization should not remove these parentheses.

[anikethsaha]

This is an issue with postcss-calc (upstream)

Can you submit this in that repo ?

Thanks

[abstractvector]

I've just looked at their issue tracker and it looks like a known issue (https://github.com/postcss/postcss-calc/issues/91). Thanks for pointing me in the right direction.

I'll add more details there.

[GrimLink]

@abstractvector you can do the calc almost the same by using *.
This fixes the issue and allows you to use the calc minifier.

My code;

.aspect-ratio {
    --aspect-ratio: 16*9;
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;

    &::before {
        content: "";
        display: block;
        padding-top: calc(100% / var(--aspect-ratio));
    }
}

[anikethsaha]

Just for feedback and experiment purpose, you guys can try out postcss-ignore-plugin