Have component names inside classnames when in dev mode about goober

[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.