HMR doesn't work with imported @emotion styled-components

[Evan-Peuvergne]

I'm using the crxjs plugin with vite, react & emotion to build my chrome extension.

I like defining my styles with the styled components methods (@motion/styled) and put them in a different file from the component definition itself (styled.ts for example).

app.tsx

import * as Styles from "./styles";

export const App = () => <Styles.Test>This is my app</Styles.Test>;

styles.ts

import styled from "@emotion/styled";

export const Test = styled.span`
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;
  font-size: 100px;
  color: #fff;
  background: purple;
`;

But when I make changes to this file (styled.ts), I can see in the terminal that HMR did notice the update and triggers but there is not reload in the browser as expected.
If necessary, you can reproduce with this repo

Is there something I'm missing in the vite configuration ? Or is it a bug ?

Here is my config :

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

Any help will he appreciated, thanks 🙂

[Evan-Peuvergne]

Alternatively, is there a way to make css-modules work with the crxjs plugin ? I experience similar issues with them until now.