Reduce nested calc for IE11

[leifoolsen]

Hello,
I'm using postcss-css-variables in combination with cssnext.

Given this (rather naive) css:

:root {
  --test1: calc(10vh - 20px);
  --test2: calc(var(--test1) * 2);
}
.testNestedCalc {
  height: var(--test2);
  background-color: red;
}

Generates this CSS output:

.testNestedCalc {
  height: calc(calc(10vh - 20px) * 2);
  background-color: red;
}

If I use the cssnext built in custom properties I'll get this output:

.testNestedCalc {
  height: calc(20vh - 40px);
  background-color: red;
}

Nested calc is OK for modern browsers, but ie11 does not understand nested calc.

cssnext uses the reduce-css-calc to remove nested calc. Is there a way to use the same reducer (or something similar) with postcss-css-variables?

My postcss config:

plugins = () => {
  let result = [
    require('postcss-import')({ /* ...options */ }), 
    require('postcss-url')({ /* ...options */ }), 
    require('postcss-mixins')({ /* ...options */ }), 
    require('postcss-cssnext')({
      features: {
        customProperties: false, 
        rem: false,
      } 
    }),
    require('postcss-css-variables')({ /* ...options */ }),
    require('postcss-hexrgba')({ /* ...options */ }),  
  ];
  return result;
};
module.exports = {
  plugins: plugins()
};

[MadLittleMods]

@leifoolsen Sorry for the delay, PR welcome! Probably somewhere around here (relevant code),

postcss-css-variables/lib/resolve-value.js

Line 95 in dfb5ec1

return replaceValue;

[QJan84]

Is there a solution?

[MadLittleMods]

@QJan84 https://github.com/postcss/postcss-calc looks like it will work. Here is the test around nested calcs there