[Bug] : css nano strips away important factors from multiplications in calc()

[Sanderand]

COPY OF cssnano/cssnano#901

Describe the bug
A CSS input with a calc function using css variables strips away factors from multiplications:

calc(var(--foo) * 0.4 - var(--bar) * 0.4);
... will get converted to ...
calc(var(--foo) - var(--bar));

... and that is incorrect. This happens using cssnanos default preset.

Input given:

.baz {
  --correct-1: calc(var(--foo) * 0.2 - var(--bar) * 0.8);
  --correct-2: var(--foo) * 0.4 - var(--bar) * 0.4;

  --incorrect-1: calc(var(--foo) * 0.4 - var(--bar) * 0.4);
  --incorrect-2: calc(var(--foo) * 0.5 - var(--bar) * 0.5);
  --incorrect-3: calc((var(--foo) * 0.5) - (var(--bar) * 0.5));
}

Expected output

.baz {
  --correct-1: calc(var(--foo) * 0.2 - var(--bar) * 0.8);
  --correct-2: var(--foo) * 0.4 - var(--bar) * 0.4;

  --incorrect-1: calc(var(--foo) * 0.4 - var(--bar) * 0.4);
  --incorrect-2: calc(var(--foo) * 0.5 - var(--bar) * 0.5);
  --incorrect-3: calc((var(--foo) * 0.5) - (var(--bar) * 0.5));
}

Actual output

.baz {
  --correct-1: calc(var(--foo) * 0.2 - var(--bar) * 0.8);
  --correct-2: var(--foo) * 0.4 - var(--bar) * 0.4;
  --incorrect-1: calc(var(--foo) - var(--bar));
  --incorrect-2: calc(var(--foo) - var(--bar));
  --incorrect-3: calc(var(--foo) - var(--bar));
}

Repo for reproduction
https://github.com/Sanderand/css-nano-calc-bug

Additional context

  "dependencies": {
    "cssnano": "4.1.10",
    "postcss-cli": "7.1.0"
  },

const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' }),
  ],
};

Disabling the calc optimization is a temporary workaround that I now use. I guess the calc optimization needs to be fixed.

Thanks!

[alexander-akait]

Sorry for delay, feel free to send a PR, it should be easy

[mischnic]

Seems to happen with division as well:

const postcss = require('postcss');
const calc = require('postcss-calc');

const INPUT = `
.a {
    border-width: calc(var(--foo) / 2 - var(--bar) / 2);
}
`;

const output = postcss().use(calc()).process(INPUT).css;

console.log(output.trim());

/*
.a {
    border-width: calc(var(--foo) - var(--bar));
}
*/

[coreyworrell]

Unfortunately #114 does not fix the following case (--fluid-bp):

Source:

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1140;
    --fluid-screen: 100vw;
    --fluid-bp: calc(
        (var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) /
        ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16))
    );
}

7.0.4 outputs:

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1140;
    --fluid-screen: 100vw;
    --fluid-bp: calc(
        (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / 
        (var(--fluid-max-width) - var(--fluid-min-width)) / 16
    );
}

The output should instead be:

:root {
    --fluid-bp: calc(
        (var(--fluid-screen) - (var(--fluid-min-width) / 16) * 1rem)) / 
        ((var(--fluid-max-width) - var(--fluid-min-width)) / 16
    );
}

postcss-calc is removing the necessary parentheses and affecting the operator precedence.

[alexander-akait]

@coreyworrell please open a new issue and feel free to send a fix

[coreyworrell]

@evilebottnawi opened #115 just now. I am not familiar enough with the source code to send fix but hopefully someone else will be.