使用 Liquid 语法的 Shopify SCSS 无法转换为 CSS

Question

Shopify 最近决定stop supporting SCSS in their themes。我想将所有 SCSS 文件更改为 CSS，但由于其中包含流动语法，这已成为一场噩梦。这是一个例子：

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

当我尝试通过在线找到的 scss 编译器运行它时，它在第一个 {{、{% 或 {%- 处失败，因为这不是有效的 scss 语法。我想要的最终结果是一个有效的 css 文件，它保留了流动的语法。

我的下一个想法是预编译文件并将流动语法包装在 unquote("") 或稍后要删除的 css 注释中，然后将其传递给从 here 派生的 ruby​​ scss 编译器。像这样的：

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

这几行就成功了，但是我试图解析的原始逻辑有太多的边缘情况，scss到css的转换不可避免地会失败。必须有更好的方法来做到这一点。有人有什么想法吗？我希望 Shopify 允许我们使用他们的 SCSS 编译器。

Answer 1

据我所知，没有可以转换scss.liquid 的程序。 scss.liquid 通常具有链接到您商店中的settings_data.json 的变量，这是独一无二的，还有许多mixin 功能。除了：

1. 获取更新的主题。

2. 在渲染时从页面源中获取文件。

3. 从 SCSS 中删除所有 liquid 并转换。

4. 使用 CSS 和 Liquid 重新编码文件。代替 sass 中的变量，使用var()。这是最痛苦的方式。

    {% 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 %}
   
    // Overlays
   
    :root {
        --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 }};
        --hover-overlay-opacity: {{ image_overlay_opacity_hover | at_most: 1 }};
    }
   

Answer 2

这有什么好运气吗？我也希望将 shopify 主题从 scss 迁移到 css，但流动性阻碍了。

我使用以下方法成功转义了“{{”：

$product-accordion-title-size: #{'"{{ settings.font_product_accordion_title_size }}"'}px;

但我遇到了许多其他极端情况问题。即让编译器在通过 scss 函数时接受注释掉的值：

      border-color: darken($color-button-bg,10%);

哪些参考：

$color-button-bg: #{'"{{ settings.color_btn_bg }}"'};

这最终会破坏编译器，因为它期望那里有一个值。

目前我正在考虑实际处理每个有 scss 函数的情况，找到相应的值并手动输入，因为我对任何声称将 json 配置文件转换为 scss 的 npm 包都没有运气。

我意识到这是一个独立的问题，但希望关于评论的部分能帮助你并算作一个答案¯\_(ツ)_/¯ 。 A writeup 关于注释掉一些液体。