title: React Rollup build with styled-components namespace issue
body: <p>I created an &quot;UI Lib&quot; to use in other projects with ReactJS + TS + styled-components and Rollup and I'm facing some problems with conflicted classNames. I know that styled-components provides a plugin to create namespace to classNames hashes, but its not working as they should. If I run Storybook in my project, the namespace works, but when I build this UI and use in other projects, don't. Its the first time I use Rollup, so I don't know if I'm missing something here. My files:</p>
  <p>Package.json</p>
  <pre><code>  &quot;name&quot;: &quot;@team/ds-react-ui-lib&quot;,
    &quot;version&quot;: &quot;0.1.11&quot;,
    &quot;description&quot;: &quot;React UI library of B2W Design System&quot;,
    &quot;repository&quot;: &quot;git@gitlab.internal.b2w.io:team/fluxo/websupply/ds-react-ui-lib.git&quot;,
    &quot;author&quot;: &quot;Lucas Cardoso&lt;lucas.casantos@b2wdigital.com&gt;, Felipe Jardim&lt;felipe.evangelista@b2wdigital.com&gt;&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;main&quot;: &quot;dist/index.js&quot;,
    &quot;module&quot;: &quot;dist/index.esm.js&quot;,
    &quot;types&quot;: &quot;dist/index.d.ts&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.14.5&quot;,
      &quot;@babel/core&quot;: &quot;^7.14.6&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.14.7&quot;,
      &quot;@rollup/plugin-babel&quot;: &quot;^5.3.0&quot;,
      &quot;@rollup/plugin-commonjs&quot;: &quot;^19.0.0&quot;,
      &quot;@rollup/plugin-image&quot;: &quot;^2.0.6&quot;,
      &quot;@rollup/plugin-node-resolve&quot;: &quot;^13.0.0&quot;,
      &quot;@storybook/addon-essentials&quot;: &quot;6.2.3&quot;,
      &quot;@storybook/addon-info&quot;: &quot;^5.3.19&quot;,
      &quot;@storybook/addons&quot;: &quot;^6.0.12&quot;,
      &quot;@storybook/react&quot;: &quot;^6.0.12&quot;,
      &quot;@storybook/theming&quot;: &quot;^6.0.12&quot;,
      &quot;@types/react&quot;: &quot;^17.0.9&quot;,
      &quot;@types/react-icons&quot;: &quot;^3.0.0&quot;,
      &quot;@types/styled-components&quot;: &quot;^5.1.10&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;babel-plugin-styled-components&quot;: &quot;^1.12.0&quot;,
      &quot;postcss&quot;: &quot;^8.3.0&quot;,
      &quot;rollup&quot;: &quot;^2.51.1&quot;,
      &quot;rollup-plugin-babel&quot;: &quot;^4.4.0&quot;,
      &quot;rollup-plugin-image-files&quot;: &quot;^1.4.2&quot;,
      &quot;rollup-plugin-peer-deps-external&quot;: &quot;^2.2.4&quot;,
      &quot;rollup-plugin-postcss&quot;: &quot;^4.0.0&quot;,
      &quot;rollup-plugin-typescript2&quot;: &quot;^0.30.0&quot;,
      &quot;storybook-addon-styled-component-theme&quot;: &quot;^2.0.0&quot;,
      &quot;typescript&quot;: &quot;^4.2.4&quot;
    },
    &quot;dependencies&quot;: {
      &quot;react-icons&quot;: &quot;^4.2.0&quot;,
      &quot;styled-components&quot;: &quot;^5.3.0&quot;
    },
    &quot;peerDependencies&quot;: {
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;
    },
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;rollup -c&quot;,
      &quot;build-storybook&quot;: &quot;build-storybook&quot;,
      &quot;serve&quot;: &quot;node server.js&quot;,
      &quot;storybook&quot;: &quot;start-storybook&quot;
    },
    &quot;publishConfig&quot;: {
      &quot;team:registry&quot;: &quot;http://gitlab.internal.b2w.io/api/v4/projects/7093/packages/npm/&quot;,
      &quot;directory&quot;: &quot;dist&quot;
    },
    &quot;files&quot;: [
      &quot;dist&quot;
    ]
  }
  </code></pre>
  <p>Babel.config.js</p>
  <pre><code>  &quot;plugins&quot;: [
      [
        &quot;babel-plugin-styled-components&quot;,
        {
          &quot;namespace&quot;: &quot;ds&quot;
        }
      ]
    ]
  }
  </code></pre>
  <p>Rollup.config.js</p>
  <pre><code>import peerDepsExternal from 'rollup-plugin-peer-deps-external';
  import image from '@rollup/plugin-image';
  import babel from '@rollup/plugin-babel';
  import resolve from '@rollup/plugin-node-resolve';
  import commonjs from '@rollup/plugin-commonjs';
  import typescript from 'rollup-plugin-typescript2';
  import postcss from 'rollup-plugin-postcss';
  const packageJson = require('./package.json');
  
  export default {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      image(),
      typescript({ useTsconfigDeclarationDir: true }),
      postcss({
        extensions: ['.css'],
      }),
      babel({
        exclude: 'node_modules/**',
        plugins: ['babel-plugin-styled-components'],
      }),
    ],
  };
  </code></pre>