Prettier assumes untagged template string parameter is graphql

[tdjone1]

Prettier 1.19.1
Playground link

--parser typescript

Input:

function graphql(notgql: string): string {
  return notgql + ' something'
}

const x = graphql(`{id}`)

// following code will cause prettier error: Syntax Error: Unexpected Name "x" (1:1)
// const y = graphql(`x {id}`)

Output:

function graphql(notgql: string): string {
  return notgql + " something";
}

const x = graphql(
  `
    {
      id
    }
  `
);

// following code will cause prettier error: Syntax Error: Unexpected Name "x" (1:1)
// const y = graphql(`x {id}`)

Expected behavior:

The template strings passed to graphql() should not be reformatted because there is no guarantee that they are graphql queries.

[alexander-akait]

Do not use graphql name, it is special name and have special formatting, duplicate of #5588

[tdjone1]

When a "formatter" starts dictating what names can be used for functions it has gone beyond the scope of formatting.

[thorn0]

Yep, that's a known issue: #5588.

[tdjone1]

Not sure this really qualifies as a duplicate of #5588. That issue is about tagged templates.

[thorn0]

Good point, but essentially it's the same problem.

[fisker]

We should reopen this. This is not about TaggedTemplateExpression and we don't have similar logic for other languages.

This comment

prettier/src/language-js/embed.js

Lines 50 to 58 in 29b9f6b

	/*
	* react-relay and graphql-tag
	* graphql`...`
	* graphql.experimental`...`
	* gql`...`
	*
	* This intentionally excludes Relay Classic tags, as Prettier does not
	* support Relay Classic formatting.
	*/

didn't mention graphql(), we should just exclude CallExpression

prettier/src/language-js/embed.js

Lines 515 to 517 in 29b9f6b

	(parent.type === "CallExpression" &&
	parent.callee.type === "Identifier" &&
	parent.callee.name === "graphql")))

---

html: only check TaggedTemplateExpression

prettier/src/language-js/embed.js

Line 543 in 29b9f6b

node.type === "TaggedTemplateExpression" &&

markdown: same

prettier/src/language-js/embed.js

Line 164 in 29b9f6b

parentParent.type === "TaggedTemplateExpression" &&

css: same

prettier/src/language-js/embed.js

Line 365 in 29b9f6b

parent.type === "TaggedTemplateExpression" &&

[thorn0]

It's enough to mention this in #5588. No need to treat this as a separate issue.

[fisker]

But we are not going to fix #5588 in the near future, right?

But graphql() should consider a bug, and it's easy to fix.

[alexander-akait]

Okay, let's mark it as bug until we do not disable prettify tagged templated

[thorn0]

Okay, but calling it a bug is strange, given that it was intentionally implemented in #2781 as a solution for #2780. Conceptually, it's the same feature as formatting tagged templates. As we don't know how many users rely on this currently, we can't just remove it, which means it needs configurability. So it's really the same problem as #5588 / #6626.

[fisker]

I didn't know #2781 , if we don't want remove this feature now, maybe we can make it only work on second argument?

[alexander-akait]

@thorn0 I agree with you, but we still haven’t decided how to fix it:

1. Do not touch tagged templates and remove code respected for that behavior
2. Allow to user setup tagged templates (if yes we should not close it)
3. Maybe other ideas?

Sometimes I found formatting tagged templates is very useful, I would not want to delete it, but I understand that this is a potentially dangerous action, with limitations, maybe we should describe them in docs

[thorn0]

@fisker Yes, why not, sounds good.

@evilebottnawi Something like #6626 has to be implemented. I see no other ways.

[alexander-akait]

@thorn0 Yep, but i think it is not high priority right now