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