Shopify / prettier-plugin-liquid

Prettier Liquid/HTML plugin
https://npm.im/@shopify/prettier-plugin-liquid
MIT License
93 stars 15 forks source link

Add support for `<!-- white-space: normal -->` comment #142

Closed charlespwd closed 1 year ago

charlespwd commented 1 year ago

Some folks use the capture tag to solve the "conditionally wrapped" problem.

Example:

{% capture inner %}
  <!-- block of html -->
{% endcapture %}

{% if is_link %}
  <a>
    {{ inner }}
  </a>
{% else %}
  {{ inner }}
{% endif %}

This is probably the safest way to solve this problem. But since the capture tag is whitespace: pre, it also means we won't reformat the insides of that tag.

With the <!-- white-space: normal --> comment, the {% capture %} tag will now be deemed normal and we'll reformat its insides properly.

e.g.

<!-- input -->
<!-- white-space: normal -->
{% capture inner %}
  <div>{{x|'t'}}</div>
{% endcapture %}

<!-- formatted -->
<!-- white-space: normal -->
{% capture inner %}
  <div>
    {{ x | 't' }}
  </div>
{% endcapture %}

Note: <!-- whitespace: normal -->, {% # whitespace: normal %}, {% # white-space: normal %} are all equivalent.