styled-components/babel-plugin-styled-components

Transform displayName in config

otomad opened this issue · 0 comments

Can we config the displayName form?

For example, if a styled component named StyledTabBar, we could transform it to tab-bar.

The config option could be like:

{
  plugins: [
    ["babel-plugin-styled-components", {
      transform: (displayName) => {
        return displayName
          .replace(/^Styled(?=[A-Z0-9])/, "")
          .replace(/(?<!^)([A-Z])/g, "-$1")
          .toLowerCase();
      }
    }]
  ]
}