Discussion on: Configure Emotion with your Vite React Project

const OnOffWrapper = styled.div`
  display: inline-block;

  ${props =>
    props.isChecked
      ? `
    ${OnOffTrack} {
      background-color: ${props.color};
      border: 1px solid ${props.color};
    }
    ${OnOffHandle} {
      transform: none;
      background-color: ${props.color};
    }
  `
      : `
    ${OnOffTrack} {
      background-color: transparent;
      border: 1px solid ${colors.silver};
    }
    ${OnOffHandle} {
      transform: translateX(-100%);
      background-color: ${colors.silver};
    }
  `}
`;

import react from '@vitejs/plugin-react';
// import ViteReact from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';
import Environment from 'vite-plugin-environment';
// import eslintPlugin from 'vite-plugin-eslint';
import FullReload from 'vite-plugin-full-reload';
import RubyPlugin from 'vite-plugin-ruby';

export default defineConfig({
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: `import { jsx } from '@emotion/react'`,
  },
  plugins: [
    // eslintPlugin(),
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
    Environment({
      CLOUDINARY_API_KEY: null,
      CLOUDINARY_CLOUD_NAME: null,
      GOOGLE_MAP_API_KEY: null,
      INTERCOM_APP_ID: null,
      MAPBOX_API_KEY: null,
      STRIPE_PUBLISHABLE_KEY: null,
    }),
    RubyPlugin(),
    FullReload(['config/routes.rb', 'app/views/**/*'], { delay: 200 }),
    // ViteReact(),
  ],
  resolve: {
    alias: [
      {
        find: /^react-mapbox-gl/,
        replacement: 'react-mapbox-gl/lib',
      },
    ],
  },
});