Discussion on: Configure Emotion with your Vite React Project

[Viktor]

I'm trying to use component selectors in my emotion styles. Did you have any luck doing so?

For example, I have this OnOffSwitch component which has some child elements:

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};
    }
  `}
`;

These styles (anything below display: inline-block;) are being ignored now.

I've found this, but there's no mention of how to achieve this with Vite: github.com/emotion-js/emotion/issu...
Also this, which throws an error immediately ("Uncaught SyntaxError: missing ) after argument list"):
stackoverflow.com/questions/614352...

Here's my full vite.config.js (I use Vite in a Rails app):

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',
      },
    ],
  },
});

[rossthedevigner]

@vfonic I just spent the last few hours trying to debug this exact scenario! Did you ever find a solution?