React Rollup build with styled-components namespace issue

I created an "UI Lib" 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:

Package.json

  "name": "@team/ds-react-ui-lib",
  "version": "0.1.11",
  "description": "React UI library of B2W Design System",
  "repository": "git@gitlab.internal.b2w.io:team/fluxo/websupply/ds-react-ui-lib.git",
  "author": "Lucas Cardoso<lucas.casantos@b2wdigital.com>, Felipe Jardim<felipe.evangelista@b2wdigital.com>",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "devDependencies": {
    "@babel/cli": "^7.14.5",
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^19.0.0",
    "@rollup/plugin-image": "^2.0.6",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "@storybook/addon-essentials": "6.2.3",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addons": "^6.0.12",
    "@storybook/react": "^6.0.12",
    "@storybook/theming": "^6.0.12",
    "@types/react": "^17.0.9",
    "@types/react-icons": "^3.0.0",
    "@types/styled-components": "^5.1.10",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^1.12.0",
    "postcss": "^8.3.0",
    "rollup": "^2.51.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-image-files": "^1.4.2",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-typescript2": "^0.30.0",
    "storybook-addon-styled-component-theme": "^2.0.0",
    "typescript": "^4.2.4"
  },
  "dependencies": {
    "react-icons": "^4.2.0",
    "styled-components": "^5.3.0"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "build": "rollup -c",
    "build-storybook": "build-storybook",
    "serve": "node server.js",
    "storybook": "start-storybook"
  },
  "publishConfig": {
    "team:registry": "http://gitlab.internal.b2w.io/api/v4/projects/7093/packages/npm/",
    "directory": "dist"
  },
  "files": [
    "dist"
  ]
}

Babel.config.js

  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "namespace": "ds"
      }
    ]
  ]
}

Rollup.config.js

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'],
    }),
  ],
};

from Recent Questions - Stack Overflow https://ift.tt/3w0ZQvh
https://ift.tt/eA8V8J