Liquid, JavaScript, themes, sales channels
My goal here to is to minify the rather bloated styles.css.liquid in my theme.
Googling suggests the best way to do this is make sure the css file saved as a sass file so Shopify will process and minify if for you. However Shopify has deprecated sass: https://www.shopify.com.au/partners/blog/deprecating-sass
Has anyone found a CLI tool that I can add into my CI/CD pipeline that can minify a css file containing liquid tags? I've tried uglifycss and it fails with blocks like this:
.product-label {
{% if global_border_radius == 0 %}
top: 0;
right: 0;
{% else %}
top: 10px;
right: 10px;
{% endif %}
}
as it will become something like the following and Shopify will complain about the liquid tag not being correctly terminated
.product-label {{% if global_border_radius == 0 %}top: 0;right: 0;}
Solved! Go to the solution
This is an accepted solution.
I use this code to minify CSS+liquid code -- it simply wraps the contents of you file:
{%- capture content %}
... contents of your CSS+Liquid file here ...
/* homebrew CSS minifier */
{%- endcapture -%}
{%- assign before = content.size -%}
{%- assign content = content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content }}
Works good enough for Google PageSpeed/Lighthouse. Basically -- removes comments, extra spaces and newlines...
This is an accepted solution.
I use this code to minify CSS+liquid code -- it simply wraps the contents of you file:
{%- capture content %}
... contents of your CSS+Liquid file here ...
/* homebrew CSS minifier */
{%- endcapture -%}
{%- assign before = content.size -%}
{%- assign content = content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content }}
Works good enough for Google PageSpeed/Lighthouse. Basically -- removes comments, extra spaces and newlines...
Thanks, that works well. Seems a bit strange to have to do it at runtime when I have a static build process for the theme but it worked well. Appreciate the response.
This is amazing! Is this code intended to be placed inside of the theme.css file or should it be wrapping the <body> tags in the theme?
Hey, place this code in your themes css.liquid file. Wrap this around your css statements..
{%- capture content %}
... contents of your CSS+Liquid file here ...
{%- endcapture -%}
and then place the remainder of the code at the end of the css.liquid file which will minify the css and output it.
hello can you help where should I implement this code
Where to put this though?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024