Native Custom Properties + transpiled color()

_source.css

:root {
  --main-color: red;
  --secondary-color: color(var(--main-color) hue(20%));
}

.module-one {
  color: var(--main-color);
}

.module-two {
  color: var(--secondary-color);
}

.module-three {
  color: color(var(--main-color) hue(20%));
}

build.css

:root {
  --main-color: red;
  --secondary-color: rgb(255, 85, 0);
}

.module-one {
  color: var(--main-color);
}

.module-two {
  color: var(--secondary-color);
}

.module-three {
  color: rgb(255, 85, 0);
}

explanation.txt

The theory is this:

PostCSS plugin interprets (top-level) custom properties & knows their values,
but does not transpile them. If they are used to define new colors via
the color() function, the known variable value is used and the color()
is transpiled to the computed value.

It would have the same restrition as Custom Property transpiling does now:
only variables defined at the :root may be used inside color().

Of course, this would require a new PostCSS plugin that's a sort of
hybrid of postcss-custom-properties and postcss-color-function.

Trying to decide if there are some "gotchas" to this approach that aren't immediately apparent...