Is it possible to pass PostCSS cssnext customProperties variables from `css` file

Question

When using PostCSS with webpack, I'm using postcss-cssnext with this options for custom properties:

pcssNext({
        features: {
            customProperties: {
                variables: {
                    'button-border-radius': '10px'
                }
            }
        }
    })

Im using the variables option to override variables defined in some node module (react-toolbox for instance).

Is it possible to pass a css file path to variables some how? for example:

pcssNext({
        features: {
            customProperties: {
                variables: './myOverrideVars.css'
            }
        }
    })

And in my myOverrideVars.css file:

:root {
    --button-border-radius: 10px;
}

It's kind of annoying that I must use JavaScript to override css params..

Answer 1

Make an object file that contains your css variables and then import it inside the cssnext customProperties.variables