Add support for jsxImportSource in tsconfig/jsconfig

Next.js will respect jsxImportSource set in jsconfig.json or tsconfig.json with this change.

packages/next/build/swc/options.js

@@ -9,6 +9,7 @@ function getBaseSWCOptions({
   styledComponents,
   paths,
   baseUrl,
+  importSource,
 }) {
   const isTSFile = filename.endsWith('.ts')
   const isTypeScript = isTSFile || filename.endsWith('.tsx')
@@ -30,6 +31,7 @@ function getBaseSWCOptions({
 
       transform: {
         react: {
+          importSource: importSource || 'react',
           runtime: 'automatic',
           pragma: 'React.createElement',
           pragmaFrag: 'React.Fragment',
@@ -103,13 +105,15 @@ export function getLoaderSWCOptions({
   isPageFile,
   hasReactRefresh,
   styledComponents,
+  importSource,
 }) {
   let baseOptions = getBaseSWCOptions({
     filename,
     development,
     globalWindow: !isServer,
     hasReactRefresh,
     styledComponents,
+    importSource,
   })
 
   const isNextDist = nextDistPath.test(filename)

packages/next/build/webpack-config.ts

@@ -321,6 +321,10 @@ export default async function getBaseWebpackConfig(
     runWebpackSpan: Span
   }
 ): Promise<webpack.Configuration> {
+  const { useTypeScript, jsConfig, resolvedBaseUrl } = await loadJsConfig(
+    dir,
+    config
+  )
   const supportedBrowsers = await getSupportedBrowsers(dir, dev)
   const hasRewrites =
     rewrites.beforeFiles.length > 0 ||
@@ -438,6 +442,7 @@ export default async function getBaseWebpackConfig(
             pagesDir,
             hasReactRefresh: !isMiddleware && hasReactRefresh,
             styledComponents: config.experimental.styledComponents,
+            importSource: jsConfig?.compilerOptions?.jsxImportSource,
           },
         }
       : {
@@ -521,11 +526,6 @@ export default async function getBaseWebpackConfig(
       } as ClientEntries)
     : undefined
 
-  const { useTypeScript, jsConfig, resolvedBaseUrl } = await loadJsConfig(
-    dir,
-    config
-  )
-
   function getReactProfilingInProduction() {
     if (reactProductionProfiling) {
       return {

packages/next/build/webpack/loaders/next-swc-loader.js

@@ -35,8 +35,13 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
 
   let loaderOptions = this.getOptions() || {}
 
-  const { isServer, pagesDir, hasReactRefresh, styledComponents } =
-    loaderOptions
+  const {
+    isServer,
+    pagesDir,
+    hasReactRefresh,
+    styledComponents,
+    importSource,
+  } = loaderOptions
   const isPageFile = filename.startsWith(pagesDir)
 
   const swcOptions = getLoaderSWCOptions({
@@ -47,6 +52,7 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
     development: this.mode === 'development',
     hasReactRefresh,
     styledComponents,
+    importSource,
   })
 
   const programmaticOptions = {

test/development/basic/theme-ui.test.ts

@@ -0,0 +1,35 @@
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+
+describe('theme-ui SWC option', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'jsconfig.json': new FileRef(join(__dirname, 'theme-ui/jsconfig.json')),
+        pages: new FileRef(join(__dirname, 'theme-ui/pages')),
+        'theme.js': new FileRef(join(__dirname, 'theme-ui/theme.js')),
+      },
+      dependencies: {
+        'theme-ui': '0.12.0',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should have theme provided styling', async () => {
+    let browser
+    try {
+      browser = await webdriver(next.appPort, '/')
+      const color = await browser.elementByCss('#hello').getComputedCss('color')
+      expect(color).toBe('rgb(51, 51, 238)')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+})

test/development/basic/theme-ui/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "theme-ui"
+  }
+}

test/development/basic/theme-ui/pages/_app.js

@@ -0,0 +1,13 @@
+// basic usage
+import { ThemeProvider } from 'theme-ui'
+import theme from '../theme'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}
+
+export default MyApp

test/development/basic/theme-ui/pages/index.js

@@ -0,0 +1,14 @@
+export default function Home() {
+  return (
+    <div
+      id="hello"
+      sx={{
+        fontWeight: 'bold',
+        fontSize: 4, // picks up value from `theme.fontSizes[4]`
+        color: 'primary', // picks up value from `theme.colors.primary`
+      }}
+    >
+      Hello
+    </div>
+  )
+}

test/development/basic/theme-ui/theme.js

@@ -0,0 +1,13 @@
+// example theme.js
+export default {
+  fonts: {
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading: '"Avenir Next", sans-serif',
+    monospace: 'Menlo, monospace',
+  },
+  colors: {
+    text: '#000',
+    background: '#fff',
+    primary: '#33e',
+  },
+}