Transform displayName in config

[otomad]

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

[quantizor]

Hi @otomad, thanks for the suggestion. Closing for lack of community interest; the current displayName shape is what the runtime expects for component identification in dev tools, and a transform option would need careful design to avoid breaking that contract.

Apologies, this was a misreply.

[quantizor]

Reopening. A user-supplied displayName transform is a fair enhancement ask. If you want this to land, please +1 the OP so it shows up when triaging by traction.