search

Shopify / prettier-plugin-liquid

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

Quote swap on json Liquid variable #168

Closed charlespwd closed 9 months ago

charlespwd commented 1 year ago

Describe the bug Quote swap on Liquid output is unsafe.

Unformatted source

<div data-json='{{ json_object }}'></div>

Expected output

<div data-json='{{ json_object }}'></div>

Actual output

<div data-json="{{ json_object }}"></div>

Additional context The quote swap breaks the HTML parsing. I think we have to revert the quote swap if there's Liquid in the attribute. No way to know.

charlespwd commented 9 months ago

The actual solution for this is to not quote swap ever. But I think that's a bit too picky for an edge-case. IMO JSON shouldn't be in a data-attribute but rather in a tag instead. It makes for nicer to look at HTML too.

<div data-json-id='json-id-1'></div>
<script id="json-id-1" type="application/json">
  {{ json_object }}
</script>
<script>
  // example access
  const json = JSON.parse(document.getElementById('json-id-1'));
</script>