feat(gatsby-plugin-emotion): Use correct babel preset with `jsxRuntim…

…e` (#34085) Co-authored-by: Jude Agboola <marvinjudehk@gmail.com>
gatsbyjs · Dec 8, 2021 · 01d7a79 · 01d7a79
1 parent 3a97329
commit 01d7a79
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 13 deletions.
diff --git a/packages/gatsby-plugin-emotion/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-emotion/src/__tests__/gatsby-node.js
@@ -5,8 +5,13 @@ describe(`gatsby-plugin-emotion`, () => {
   describe(`onCreateBabelConfig`, () => {
     it(`sets the correct babel preset`, () => {
       const actions = { setBabelPreset: jest.fn() }
+      const store = {
+        getState: () => {
+          return { config: {} }
+        },
+      }
 
-      onCreateBabelConfig({ actions }, null)
+      onCreateBabelConfig({ actions, store }, null)
 
       expect(actions.setBabelPreset).toHaveBeenCalledTimes(1)
       expect(actions.setBabelPreset).toHaveBeenCalledWith({
@@ -20,11 +25,36 @@ describe(`gatsby-plugin-emotion`, () => {
       })
     })
 
-    it(`passes additional options on to the preset`, () => {
+    it(`sets the correct babel plugin when using automatic jsxRuntime`, () => {
+      const actions = { setBabelPlugin: jest.fn() }
+      const store = {
+        getState: () => {
+          return { config: { jsxRuntime: `automatic` } }
+        },
+      }
+
+      onCreateBabelConfig({ actions, store }, null)
+
+      expect(actions.setBabelPlugin).toHaveBeenCalledTimes(1)
+      expect(actions.setBabelPlugin).toHaveBeenCalledWith({
+        name: expect.stringContaining(path.join(`@emotion`, `babel-plugin`)),
+        options: {
+          sourceMap: true,
+          autoLabel: `dev-only`,
+        },
+      })
+    })
+
+    it(`passes additional options to the preset`, () => {
       const actions = { setBabelPreset: jest.fn() }
       const pluginOptions = { useBuiltIns: true }
+      const store = {
+        getState: () => {
+          return { config: {} }
+        },
+      }
 
-      onCreateBabelConfig({ actions }, pluginOptions)
+      onCreateBabelConfig({ actions, store }, pluginOptions)
 
       expect(actions.setBabelPreset).toHaveBeenCalledTimes(1)
       expect(actions.setBabelPreset).toHaveBeenCalledWith({
@@ -39,6 +69,28 @@ describe(`gatsby-plugin-emotion`, () => {
       })
     })
 
+    it(`passes additional options to the plugin when using automatic jsxRuntime`, () => {
+      const actions = { setBabelPlugin: jest.fn() }
+      const pluginOptions = { useBuiltIns: true }
+      const store = {
+        getState: () => {
+          return { config: { jsxRuntime: `automatic` } }
+        },
+      }
+
+      onCreateBabelConfig({ actions, store }, pluginOptions)
+
+      expect(actions.setBabelPlugin).toHaveBeenCalledTimes(1)
+      expect(actions.setBabelPlugin).toHaveBeenCalledWith({
+        name: expect.stringContaining(path.join(`@emotion`, `babel-plugin`)),
+        options: {
+          sourceMap: true,
+          autoLabel: `dev-only`,
+          useBuiltIns: true,
+        },
+      })
+    })
+
     describe(`in production mode`, () => {
       let env
 
@@ -53,8 +105,13 @@ describe(`gatsby-plugin-emotion`, () => {
 
       it(`sets the correct babel preset`, () => {
         const actions = { setBabelPreset: jest.fn() }
+        const store = {
+          getState: () => {
+            return { config: {} }
+          },
+        }
 
-        onCreateBabelConfig({ actions }, null)
+        onCreateBabelConfig({ actions, store }, null)
 
         expect(actions.setBabelPreset).toHaveBeenCalledTimes(1)
         expect(actions.setBabelPreset).toHaveBeenCalledWith({

diff --git a/packages/gatsby-plugin-emotion/src/gatsby-node.js b/packages/gatsby-plugin-emotion/src/gatsby-node.js
@@ -1,12 +1,23 @@
-export const onCreateBabelConfig = ({ actions }, pluginOptions) => {
-  actions.setBabelPreset({
-    name: require.resolve(`@emotion/babel-preset-css-prop`),
-    options: {
-      sourceMap: process.env.NODE_ENV !== `production`,
-      autoLabel: `dev-only`,
-      ...(pluginOptions ? pluginOptions : {}),
-    },
-  })
+export const onCreateBabelConfig = ({ actions, store }, pluginOptions) => {
+  if (store.getState().config.jsxRuntime === `automatic`) {
+    actions.setBabelPlugin({
+      name: require.resolve(`@emotion/babel-plugin`),
+      options: {
+        sourceMap: process.env.NODE_ENV !== `production`,
+        autoLabel: `dev-only`,
+        ...(pluginOptions ? pluginOptions : {}),
+      },
+    })
+  } else {
+    actions.setBabelPreset({
+      name: require.resolve(`@emotion/babel-preset-css-prop`),
+      options: {
+        sourceMap: process.env.NODE_ENV !== `production`,
+        autoLabel: `dev-only`,
+        ...(pluginOptions ? pluginOptions : {}),
+      },
+    })
+  }
 }
 
 exports.pluginOptionsSchema = ({ Joi }) =>