Skip to content

Instantly share code, notes, and snippets.

@derekmorash
Last active February 13, 2023 08:04
Show Gist options
  • Save derekmorash/1e82ff9ffdf675ce00af7d0c3c99fb0c to your computer and use it in GitHub Desktop.
Save derekmorash/1e82ff9ffdf675ce00af7d0c3c99fb0c to your computer and use it in GitHub Desktop.
Gulp task to compile Shopify Liquid tags in SASS with Autoprefixer
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']);
});
.classname {
// note the extra set of double quotes
background-image: url(#{'"{{ \'awesome-hero-image.jpg\' | asset_url }}"'});
}
@joemottershaw
Copy link

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...

@martincarvalho
Copy link

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!

@martincarvalho
Copy link

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!

@jack-fdrv
Copy link

What about %{ if... ?

@unimprobable
Copy link

What about %{ if... ?

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

@maartents
Copy link

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?

@KevinChauvet
Copy link

KevinChauvet commented Aug 10, 2021

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 !

@IGordiichuk
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment