How to see Styled Components' names (class names) in inspector?

[HIPPIEKICK]

Hi!
When learning styled components a few years back I remember always using the import styled from "styled-components/macro" to be able to see the actual components' names when inspecting (for better debugging). Now I can't seem to find any solution to this anymore. I saw a suggestion to downgrade to version 5.3.0 (which doesn't feel like a good solution in the long run). I saw another solution to turn on the displayNames flag to true (using Babel or SWC) but couldn't get it to work anyway.

Does anyone have a stable solution to this? I really love styled components, so it would be great to find a solution to this. Thanks in advance!

I'm using Vite.

[HIPPIEKICK]

Installing babel-plugin-styled-components solved it, so:

npm install --save-dev babel-plugin-styled-components

and then updating vite.config.js:

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["styled-components"],
        babelrc: false,
        configFile: false
      }
    })
  ]
})