Styled Component className minified in vite.js

Question

I'm trying to use Styled Components and have full classNames in development. It can be done with babel-plugin-styled-components and displayName: true, but my setting is not working.

Does anyone have any idea what am I doing wrong?

Thanks 🙏

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { babel } from '@rollup/plugin-babel';

export default defineConfig({
  plugins: [
    reactRefresh(),
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        ['babel-plugin-styled-components', { displayName: true }]
      ],
    }),
  ],
});

versions

"@babel/preset-env": "^7.14.9",
"@babel/preset-react": "^7.14.5",
"@rollup/plugin-babel": "^5.3.0",
"babel-plugin-styled-components": "^1.13.2",
"styled-components": "^5.3.0"
"vite": "^2.4.4",

Answer 1

You can do it as follows;

1. First, install babel-plugin-styled-components

npm i babel-plugin-styled-components

or

yarn add babel-plugin-styled-components

2. Edit vite.config.js

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false
            }
          ]
        ]
      }
    })
  ]
})

You should see the full classname now.

Source: https://github.com/styled-components/babel-plugin-styled-components/issues/350#issuecomment-979873241