Reduce nested calc for IE11

Nobody has claimed this yet.

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

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

Generates this CSS output:
```css
.testNestedCalc {
height: calc(calc(10vh - 20px) * 2);
background-color: red;
}
```

If I use the cssnext built in custom properties I'll get this output:
```css
.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`](https://github.com/MoOx/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:
```js
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()
};
```

Start by tracing postcss-css-variables after custom-property substitution and compare its output with cssnext's reduce-css-calc behavior. Reproduce the supplied nested custom-property example using the shown PostCSS plugin configuration; done means the generated CSS no longer contains nested calc() expressions and remains compatible with IE11.

Written by the indexing model from the issue text.