CODEWITHSUNDEEP
cssgulplessgulp-less
awj
awj

Reputation: 7959

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

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?

Upvotes: 1

Views: 72

Answers (2)

nikitahl
nikitahl

Reputation: 446

In my case wrapping expressions into parenthesis, and then building LESS solved the issue.

padding-left: (@panels-padding-horizontal + @icon-spacing + unit(@control-icon-size, px));

resulted in

padding-left: 66px;

gulpfile.js:

function buildCss(done) {
    return src(globalOptions.less.srcFiles.map(function (src) {
        return globalOptions.less.srcPath + src;
    }))
        .pipe(plumber(errorHandler))
        .pipe(mode.development(sourcemaps.init()))
        .pipe(less({
            paths: [
                globalOptions.less.srcPath
            ],
            strictMath: true
        }).on('error', util.log))
        .pipe(postcss([autoprefixer({ overrideBrowserslist: globalOptions.browsers })]))
        .pipe(( mode.production(cssmin()) ))
        .pipe(rename({ suffix: '.min' }))
        .pipe(mode.development(sourcemaps.write()))
        .pipe(dest(globalOptions.less.destPath))
        .on('end', done);
}

exports.buildCss = buildCss;

package.json:

  "devDependencies": {
    "autoprefixer": "9.7.6",
    "bower": "1.8.14",
    "fs": "^0.0.1-security",
    "gulp": "^5.0.0",
    "gulp-cli": "^3.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-less": "^5.0.0",
    "gulp-mode": "^1.1.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^10.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^5.0.1",
    "jscs": "3.0.7",
    "jshint": "2.11.0",
    "path": "^0.12.7"
  },

Upvotes: 0

awj
awj

Reputation: 7959

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.

Upvotes: 0

Related Questions