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'));
});