fix(gatsby-plugin-mdx): ignore anything after an import in mdx (#25639)

Author: pvdz

packages/gatsby-plugin-mdx/utils/__tests__/__snapshots__/import-parser.js.snap

@@ -913,6 +913,78 @@ Object {
 `;
 
 exports[`regex import scanner syntactic coverage should parse brute force regular case 57 1`] = `
+Object {
+  "input": "import {x, import as y} from 'bar';",
+  "result": Object {
+    "bindings": Array [
+      "x",
+      "y",
+    ],
+    "segments": Array [
+      "x",
+      "import as y",
+    ],
+  },
+}
+`;
+
+exports[`regex import scanner syntactic coverage should parse brute force regular case 58 1`] = `
+Object {
+  "input": "import foo from 'bar' // commment",
+  "result": Object {
+    "bindings": Array [
+      "foo",
+    ],
+    "segments": Array [
+      "foo",
+    ],
+  },
+}
+`;
+
+exports[`regex import scanner syntactic coverage should parse brute force regular case 59 1`] = `
+Object {
+  "input": "import foo from 'bar' // commment containing confusing from \\"chars\\"",
+  "result": Object {
+    "bindings": Array [
+      "foo",
+    ],
+    "segments": Array [
+      "foo",
+    ],
+  },
+}
+`;
+
+exports[`regex import scanner syntactic coverage should parse brute force regular case 60 1`] = `
+Object {
+  "input": "import foo from 'bar' // import bad from 'imp'",
+  "result": Object {
+    "bindings": Array [
+      "foo",
+    ],
+    "segments": Array [
+      "foo",
+    ],
+  },
+}
+`;
+
+exports[`regex import scanner syntactic coverage should parse brute force regular case 61 1`] = `
+Object {
+  "input": "import foo from 'bar'//next to it",
+  "result": Object {
+    "bindings": Array [
+      "foo",
+    ],
+    "segments": Array [
+      "foo",
+    ],
+  },
+}
+`;
+
+exports[`regex import scanner syntactic coverage should parse brute force regular case 62 1`] = `
 Object {
   "input": "import multi as dong, {foo} from 'bar'
 import as as x, {from as y} from 'bar'",

packages/gatsby-plugin-mdx/utils/__tests__/import-parser.js

@@ -67,6 +67,11 @@ function getBruteForceCases() {
     import {import as x, y} from 'bar'
     import {x, import as y} from 'bar'
     import Events from "@components/events/events"
+    import {x, import as y} from 'bar';
+    import foo from 'bar' // commment
+    import foo from 'bar' // commment containing confusing from "chars"
+    import foo from 'bar' // import bad from 'imp'
+    import foo from 'bar'//next to it
   `
     .trim()
     .split(/\n/g)
@@ -99,19 +104,27 @@ describe(`regex import scanner`, () => {
           )
         ).toBe(true)
 
+        // For the next tests, don't mangle the comment and make sure it doesn't
+        // end up on a newline by itself. Test cases only have `//` for comment.
+        let commentStart = input.indexOf(`//`) - 1
+        if (commentStart < 0) commentStart = input.length
+        const commentLess = input.slice(0, commentStart)
+        const commentPart = input.slice(commentStart)
+
         // Confirm that the parser works when all spaces become newlines
-        const newlined = input.replace(/ /g, `\n`)
+        const newlined = commentLess.replace(/ /g, `\n`) + commentPart
         expect(parseImportBindings(newlined)).toEqual(bindings)
 
         // Confirm that the parser works with a minimal amount of spacing
-        const minified = input.replace(
-          /(?<=[_\w$]) (?![_\w$])|(?<![_\w$]) (?=[_\w$])|(?<![_\w$]) (?![_\w$])/g,
-          ``
-        )
+        const minified =
+          commentLess.replace(
+            /(?<=[_\w$]) (?![_\w$])|(?<![_\w$]) (?=[_\w$])|(?<![_\w$]) (?![_\w$])/g,
+            ``
+          ) + commentPart
         expect(parseImportBindings(minified)).toEqual(bindings)
 
         // Confirm that the parser works with an excessive amount of spacing
-        const blown = input.replace(/ /g, `   `)
+        const blown = commentLess.replace(/ /g, `   `) + commentPart
         expect(parseImportBindings(blown)).toEqual(bindings)
       })
     })

packages/gatsby-plugin-mdx/utils/import-parser.js

@@ -19,7 +19,7 @@
  */
 function parseImportBindings(importCode, returnSegments = false) {
   const str = importCode.replace(
-    /^\s*import|[{},]|\s*from\s*['"][^'"]*?['"]\s*$/gm,
+    /^\s*import|[{},]|\s*from\s*['"][^'"]*?['"].*?$/gm,
     ` , `
   )
   const segments = str