How can I minify a css.liquid file without using Shopify's deprecated sass?

saintberry · ‎04-03-2021

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;}

tim · ‎04-04-2021

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

tim · ‎04-04-2021

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

saintberry · ‎04-04-2021

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.

Gautama_Swamy · ‎05-30-2021

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?

saintberry · ‎06-01-2021

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.

williamhamal · ‎06-01-2021

hello can you help where should I implement this code

MelMT · ‎07-31-2023

Where to put this though?

How can I minify a css.liquid file without using Shopify's deprecated sass?

How can I minify a css.liquid file without using Shopify's deprecated sass?

Community Blog Articles