fix: Fix vscode-graphql-syntax’s grammar to support string literals on separate lines [Reapply & Fix] (#3545)

* fix: Fix vscode-graphql-syntax’s grammar to support string literals on separate lines (#3518)
* Allow newlines after `graphql(` before start of query string
* Fix mistaken reverse order of optional `(` and generic `<.*>`
* Replace `(` in second match with newline one
* Match graphql calls separately for string literals inside calls
* Add missing endCaptures to new rule

* Remove lookbehind in grammar and add inner TS/JS source patterns

Using a positive lookbehind can subtly break Textmate/VSCode’s syntax
highlighting. The positive lookbehind (according to some online sources)
can fail unexpectedly when they contain whitespace matches.

This means that we should instead match explicitly, like the other
patterns do. This means however, that we might match too much and
I noticed that arguments to the function aren't highlighted correctly.

According to the interpolation rule in `graphql.json` we now include
patterns for JS/TS/etc as a fallback pattern.

This fixes the issue and prevents the case where the rule was
conflicting with normal JS/TS patterns in a different tmLanguage
grammar.

* Update test and add new “after” variable case

* Revert changes to tests/__fixtures__/test-js.md

Author: kitten

.changeset/famous-games-begin.md

@@ -0,0 +1,5 @@
+---
+'vscode-graphql-syntax': patch
+---
+
+Fix TextMate grammar to support string literals that don’t immediately follow a function call's left-parenthesis (`(`).

packages/vscode-graphql-syntax/grammars/graphql.js.json

@@ -3,8 +3,8 @@
   "injectionSelector": "L:(meta.embedded.block.javascript | meta.embedded.block.typescript | source.js | source.ts | source.tsx | source.vue | source.svelte | source.astro) -source.graphql -inline.graphql -string -comment",
   "patterns": [
     {
-      "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*\\(?\\s*(`|')",
+      "begin": "\\s*+(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*\\(",
+      "end": "\\)",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -14,29 +14,42 @@
         },
         "3": {
           "name": "entity.name.function.tagged-template.js"
-        },
-        "4": {
-          "name": "comment.graphql.js"
-        },
-        "5": {
-          "name": "punctuation.definition.string.template.begin.js"
-        }
-      },
-      "end": "(`|')",
-      "endCaptures": {
-        "0": {
-          "name": "punctuation.definition.string.template.end.js"
         }
       },
       "patterns": [
         {
-          "include": "source.graphql"
+          "contentName": "meta.embedded.block.graphql",
+          "begin": "(`|')",
+          "end": "(`|')",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.template.begin.js"
+            }
+          },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.template.end.js"
+            }
+          },
+          "patterns": [
+            {
+              "include": "source.graphql"
+            }
+          ]
+        },
+        {
+          "patterns": [
+            { "include": "source.js" },
+            { "include": "source.ts" },
+            { "include": "source.js.jsx" },
+            { "include": "source.tsx" }
+          ]
         }
       ]
     },
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*\\(?\\s*(?:<.*>)(`|')",
+      "begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)|(/\\* GraphQL \\*/))\\s*(`|')",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -48,6 +61,9 @@
           "name": "entity.name.function.tagged-template.js"
         },
         "4": {
+          "name": "comment.graphql.js"
+        },
+        "5": {
           "name": "punctuation.definition.string.template.begin.js"
         }
       },

packages/vscode-graphql-syntax/tests/__fixtures__/test.js

@@ -37,8 +37,22 @@ const graphql = graphql(`
   }
 `);
 
+const after1 = 'after';
+
+const graphql = graphql(
+  `
+    query($id: ID!) { test }
+  `,
+  [var1, var2]
+);
+
+const after2 = 'after';
+
 const query = /* GraphQL */ 'query { id } ';
-const query = graphql('query { id } ');
+const query = graphql('query($id: ID!) { id } ');
+const query = graphql(
+  'query($id: ID!) { test }'
+);
 
 const queryWithInlineComment = `#graphql
  query {
@@ -59,7 +73,6 @@ const queryWithInlineComment = `#graphql
         }
     }
 `;
-// TODO: fix this
 const queryWithInlineComment = `
 #graphql
  query {

packages/vscode-graphql-syntax/tests/__fixtures__/test.ts

@@ -25,9 +25,27 @@ const query = graphql<SomeGeneric>`
   }
 `;
 
-// TODO: Fix this
 const query = graphql<Generic>('query { id }');
 
+const query = graphql(
+  'query { id }'
+);
+
+const query = graphql<Generic>(
+  'query { id }'
+);
+
+const query = graphql(`
+  query { id }
+`);
+
+const query = graphql(
+  `
+    query { id }
+  `,
+  [var1, var2]
+);
+
 const queryWithInlineComment = `#graphql
  query {
         user(id: "5", name: boolean) {