分配给CSS变量的CSS变量的后备

Question

对于CSS自定义属性之类的功能，我使用postcss-preset-env以便为IE 11等较旧的浏览器打印后备定义。

例如，如果我有：

:root {
    --col-light: #fff;
}

body {
    background-color: var(--col-light);
}

输出将是：

:root {
    --col-light: #fff;
}

body {
    color: #fff; // the fallback value
    color: var(--col-light);
}

但是，当我将CSS变量分配给另一个CSS变量并将第二个CSS变量用作属性的值时，后备功能无法按预期方式工作–它没有通过第一个变量的值（#fff）属性的第二个变量。所以，如果我有这个：

:root {
    --col-light: #fff;
    --main-background: var(--col-light);
}

body {
    background-color: var(--main-background);
}

输出将如下所示：

:root {
    --col-light: #fff;
    --main-background: #fff; // a fallback value where it's not needed
    --main-background: var(--col-light);
}

body {
    color: var(--main-background);
}

结果使后备功能失效。

所以问题来了： 是否有办法使后备功能按预期工作？