How to get warnings about invalid css values - css

Question

I am migrating from sass to postcss. To make it easier, I am using postcss-simple-vars, which supports similar variables like sass does.
My problem is:
$size: 100px;
.class {
width: $size * 2;
}
Sass result:
.class {
width: 200px;
}
Postcss with simple vars result:
.class {
width: 100px * 2;
}
The latter seems to be invalid css code. In order to fix it, I need to use the calc() function. The problem is to find all the occurances of those calculations in my code. I have ~ 1 MB of scss...
Is there any tool (linter, compiler, etc) which would analyze my css and warn me of all the places where this needs to be taken care of?

Answer 1

I'm not sure if there is a pre-build plugin ready to use. But you can create a simple task in gulp and point at any error on your css file.
create your new task in your in your gulp tasks and console.log the errorInfo from your style.css file using toString() method
etc
gulp.task('styles' function() {
return gulp.src('your src ./path for your style.css ')
.on('error', function(errorInfo) {
console.log(errorInfo.toString());
this.emit('end');
})
.pipe(gulp.dest('your dest ./path four final destination path '));
});
Updating
var processors = function() {
return function(css) {
css.eachDecl('width', function(decl) {
decl.value = decl.value + ', calc({{ size }} * 2)';
});
}
};
gulp.task('css', function() {
return gulp.src('./app/assets/styles/your_style.css')
.pipe(postcss([processors]))
.pipe(gulp.dest('./app/temp/styles/'));
});