fix: auto import logic when jsx: react-jsx/react-jsxdev

Author: LongYinan

src/index.ts

@@ -48,6 +48,7 @@ const defaultOptions: Options = {
   autoLabel: true,
   labelFormat: '[local]',
   autoInject: true,
+  jsxImportSource: '@emotion/react',
 }
 
 const getPackageRootPath = memoize((filename: string) => findRoot(filename))
@@ -157,19 +158,21 @@ export const createEmotionPlugin = (pluginOptions?: Options) => {
   }
 
   const transformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
-    let importCalls: ImportInfo[] = []
+    const importCalls: ImportInfo[] = []
     const compilerOptions = context.getCompilerOptions()
     let sourcemapGenerator: SourceMapGenerator
     let emotionTargetClassNameCount = 0
     let sourceFile: ts.SourceFile
     let inserted = false
     const visitor: ts.Visitor = (node) => {
       if (ts.isImportDeclaration(node)) {
-        importCalls = importCalls.concat(getImportCalls(node, compilerOptions))
+        importCalls.push(...getImportCalls(node, compilerOptions))
         // insert import { jsx [as jsxFactory] } from '@emotion/react' behind the react import declaration
         if (
           !inserted &&
           options.autoInject &&
+          // only for jsx: 'react'
+          compilerOptions.jsx === ts.JsxEmit.React &&
           (<ts.StringLiteral>node.moduleSpecifier).text === 'react'
         ) {
           inserted = true
@@ -369,6 +372,21 @@ export const createEmotionPlugin = (pluginOptions?: Options) => {
         }
       }
 
+      if (
+        ts.isJsxAttribute(node) &&
+        node.name.text === 'css' &&
+        (compilerOptions.jsx === ts.JsxEmit.ReactJSX ||
+          compilerOptions.jsx === ts.JsxEmit.ReactJSXDev) &&
+        !importCalls.find((info) => {
+          return (
+            info.moduleName === '@emotion/react' &&
+            info.exportedNames.includes('jsx')
+          )
+        })
+      ) {
+        inserted = true
+      }
+
       return ts.visitEachChild(node, visitor, context)
     }
     return (node) => {
@@ -388,7 +406,7 @@ export const createEmotionPlugin = (pluginOptions?: Options) => {
           },
         })
       }
-      importCalls = []
+      importCalls.length = 0
       inserted = false
       emotionTargetClassNameCount = 0
       return distNode

tests/__snapshots__/auto-import-test.shot

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`auto insert jsx when css attribute used 1`] = `
+
+File: auto-import-test.tsx
+TypeScript before transform:
+  
+  export const Button = () => {
+    return <div css={{ '.btn-text': { color: 'red' } }} />
+  }  
+  
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+TypeScript after transform:
+  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+  export const Button = () => {
+    return _jsx("div", { css: { '.btn-text': { color: 'red' } } }, void 0);
+  };
+  
+
+`;

tests/unit.spec.ts

@@ -64,29 +64,7 @@ fixtures
   )
   .forEach((filename) => {
     const sourceCode = fs.readFileSync(join(baseDir, filename), 'utf-8')
-
-    function transform(options?: Options): TransformBaseline {
-      const emotion = createEmotionPlugin(options)
-      const sourceFile = ts.createSourceFile(
-        join(baseDir, `${filename}`),
-        sourceCode,
-        ts.ScriptTarget.ESNext,
-        true,
-      )
-      const [transformed] = ts.transform(
-        sourceFile,
-        [emotion],
-        compilerOptions,
-      ).transformed
-      return {
-        transformed: printer.printFile(transformed),
-        source: printer.printFile(sourceFile),
-        filename,
-        type: 'transform-baseline',
-        content: sourceCode,
-      }
-    }
-
+    const transform = transformFactory(filename, sourceCode)
     const pathToSnap = join(
       process.cwd(),
       'tests',
@@ -130,3 +108,63 @@ fixtures
       expect(result).toMatchSpecificSnapshot(pathToSnap)
     })
   })
+
+it('auto insert jsx when css attribute used', () => {
+  const sourceCode = `
+export const Button = () => {
+  return <div css={{ '.btn-text': { color: 'red' } }} />
+}  
+`
+  const { outputText } = ts.transpileModule(sourceCode, {
+    compilerOptions: {
+      target: ts.ScriptTarget.ES2018,
+      jsx: ts.JsxEmit.ReactJSX,
+      module: ts.ModuleKind.ESNext,
+    },
+    transformers: {
+      before: [
+        createEmotionPlugin({
+          autoInject: true,
+          jsxImportSource: '@emotion/react',
+        }),
+      ],
+    },
+  })
+  expect({
+    transformed: outputText,
+    source: sourceCode,
+    filename: 'auto-import-test.tsx',
+    type: 'transform-baseline',
+    content: sourceCode,
+  }).toMatchSpecificSnapshot(
+    join(process.cwd(), 'tests', '__snapshots__', `auto-import-test.shot`),
+  )
+})
+
+function transformFactory(
+  filename: string,
+  sourceCode: string,
+  additionalCompilerOptions: ts.CompilerOptions = {},
+): (options?: Options) => TransformBaseline {
+  return (options?: Options) => {
+    const emotion = createEmotionPlugin(options)
+    const sourceFile = ts.createSourceFile(
+      join(baseDir, filename),
+      sourceCode,
+      ts.ScriptTarget.ESNext,
+      true,
+    )
+    const [transformed] = ts.transform(sourceFile, [emotion], {
+      ...compilerOptions,
+      ...{ jsx: ts.JsxEmit.React, jsxImportSource: undefined },
+      ...additionalCompilerOptions,
+    }).transformed
+    return {
+      transformed: printer.printFile(transformed),
+      source: printer.printFile(sourceFile),
+      filename,
+      type: 'transform-baseline',
+      content: sourceCode,
+    }
+  }
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react-jsxdev",
+    "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
     "allowSyntheticDefaultImports": true,
     "declaration": true,