Skip to content

Newline in string prop treated differently if in curly braces #15554

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

Open
timephy opened this issue Mar 20, 2025 · 2 comments
Open

Newline in string prop treated differently if in curly braces #15554

timephy opened this issue Mar 20, 2025 · 2 comments

Comments

@timephy
Copy link

timephy commented Mar 20, 2025

Describe the bug

Given any child component taking a prop text: string.

<Component text={"A\nB"}></Component>
<Component text="A\nB"></Component>

results in:

A B
A\nB

To me this is very unexcepted. It broke my layout that depended on a \n.

I can see that syntax highlighting marks \n as "special" when in curly braces, so I could have noticed it.

However, the linting warning Unexpected mustache interpolation with a string literal value.eslint[svelte/no-useless-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) lead me to remove the curly braces.

Reproduction

https://svelte.dev/playground/a709bcd1203b4664ab2188c4434b8099?version=5.23.2#H4sIAAAAAAAAE3WRzWrDMBCEX2VZemjBxHdjG9Le8wLdHhRnHQTySkibJsb43Yv6ExMnvc5-M9pZTShmYKxwx2dnhcEKJI1WjhCiD6CRjfIBDrbvObKoG8H2mepO0Y2wj6bjhAX21nHC6n1CHUMOzAIWf_HbEDbpk51mbW8SP9I7L8qiCSusUxdt0JaElNQOwUeFNz8ELywKffQDEG7Kq_SbQkhSl4tZ6sWkfNFmItwSySvh3NaLvb0nr-ANhwXmKVYaTzwX_9Rdr3Vb-sH0vjo4I8eGUBPh9xk6L0lhyq_P0MBT_p_0_LLuG9ofpC7DatmP-QundUBE7gEAAA==

Logs

System Info

playground

Severity

annoyance

@timephy
Copy link
Author

timephy commented Mar 20, 2025

I needed to add this to my eslint config to get rid of the error.

            "svelte/no-useless-mustaches": [
                "error",
                {
                    ignoreIncludesComment: true,
                    ignoreStringEscape: true,
                },
            ],

But shouldn't that be the default behaviour?

@brunnerh
Copy link
Member

brunnerh commented Mar 20, 2025

The overall behavior is expected, without {}, this is just a plain HTML attribute. \n has no meaning in HTML.

This is a failure of the ESLint rule; if the string uses escape sequences this is arguably not a "useless mustache". There are of course ways to encode special characters in HTML but this is usually more verbose (involving entities like &#x0A; - there appears to be a bug here).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants