Solved

Tool to minify css.liquid

saintberry
Tourist
3 0 3

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;}
Accepted Solution (1)

tim
Shopify Expert
3212 223 1171

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

View solution in original post

Replies 6 (6)

tim
Shopify Expert
3212 223 1171

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

saintberry
Tourist
3 0 3

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
Visitor
2 0 7

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
Tourist
3 0 3

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
Shopify Partner
5 0 1

hello can you help where should I implement this code 

MelMT
Visitor
1 0 0

Where to put this though?