Gulp task to compile Shopify Liquid tags in SASS with Autoprefixer

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');

gulp.task('compilesass', function() {
	// root SASS file (contains all your includes)
	return gulp.src('./sass/style.scss')
		// compile SASS to CSS
		.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
		// add vendor prefixes
		.pipe(autoprefixer())
		// change the file name to be a liquid file
		.pipe(concat('style.css.liquid'))
		// remove the extra set of quotations used for escaping the liquid string
		.pipe(replace('"{{', '{{'))
		.pipe(replace('}}"', '}}'))
		// save the file to the theme assets directory
		.pipe(gulp.dest('./assets/'));
});

gulp.task('default', function() {
	// watch all SASS (.scss) files
	gulp.watch(['./sass/**/*.scss'], ['compilesass']);
});

style.scss

.classname {
  // note the extra set of double quotes
  background-image: url(#{'"{{ \'awesome-hero-image.jpg\' | asset_url }}"'});
}

What about %{ if... ?

@jack-fdrv did you find a good approach for liquid expressions that use {% ?

Guys i have tried this but the output in my css.liquid is just the setting without the {{ }} so its not working... can someone help me out with this issue?

Not for me ...
After some research I have this code now :

var gulp = require('gulp');
const sass = require("gulp-sass")(require("node-sass"));
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');

gulp.task('compilesass', function() {
// root SASS file (contains all your includes)
return gulp.src('./sass/theme.scss')
// compile SASS to CSS
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
// add vendor prefixes
.pipe(autoprefixer())
// change the file name to be a liquid file
.pipe(concat('theme.css.liquid'))
// remove the extra set of quotations used for escaping the liquid string
.pipe(replace('"{{', '{{'))
.pipe(replace('}}"', '}}'))
// save the file to the theme assets directory
.pipe(gulp.dest('./assets/'));
});

gulp.task('default', function() {
// watch all SASS (.scss) files
gulp.watch(['./sass/*.scss'], gulp.series('compilesass'));
});

But still not working !

Hi.
What if I have in theme.scss.liquid liquid tags - {% ... , ?