Less (CSS) calculations are not being evaluated when executed in a gulp task

Question

I'm working with LESS files, and using gulp to compile the CSS. I've noticed that calculations are not being evaluated.

For example, the following less...

.footer-bar {   
    a {
        color: white;
        display: inline-block;
        padding-left: @grid-gutter-width / 2;
        text-decoration: none;
    }
}

... is appearing in the CSS file as...

.footer-bar a {
  color: white;
  display: inline-block;
  padding-left: 30px / 2;    /* <-- UNEVALUATED */
  text-decoration: none;
}

Here is the gulp setup...

function compileLessFile(path) {
    return gulp.src(`./${path}`)
        .pipe(less())
        .pipe(autoprefixer("last 1 ie version"))
        .pipe(gulp.dest("./"));
}

function watchLessChanges() {
    console.info("Watching .less files for changes...");
    gulp.watch(`${paths.watchableDirs}/*.less`).on("change", (path) => compileLessFile(path));
};

exports.default = watchLessChanges;

Can anyone explain why these calculations are left unresolved by gulp-less?

Answer 1

I found that if I set gulp-less and gulp-autoprefixer back to previous versions then it worked.

I was using...

• gulp-less ^5.0.0
• gulp-autoprefixer ^8.0.0

I put these back to...

• gulp-less 4.0.1
• gulp-autoprefixer 7.0.1

... and the problem went away.