Add JS variables to generated CSS :root

[jiayihu]

I'm currently using this plugin in an Angular 2 project, where .css files are local to their components and separated between each other. The variables configuration option comes very handy for this situation and I was wondering about the possibility of adding them to :root if preserve option is true and a css file path is specified, for instance ./src/styles/main.css.

[MoOx]

Not sure it makes sense here, I guess you can handle that yourself very easily.

[sshmyg]

Is it expected behaviour when preserve: true, than param variables doesn't work? I mean css bundle has no :root with vars from configuration. Config

'postcss-cssnext': {
            browsers: ['last 2 versions'],
            features: {
                customProperties: {
                    preserve: true,
                    variables: {
                        'bg-color': 'red'
                    }
                }
            }
        }

CSS bundle (no :root)

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

[jiayihu]

IIRC the preserve option will mantain the custom properties at runtime where you use them but it does not add them to :root or any other element. For that you must use or write another postcss plugin.

[jonathantneal]

Sorry for not closing this earlier. @jiayihu answered this a year ago.