Skip to content

Latest commit

 

History

History
50 lines (43 loc) · 1.29 KB

File metadata and controls

50 lines (43 loc) · 1.29 KB

Liquid that can't be prettier

Like the Ember/Handlebars plugin, this prettier plugin only supports a subset of Liquid: Liquid that can be turned into a tree.

A common use case that isn't supported is opening HTML tags inside a Liquid block without closing it (and vice-versa):

// not supported
{% if is_3d %}
  <product-media list=of props>
{% else %}
  <div>
{% endif %}
    content that goes in the middle
{% if is_3d %}
  </product-media>
{% else %}
  </div>
{% endif %}

When this happens, prettier will throw the following error:

example.liquid[error] example.liquid: LiquidHTMLParsingError: Attempting to close LiquidTag 'if' before HtmlElement 'div' was closed
[error]   3 |   <product-media list=of props>
[error]   4 | {% else %}
[error] > 5 |   <div>
[error]     |   ^^^^^
[error] > 6 | {% endif %}
[error]     | ^^^^^^^^^^^^
[error]   7 |     content that goes in the middle
[error]   8 | {% if is_3d %}
[error]   9 |   </product-media>

However... We do support Liquid variables as HTML tag names.

{% liquid
  if is_3d
    assign wrapper = 'product-media'
  else
    assign wrapper = 'div'
  endif
%}
<{{ wrapper }}>
  content that goes in the middle.
</{{ wrapper }}>