feat: allow custom jsxImportSource

Created by: hermansje

PR content

This PR allows configuring a custom value for the importSource option of @babel/preset-react.

TypeScript users can set the corresponding compiler option jsxImportSource in tsconfig.json (introduced in TypeScript 4.1) to configure the JSX import source. The compiler option will be removed if from tsconfig.json if Babel won't use it.

JavaScript users, or TypeScript users that want to override tsconfig.json, can set the environment variable JSX_IMPORT_SOURCE.

Motivation

This PR implements the feature request motivated in https://github.com/facebook/create-react-app/issues/9847 (Emotion without pragma + consistency between tsconfig and Babel) and supersedes the implementations of two existing pull requests https://github.com/facebook/create-react-app/pull/10138 (why-did-you-render, Preact) and https://github.com/facebook/create-react-app/pull/10580.

While this project tries to avoid flags, there are some considerations that might make the case for an exception: the limited logic, the parallel in the implementation with the React runtime heuristic, the integration with tsconfig.json, the assistance to TypeScript users and the benefits of the feature for React users (e.g. ease of use of libraries like Emotion, compatibility with developer tooling like why-did-you-render).

Test plan

I tested with a React + TypeScript + Emotion setup (compilerOptions.jsxImportSource in tsconfig.json set to "@emotion/react").

• With the published version, the css prop is not transformed to classes.
• With this branch, the css prop is correctly transformed to classes
• When called with JSX_IMPORT_SOURCE=react the result is the same again as with the published version (because the environment variable takes precedence)
• When the requirements for this feature are not met, a message is added to the list of tsconfig changes and jsxImportSource is removed