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

Technical Q&A

Topic summary

The original poster seeks a way to minify a styles.css.liquid file without using Shopify’s deprecated Sass processing. Traditional CSS minifiers fail because they don’t correctly handle Liquid template tags embedded in the CSS.

Solution Provided:
A community member shared a Liquid-based minification workaround that wraps the CSS file contents in a {%- capture content %} block. The code:

  • Removes comments, extra spaces, and newlines
  • Preserves Liquid tags during minification
  • Runs at runtime rather than build time
  • Works sufficiently for Google PageSpeed/Lighthouse metrics

Implementation:
Place the minification code directly in the css.liquid file, wrapping it around existing CSS+Liquid statements. The capture block goes at the start, with processing logic at the end to output the minified result.

Follow-up Questions:
Several users requested clarification on exact placement within theme files (whether in theme.css.liquid, inside <body> tags, or elsewhere). The thread remains open with implementation details being discussed.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

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

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…

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

1 Like
4

This is amazing! Is this code intended to be placed inside of the theme.css file or should it be wrapping the tags in the theme?

1 Like
5

hello can you help where should I implement this code

1 Like
6

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.

2 Likes
7

Where to put this though?