[Almost] Duplicated props from :root

[joelmoss]

So when I define a custom property within :root, the output duplicates the rules...

// input...
:root {
  --button-color: #000;
}
button {
    color: var(--button-color);
}

// output...
button {
    color: #8a8a8a;
    color: var(--button-color);
}

But if I move the properties to body or some other element, all is good.

Is this intentional?

[jonathantneal]

That is very curious. Can you spin up an example project that demonstrates this? Unless preserve is set to false, nothing should be removed.

[joelmoss]

So the output above is correct?

[jonathantneal]

No, which is why I need an example project to replicate the bug. Otherwise, it may remain inactive.

[jonathantneal]

I tested the following code at https://postcss.github.io/postcss-custom-properties/ and these were the results:

source:

:root {
  --button-color: #000;
}

button {
    color: var(--button-color);
}

result:

:root {
  --button-color: #000;
}

button {
    color: #000;
    color: var(--button-color);
}

[joelmoss]

Yes, so that result is wrong, right?

[b-m-f]

Nope, it is intentional.

If you mean that

color: var(--button-color);

is still in the output.

You can use the option preserve: false to remove it.

[joelmoss]

Ah ok, so why is that needed to be preserved?

[jonathantneal]

@joelmoss, that result is right, and @b-m-f is correct. I was concerned when your output did not include :root {}, but it looks like you were sharing only a snippet of your output. @b-m-f also points out the way to change this, if you don’t want to preserve the original variables.

https://github.com/postcss/postcss-custom-properties#preserve

[joelmoss]

Thanks. Why would I need to preserve it tho?

[jonathantneal]

This plugin is a polyfill, a kind of fallback. Ideally, once your browserslist supports the feature, you’ll no longer need it.