gulp taksk in root element

[Mteixeira88]

Gulp vars

Expected Behavior

It should be possible to have an option that enables to choose where are the variables and watch when they change a value during the css file to change the variable to the new value.

.holder {
--some-variable: green;
background-color: var(holder-variable);
}

.trigger {
--some-variable: blue;
}

Actual Behavior

It only enables to have variables on root element.

:root {
--some-variable: blue;
--some-variable2: red;
}

[yepninja]

Thank you for using!

Actually, this plugin is outdated. And it's better for you to use postcss via gulp-postcss and postcss-css-variables plugin.

Just install it:
npm install --save-dev gulp-postcss postcss-css-variables
And use like so:

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

gulp.task('css', function () {
    var plugins = [
        cssvariables()
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});