Liquid asset loader

examples.liquid

{% liquid
  # CSS only block/section
  render 'utility--asset-loader', name: 'hero', js: false
  
  # Regular block/section
  render 'utility--asset-loader', name: 'featured-product'
%}

{% # Dynamic style %}
{% capture dynamic_style %}
  #shopify-section-{{ section.id }} {
    background-color: {{ section.settings.background_color }};
  }
{% endcapture %}
{% render 'utility--asset-loader', css: 'inline', css_content: dynamic_style %}

{% # Concatenating multiple files %}
{% liquid
  capture concatenated_content
    render 'utility--asset-loader', name: 'first-file', css: 'inline'
    echo 'second-file.css' | asset_url | inline_asset_content  
    echo '.example { color: red; }'
  endcapture
  
  render 'utility--asset-loader', css: 'inline', css_content: concatenated_content
%}

utility--asset-loader.liquid

{% # Asset loader v1.2.0 %}

{% doc %}
  @description Load the assets for a specific component.

  @param {string} [name] - Component name for which to load the assets (required unless using css/js_content parameters)
  @param {string} [css] - CSS loading strategy: 'link' (default), 'inline' or false
  @param {string} [js] - JS loading strategy: 'module' (default), 'inline', 'preload' or false
  @param {string} [css_content] - Inline CSS content (only used if css='inline')
  @param {string} [js_content] - Inline JS content (only used if js='inline')

  @example {% render 'utility--asset-loader', name: 'hero-section' %}
  @example {% render 'utility--asset-loader', name: 'block', css: 'link', js: 'module' %}
  @example {% render 'utility--asset-loader', name: 'critical', css: 'inline', css_content: global_styles %}
{% enddoc %}

{% liquid
  assign css = css | default: 'link', allow_false: true
  assign js = js | default: 'module', allow_false: true

  if css == false and js == false
    continue
  endif

  if css == 'link' and name != blank
    echo name | append: '.css' | asset_url | stylesheet_tag
  elsif css == 'inline' and css_content != blank
    render 'utility--css-minifier', css: css_content
  elsif css == 'inline' and name != blank
    assign css_content = name | append: '.css' | inline_asset_content
    render 'utility--css-minifier', css: css_content
  endif

  if js == 'module' and name != blank
    echo name | append: '.js' | asset_url | script_tag | replace: 'text/javascript', 'module'
  elsif js == 'preload' and name != blank
    echo name | append: '.js' | asset_url | prepend: '<link rel="modulepreload" fetchpriority="high" href="' | append: '">'
    echo name | append: '.js' | asset_url | script_tag | replace: 'text/javascript', 'module' | replace_last: '"', '" rel="modulepreload"'
  elsif js == 'inline' and js_content != blank
    echo js_content | strip_newlines | split: ' ' | join: ' ' | prepend: '<script>' | append: '</script>'
  elsif js == 'inline' and name != blank
    assign js_content = name | append: '.js' | inline_asset_content
    echo js_content | strip_newlines | split: ' ' | join: ' ' | prepend: '<script>' | append: '</script>'
  endif
%}

utility--css-minifier.liquid

{% # CSS Minifier v1.0.0 %}

{% doc %}
  @description Minify and return CSS. Returns nothing if the CSS is empty.

  @param {string} css - CSS to minify.
  @param {string} [base_selector] - CSS base selector.

  @example {% render 'utility--css-minifier', css: css, base_selector: base_selector %}
{% enddoc %}

{% liquid
  assign emptied_css = css | remove: base_selector | remove_first: '#' | remove_first: '{' | remove_last: '}' | strip
  if css == blank or emptied_css == blank
    continue
  endif

  assign css_chunk_list = css | strip_newlines | split: ' ' | join: ' ' | split: '*/'
  assign minified_css = ''
  for css_chunk in css_chunk_list
    assign minified_chunk = css_chunk | split: '/*' | first | strip
    assign minified_css = minified_css | append: minified_chunk
  endfor
  assign minified_css = minified_css | replace: '; ', ';' | replace: '} ', '}' | replace: '{ ', '{' | replace: ' {', '{' | replace: ': ', ':' | replace: ';}', '}' | replace: ') ;', ');'

  style
    echo minified_css
  endstyle
%}