Use last detected JSX import source pragma as canonical source, rather than first (#43351)

Author: weswigham

Diff for: src/compiler/utilities.ts

@@ -6054,7 +6054,7 @@ namespace ts {
 
     export function getJSXImplicitImportBase(compilerOptions: CompilerOptions, file?: SourceFile): string | undefined {
         const jsxImportSourcePragmas = file?.pragmas.get("jsximportsource");
-        const jsxImportSourcePragma = isArray(jsxImportSourcePragmas) ? jsxImportSourcePragmas[0] : jsxImportSourcePragmas;
+        const jsxImportSourcePragma = isArray(jsxImportSourcePragmas) ? jsxImportSourcePragmas[jsxImportSourcePragmas.length - 1] : jsxImportSourcePragmas;
         return compilerOptions.jsx === JsxEmit.ReactJSX ||
             compilerOptions.jsx === JsxEmit.ReactJSXDev ||
             compilerOptions.jsxImportSource ||

Diff for: tests/baselines/reference/jsxImportSourceNonPragmaComment.errors.txt

@@ -0,0 +1,26 @@
+tests/cases/compiler/jsxImportSourceNonPragmaComment.tsx(3,21): error TS2307: Cannot find module '@emotion/react' or its corresponding type declarations.
+tests/cases/compiler/jsxImportSourceNonPragmaComment.tsx(7,5): error TS2307: Cannot find module '@emotion/react/jsx-runtime' or its corresponding type declarations.
+
+
+==== tests/cases/compiler/jsxImportSourceNonPragmaComment.tsx (2 errors) ====
+    /* eslint-disable react/react-in-jsx-scope -- Unaware of @jsxImportSource */
+    /** @jsxImportSource @emotion/react */
+    import { css } from "@emotion/react";
+                        ~~~~~~~~~~~~~~~~
+!!! error TS2307: Cannot find module '@emotion/react' or its corresponding type declarations.
+    
+    export default function Component() {
+      return (
+        <input
+        ~~~~~~
+          css={css`
+    ~~~~~~~~~~~~~~~
+            color: red;
+    ~~~~~~~~~~~~~~~~~~~
+          `}
+    ~~~~~~~~
+        />
+    ~~~~~~
+!!! error TS2307: Cannot find module '@emotion/react/jsx-runtime' or its corresponding type declarations.
+      );
+    }

Diff for: tests/baselines/reference/jsxImportSourceNonPragmaComment.js

@@ -0,0 +1,30 @@
+//// [jsxImportSourceNonPragmaComment.tsx]
+/* eslint-disable react/react-in-jsx-scope -- Unaware of @jsxImportSource */
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+export default function Component() {
+  return (
+    <input
+      css={css`
+        color: red;
+      `}
+    />
+  );
+}
+
+//// [jsxImportSourceNonPragmaComment.jsx]
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+exports.__esModule = true;
+/* eslint-disable react/react-in-jsx-scope -- Unaware of @jsxImportSource */
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+function Component() {
+    return (<input css={(0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: red;\n      "], ["\n        color: red;\n      "])))}/>);
+}
+exports["default"] = Component;
+var templateObject_1;

Diff for: tests/baselines/reference/jsxImportSourceNonPragmaComment.symbols

@@ -0,0 +1,20 @@
+=== tests/cases/compiler/jsxImportSourceNonPragmaComment.tsx ===
+/* eslint-disable react/react-in-jsx-scope -- Unaware of @jsxImportSource */
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+>css : Symbol(css, Decl(jsxImportSourceNonPragmaComment.tsx, 2, 8))
+
+export default function Component() {
+>Component : Symbol(Component, Decl(jsxImportSourceNonPragmaComment.tsx, 2, 37))
+
+  return (
+    <input
+      css={css`
+>css : Symbol(css, Decl(jsxImportSourceNonPragmaComment.tsx, 6, 10))
+>css : Symbol(css, Decl(jsxImportSourceNonPragmaComment.tsx, 2, 8))
+
+        color: red;
+      `}
+    />
+  );
+}

Diff for: tests/baselines/reference/jsxImportSourceNonPragmaComment.types

@@ -0,0 +1,27 @@
+=== tests/cases/compiler/jsxImportSourceNonPragmaComment.tsx ===
+/* eslint-disable react/react-in-jsx-scope -- Unaware of @jsxImportSource */
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+>css : any
+
+export default function Component() {
+>Component : () => any
+
+  return (
+>(    <input      css={css`        color: red;      `}    />  ) : any
+
+    <input
+><input      css={css`        color: red;      `}    /> : any
+>input : any
+
+      css={css`
+>css : any
+>css`        color: red;      ` : any
+>css : any
+>`        color: red;      ` : "\n        color: red;\n      "
+
+        color: red;
+      `}
+    />
+  );
+}

Diff for: tests/cases/compiler/jsxImportSourceNonPragmaComment.tsx

@@ -0,0 +1,14 @@
+// @jsx: preserve
+/* eslint-disable react/react-in-jsx-scope -- Unaware of @jsxImportSource */
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+export default function Component() {
+  return (
+    <input
+      css={css`
+        color: red;
+      `}
+    />
+  );
+}