Add support for reading JSX config from tsconfig.json

3 files changed, 22 insertions, 0 deletions

diff --git a/integration/snippets/custom-emotion-jsx/file.jsx b/integration/snippets/custom-emotion-jsx/file.jsx
new file mode 100644
index 000000000..c00cb0543
--- /dev/null
+++ b/integration/snippets/custom-emotion-jsx/file.jsx
@@ -0,0 +1,15 @@
+import * as ReactDOM from "react-dom";
+export const Foo = () => <div css={{ content: '"it worked!"' }}></div>;
+
+export function test() {
+  const element = document.createElement("div");
+  element.id = "custom-emotion-jsx";
+  document.body.appendChild(element);
+  ReactDOM.render(<Foo />, element);
+  const style = window.getComputedStyle(element.firstChild);
+  if (!(style["content"] ?? "").includes("it worked!")) {
+    throw new Error('Expected "it worked!" but received: ' + style["content"]);
+  }
+
+  return testDone(import.meta.url);
+}
diff --git a/integration/snippets/custom-emotion-jsx/tsconfig.json b/integration/snippets/custom-emotion-jsx/tsconfig.json
new file mode 100644
index 000000000..7bb0f58a0
--- /dev/null
+++ b/integration/snippets/custom-emotion-jsx/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "@emotion/react"
+  }
+}
diff --git a/integration/snippets/package.json b/integration/snippets/package.json
index 1e9e250b3..0f5dce714 100644
--- a/integration/snippets/package.json
+++ b/integration/snippets/package.json
@@ -4,6 +4,8 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.4.1",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",