babel-plugin-styled-components
babel-plugin-styled-components copied to clipboard
Transform displayName in config
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();
}
}]
]
}