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.

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

Adding quotes around output markup with | json is not a safe formatting operation #377

Open
ChrisCrossCrash opened this issue Jul 16, 2023 · 2 comments
Labels
area:prettier-plugin Bug Something isn't working Severity: 4 theme bugs that won't be prioritized in the near future

Comments

@ChrisCrossCrash
Copy link

ChrisCrossCrash commented Jul 16, 2023

Describe the bug

Formatting the document causes quotation marks to be added around output markup that contains | json, which is not a safe formatting operation if the value being piped to the json filter is a string.

Unformatted source
No quotes around the tag:

<div
  data-something={{ someStringVar | json }}
></div>

Expected output
(no change)

<div
  data-something={{ someStringVar | json }}
></div>

Actual output
Adds quotes around tag:

<div
  data-something='{{ someStringVar | json }}'
></div>

Which gets evaluated as:

<div
  data-something=""someValue""
></div>

(Or maybe that's just the way Chrome renders it on the 'Elements' tab. When I copy the outerHTML to a clipboard it looks like "&quot;someValue&quot;")

And then the element's dataset gets changed from:

{
  something: 'someValue'
}

to:

{
  something: '\"someValue\"'
}

Debugging information

  • Ubuntu 20.04
  • Prettier version 3.0.0
  • @shopify/prettier-plugin-liquid version 1.2.1
@ChrisCrossCrash ChrisCrossCrash added the Bug Something isn't working label Jul 16, 2023
@charlespwd
Copy link
Contributor

Oof. Until this gets fixed, you should be able to use {% # prettier-ignore-attributes %} for this.

(See test case)

@charlespwd
Copy link
Contributor

I'm not entirely sure what our stance wants to be on this.

Because a variable could contain quotes in it, it would mean that we should never quote swap. If I turn that off, I'll get issues reporting that we don't quote swap :P and don't maintain a consistent style.

@jamesmengo jamesmengo transferred this issue from Shopify/prettier-plugin-liquid Jun 20, 2024
@jamesmengo jamesmengo added Severity: 4 theme bugs that won't be prioritized in the near future and removed untriaged labels Jul 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:prettier-plugin Bug Something isn't working Severity: 4 theme bugs that won't be prioritized in the near future
Projects
None yet
Development

No branches or pull requests

3 participants