babel-plugin-styled-components icon indicating copy to clipboard operation
babel-plugin-styled-components copied to clipboard

Transform displayName in config

Open otomad opened this issue 2 years ago • 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();
      }
    }]
  ]
}

otomad avatar Oct 22 '23 03:10 otomad