Have component names inside classnames when in dev mode

[nikitavoloboev]

Would be super helpful. Currently the classnames are like this go3532050352.

This is fine for production but for dev mode I'd love for it to be something like Wrapper3532050352 assuming the styled element is named Wrapper.

[cristianbote]

Hey @nikitavoloboev, there's a way to pass in a custom className to a certain styled component. Take this example:

const Button = styled("button")`
  background: tomato;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem;
`;

// Pass along a custom `className` to be added to each `<Button />` element
Button.className = "Button";

The above will render to html something like this:

<button class="go2965422667 Button">Tomato</button>

Hopefully this will help you.

[nikitavoloboev]

This won't help as I don't want to add this manually for every styled component.

Basically I want to see in DOM quickly which DOM element corresponds to which React component name. Only when in dev of course.

Can this be done perhaps as post processing step via something like https://vitejs.dev

And the command you sent above. Like statically analyzing all code, finding all styled components, before doing dev build, creating a file with things like <button class="go2965422667 Button">Tomato</button>.

Basically I want this to happen under the hood when I start dev server. In production it does what it does now.

Willing to contribute code for this as it will help me a lot.