babel.config.js

const getPresets = (isDev) => [
  "@babel/preset-env",
  "@babel/preset-react",
  "@babel/preset-typescript",
  [
    /** [@emotion/babel-preset-css-prop]
     * This preset is used to automatically enable Emotion’s css prop when using the classic JSX runtime.
     * This plugin is configurable with all options from the following plugins:
     *  - `babel-plugin-transform-react-jsx`: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#options
     * - `@emotion/babel-plugin`: https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin
     *
     * React 17 introduced new JSX Transformations, which you can read about here: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
     * @NOTE If/when we adopt these new transformations, we should:
     * 1. remove this preset
     * 2. add the `@emotion/babel` plugin to our plugin section.
     */
    "@emotion/babel-preset-css-prop",
    {
      sourceMap: isDev,
      autoLabel: "dev-only",
      labelFormat: "[local]",
      cssPropOptimization: !isDev,
    },
  ],
];

const BASE_PLUGINS = [
  "macros",
  ["@babel/proposal-class-properties", { loose: true }],
  "@babel/proposal-object-rest-spread",
  ["@babel/proposal-private-property-in-object", { loose: true }],
  "@babel/plugin-proposal-optional-chaining",
];

module.exports = {
  env: {
    production: {
      presets: getPresets(false),
      plugins: BASE_PLUGINS,
    },
    development: {
      presets: getPresets(true),
      plugins: BASE_PLUGINS,
    },
    test: {
      presets: getPresets(true),
      plugins: BASE_PLUGINS,
    },
  },
};