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

I've recently been trying to figure out a nice solution for incorporating my own framework with Shopify and using the #{''} interpolation method has helped massively when compiling locally with the latest version of SASS while maintaining liquid variables. It got a bit tiresome pretty quickly writing all the quotes and hashtags etc out, so I wrote two helper functions that I thought you might find useful.

The first one is used for basic settings:

// Function...
@function shopify($setting) {
    @return unquote('"{{ settings.' + $setting + ' }}"');
}

// Example...
body {
    background-color: shopify('background_color');
}

// Compiles to...
body {
    background-color: {{ settings.background_color }};
}

The next is linking to asset files/images for background images etc:

// Function...
@function shopify_asset($file) {
    @return unquote('url(\'"{{ "' + $file + '" | asset_url }}"\') ');
}

// Example...
body {
    background-image: shopify_asset('image.png');
}

// Compiles to...
body {
    background-image: url('{{ "image.png" | asset_url }}');
}

I've only written and used them the last couple of days and haven't run into any compiling errors or anything but that doesn't mean they are flawless obviously, but it's a nice start. I haven't come up with a decent way to get liquid logic working/compiling in stylesheets yet which is disappointing I guess, but I never really find the need to use logic in my stylesheets anyway. I always prefer to just write 2 different classes and put the logic in the template to determine which class it applies to the element.

In a perfect world, Shopify would just allow us to choose which version of SASS we use to compile in their theme editor and this could all be avoided and we could all sleep at night...

Hey @joemottershaw
Those functions seem to be exactly what I need since configuring Gulp has been a real pain.
I just tried to use it as exactly as you have but it's returning a bad URL (https://cdn.shopify.com/s/files/1/0254/4379/5053/t/3/assets/%22/cdn.shopify.com/s/files/1/0254/4379/5053/t/3/assets/urn.png?475%22), do you have any idea why?
Btw, did you come up with a better solution yet?
Thank you!

I removed the the extra quotes right before the {{ and }} tags and it seems to be working fine now :)
Here's how it looks:
@function shopify_asset($file) { @return unquote('url(\'{{ "'+ $file + '" | asset_url }}\') '); }

Not sure if this is properly formatted, though. If someone comes up with a better solution I'd love to hear!

What about %{ if... ?

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 - {% ... , ?