Why does `preserve: false` keep this?

[morewry]

I was poking around here hoping to find some possibility for doing something I'd like to accomplish and while reading #138 and thought, "Hmm, we have a lot of cases where it doesn't work. From the behavior we'd seen, we'd begun assuming it only works if the custom properties are declared on :root, but I'd expect that to be mentioned somewhere and haven't yet."

We have a scenario like this:

/* contains custom properties for :root {} */
@import '@us/dls-colors/dist/tokens.custom-properties.css'; 

:host([status="success"]) {
  /* this is left _entirely_ as-is */
  --alert-color-primary: var(--seafoam-100);
}
.alertPanel.success {
  /* here it's replaced with the hex code */
  border-left-color: var(--seafoam-100);
}

What I'd ideally like to see is that var(--seafoam-100) is replaced by the hex code in both places, while --alert-color-primary is preserved.

We support IE11 for some, but not all, products. For those that can use custom properties and support :host, I'd like to make the alert color available as a custom property so they can utilize it to enhance the styles of their alert content if desired.

Could #163 help here? But I'm also curious, is the limitation to :root an accurate observation?

[morewry]

Either as color-mod(--seafoam-100) or as color-mod(var(--seafoam-100)), I get this error:

CssSyntaxError: postcss-color-mod-function: ~/dls-alerts/src/alert-panel.css:63:34: Expected a color

I don't get how the value of --seafoam-100 can be known and a color two lines down, but not on this line.

[morewry]

Another interesting glitch...

margin-left: calc(var(--medium) * -1);

ParserError: Syntax Error at line: 1, column 21

allegedly via postcss-values-parser (??). However,

margin-left: calc(-1 * var(--medium));

No problem. Recognize any known issues and/or is this from somewhere else in my edifice of tooling?