fix: Fix vscode-graphql-syntax’s grammar to support string literals on separate lines

.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 paranthesis (`(`).

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

@@ -4,39 +4,33 @@
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*\\(?\\s*(`|'|\")",
-      "beginCaptures": {
-        "1": {
-          "name": "variable.other.class.js"
-        },
-        "2": {
-          "name": "entity.name.function.tagged-template.js"
-        },
-        "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"
-        }
-      },
+      "begin": "(?<=(?:(?:Relay\\??\\.)QL|gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)\\(",
+      "end": "\\)",
       "patterns": [
         {
-          "include": "source.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"
+            }
+          ]
         }
       ]
     },
     {
       "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 +42,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

@@ -36,8 +36,18 @@ const graphql = graphql(`
   }
 `);
 
+const graphql = graphql(
+  `
+    query { test }
+  `,
+  [var1, var2]
+);
+
 const query = /* GraphQL */ 'query { id } ';
 const query = graphql('query { id } ');
+const query = graphql(
+  'query { id } '
+);
 
 const queryWithInlineComment = `#graphql
  query {
@@ -58,7 +68,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) {