Config defined variables do not work with option `preserve: true`

[presidenten]

When postcss-css-variables is configured with both preserve: true and preconfigured variables, the end result is css code that do not work.

Configuration:

{
   preserve: true,
  variables: { '--red': '#FF0000' },
}

Usage:

    background-color: var(--red);

Resulting css:

Expected result: All configured variables should be should be added to :root so that they can be used together with the preserve: true option.

[MadLittleMods]

@presidenten It looks like this already works? If I am mistaken, please add your expected output CSS.

postcss-css-variables@0.8.0

input.css

.foo {
    background-color: var(--red);
}

test.js

var postcss = require('postcss');
var cssvariables = require('postcss-css-variables');

var fs = require('fs');

var mycss = fs.readFileSync('input.css', 'utf8');

// Process your CSS with postcss-css-variables
var output = postcss([
        cssvariables({
            preserve: true,
            variables: {
                '--red': '#FF0000'
            },
        })
    ])
    .process(mycss)
    .css;

console.log(output);

Actual result

:root {
        --red: #FF0000;
}
.foo {
        background-color: #FF0000;
        background-color: var(--red);
}