title: Styled Component className minified in vite.js
body: <p>I'm trying to use Styled Components and have full classNames in development. It can be done with <code>babel-plugin-styled-components</code> and <code>displayName: true</code>, but my setting is not working.</p>
  <p>Does anyone have any idea what am I doing wrong?</p>
  <p>Thanks </p>
  <pre class="lang-js prettyprint-override"><code>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 }]
        ],
      }),
    ],
  });
  </code></pre>
  <p>versions</p>
  <pre><code>&quot;@babel/preset-env&quot;: &quot;^7.14.9&quot;,
  &quot;@babel/preset-react&quot;: &quot;^7.14.5&quot;,
  &quot;@rollup/plugin-babel&quot;: &quot;^5.3.0&quot;,
  &quot;babel-plugin-styled-components&quot;: &quot;^1.13.2&quot;,
  &quot;styled-components&quot;: &quot;^5.3.0&quot;
  &quot;vite&quot;: &quot;^2.4.4&quot;,
  </code></pre>