Support for Emotion.sh

[Joshuabaker2]

Describe the problem

I have another Vite project that isn't a Chrome extension, and I use Emotion in that project to provide css-in-js functionality.

My vite.config.ts for that project (which also uses the automatic jsx runtime) looks pretty similar, and only requires a slight change to support emotion:

// vite.config.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: [["@emotion/babel-plugin"],
      },
    }),
  ],
});

So, I tried adding the jsxImportSource and the babel plugin into my vite.config.ts for my crxjs project. However, this doesn't work. What should happen is that the system uses emotion's custom jsx that supports the css prop, but no dice.

I can do the more "manual" solution, which is to include the following lines at the top of every tsx file in my project:

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from "@emotion/react";

But that looks pretty ugly, and is sort of a hassle and easy to forget.

I'm assuming there's some conflict happening with the @crxjs/vite-plugin module.

Describe the proposed solution

Ideally, if we could somehow use Emotion with this, that would be great. I'm not 100% sure how that could be accomplished, but I'm happy to help contribute if anyone has any pointers.

Alternatives considered

I suppose not using Emotion would be one alternative, or using the aforementioned pragmas at the top of the file.

Importance

would make my life easier

[jacksteamdev]

@Joshuabaker2 Did you find this problem in content scripts or extension pages? If it was content scripts, the beta release @crxjs/vite-plugin@2.0.0-beta.1 may fix this.

[Joshuabaker2]

It was in content scripts, and thanks for the heads up! I will give that a try and report back!

[Joshuabaker2]

Tried testing out the beta @jacksteamdev, however I am getting crashes when trying to run it - made a new issue here for that https://github.com/crxjs/chrome-extension-tools/issues/552. Happy to debug.

[Joshuabaker2]

Hey @jacksteamdev, thanks for fixing the crash in the beta! Tried out beta.4 and this issue is also resolved, so going to close this one out. Thanks again!