fix: Fix vscode-graphql-syntax’s grammar to support string literals o…

…n 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
graphql · Mar 16, 2024 · e9fc21a · e9fc21a
1 parent ece99f6
commit e9fc21a
Show file tree

Hide file tree

Showing 5 changed files with 389 additions and 198 deletions.
diff --git a/.changeset/famous-games-begin.md b/.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 (`(`).
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/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"
         }
       },

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js b/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 {

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts b/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) {