search

Shopify / prettier-plugin-liquid

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

Issue formatting attributes #163

Closed nboliver closed 1 month ago

nboliver commented 1 year ago

Describe the bug When formatting the content of a class attribute, extra characters are added to the liquid tag and the closing }} is removed.

Unformatted source

<body class="template-{{ template.name }}" data-instant-allow-query-string {% if settings.reduce_animations %}data-reduce-animations{% endif %}>

Expected output

<body
    class="template-{{ template.name }}"
    data-instant-allow-query-string
    {% if settings.reduce_animations %}
      data-reduce-animations
    {% endif %}
  >

Actual output

<body
    class="template-{{ template.nnamee "
    data-instant-allow-query-string
    {% if settings.reduce_animations %}
      data-reduce-animations
    {% endif %}
  >

Debugging information

Additional context Screenshot of error diff:

image

The issue can be fixed by adding {% # prettier-ignore-attributes %} above the element.

charlespwd commented 1 year ago

Weird. I pasted your example in the playground and I'm not seeing the issue? Is this happening in the Shopify Liquid VS Code extension or the online store code editor?

image

charlespwd commented 1 year ago

Using an old version of the plugin maybe? Is this on v1.0.6?

Same thing happens in the Shopify Liquid VS Code extension or the Prettier extension.

https://screenshot.click/16-20-yzvam-dmqf1.mp4

nboliver commented 1 year ago

Yeah, using VS code with v1.0.6. I have "@shopify/prettier-plugin-liquid": "^1.0.6" in package.json and am requiring the plugin in prettier.config.js like this: 

module.exports = {
 ...
  plugins: [
    require('@shopify/prettier-plugin-liquid'),
    require('prettier-plugin-tailwindcss'),
  ],
};

Perhaps it's something else in the file that's causing the issue? It's in theme.liquid, which is quite large.

charlespwd commented 1 year ago

Does it happen if you paste your entire code in the playground?

charlespwd commented 1 year ago

Also, might be related to prettier-plugin-tailwindcss? Given this is an error in the class attribute?