Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue formatting attributes #163

Open
nboliver opened this issue Feb 15, 2023 · 5 comments
Open

Issue formatting attributes #163

nboliver opened this issue Feb 15, 2023 · 5 comments
Labels
bug Something isn't working

Comments

@nboliver
Copy link

nboliver commented Feb 15, 2023 •
edited

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

  • OS: Mac
  • Version: 12.6

Additional context
Screenshot of error diff:
image

The issue can be fixed by adding {% # prettier-ignore-attributes %} above the element.
@nboliver nboliver added the bug Something isn't working label Feb 15, 2023
@charlespwd
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Author

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
Copy link
Collaborator

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

@charlespwd
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nboliver @charlespwd