Shopify SCSS with Liquid syntax cannot be converted to CSS

Shopify has recently decided to stop supporting SCSS in their themes. I’d like to change all the SCSS files to CSS, but this has become a nightmare due to the presence of liquid syntax contained in them. Here’s an example:

// Overlays
$color-overlay-title-text: {{ settings.color_image_overlay_text }};
$color-image-overlay: {{ settings.color_image_overlay }};
$opacity-image-overlay: {{ settings.image_overlay_opacity | divided_by: 100.00 }};

{%- comment -%}
  Based on the image overlay opacity, either lighten or darken the image on hover
{%- endcomment -%}
{% assign image_overlay_opacity = settings.image_overlay_opacity | divided_by: 100.00 %};

{% if image_overlay_opacity > 0.85 %}
  {% assign image_overlay_opacity_hover = image_overlay_opacity | minus: 0.3 %};
{% else %}
  {% assign image_overlay_opacity_hover = image_overlay_opacity | plus: 0.4 %};
{% endif %}
$hover-overlay-opacity: {{ image_overlay_opacity_hover | at_most: 1 }};

When I try to run this through through an scss compiler found online, it fails at the first {{, {%, or {%- since this isn’t valid scss syntax. The end result I’d like is a valid css file which retains liquid syntax.

My next thought was to precompile the file and wrap liquid syntax inside an unquote("") or a css comment to be removed later, then pass it to the ruby scss compiler forked from here. Something like this:

require 'tempfile'
require 'fileutils'

files = ARGV[0]
input_file, output_file = [files.split(":")[0], files.split(":")[1]]
puts "Converting file: #{input_file}"

path_to_compiler = "./lib/ruby-sass/bin/scss"
tmp_path = "./tmp"

# Replace liquid syntax with something SCSS can parse
temp_file = Tempfile.new('tmpscss')
begin
  File.open(input_file, 'r') do |file|
    file.each_line do |temp_line|
      line = temp_line

      # Trying to account for edge cases in liquid syntax
      if line[0..1] == "{{"
        line = line.gsub("{{", "/*lsc {{").gsub("}}", "}} lsc*/")
      else
        line = line.gsub("{{", "unquote("{{").gsub("}}", "}}")")
      end

      if line.include?("comment")
        line = line.gsub("{%- comment -%}", "/*lsc {%- comment -%}").gsub("{%- endcomment -%}", "{%- endcomment -%} lsc*/")
      else
        line = line.gsub("{%", "/*lsc {%").gsub("%}", "%} lsc*/")
      end
      temp_file.puts line
    end
  end
  temp_file.close
  FileUtils.mv(temp_file.path, tmp_path)

  puts "#{temp_file.path}:#{output_file}"

  # Pass to SCSS compiler
  system "ruby #{path_to_compiler} -C .#{temp_file.path}:#{output_file}"
ensure
  temp_file.close
  temp_file.unlink
end

puts "Output file to: #{Dir.pwd}/#{output_file}"

This is successful for a few lines, but there’s too many edge cases for the primitive logic I tried to parse it through, and the scss to css conversion will inevitably fail. There must be a better way to do this. Does anybody have any ideas? I wish Shopify would allow us to use their SCSS compiler.