remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
29.55k stars 2.49k forks source link

How to support custom babel config for emotion show classname for run dev command #9697

Open Caesar-APAX opened 3 months ago

Caesar-APAX commented 3 months ago

Aslo it need support @styled-coponents to show classname for run dev

Reproduction

https://github.com/Ranger-Theme/ranger-storefront-mui-remix

System Info

Mac os

Used Package Manager

pnpm

Expected Behavior

When i run dev command, the emotion shuld show the class name for StyledXXX

Screen Shot 2024-07-03 at 11 08 41 AM

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

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

Actual Behavior

Screen Shot 2024-07-03 at 11 12 33 AM

Not show the real className, just show axjs-xx className

https://dev.to/glocore/configure-emotion-with-your-vite-react-project-7jl

Caesar-APAX commented 3 months ago

@brophdawg11 Dou you support remix custom babel plugins?

Caesar-APAX commented 2 months ago

@n8agrin @freeman @dmarkow @brophdawg11 Any update? thanks

Zigonja commented 2 months ago

Also wondering