Is there any way to customize the displayName?

[leoendless]

Currently, the plugin generates displayName for each styled components, but it is still difficult to locate the components.

The plugin uses basename as the displayName. https://github.com/styled-components/babel-plugin-styled-components/blob/950692b92855f17609e4281d5081e3d2acbf4b6b/src/visitors/displayNameAndId.js#L56-L64

If the application structure is complex, it is difficult for developers to identify the specific component location.

./src
├── App.jsx
├── components
│   └── Button.jsx
├── containers
│   └── Deployment
│       ├── Detail
│       │   └── Pods
│       │       └── index.jsx
│       └── List
│           └── Pods
│               └── index.jsx
└── index.js

The generated class names are as follows. It's hard to find where the components are.

<div class="App__Wrapper-sc-9d0fbo-0 hsPRIg">
  <button class="Button-sc-1di3gv3-0 ctbGRz">Demo</button>
  <div class="Pods__Wrapper-pvtrrb-0 BbPba">Pods</div>
  <div class="Pods__Wrapper-sc-1lhbc8l-0 iZjakt">Podsxx</div>
</div>

Proposal

It would be clearer to add the path information to the classname. Just like localIdentName: "[path][name]__[local]" in the css-loader.

Expected result:

<div class="src-App__Wrapper-sc-9d0fbo-0 jYLwfT">
  <button class="src-components-Button__Button-sc-1di3gv3-0 eoYfAf">Demo</button>
  <div class="src-containers-Deployment-Detail-Pods-index__Wrapper-pvtrrb-0 hLUIgr">Pods</div>
  <div class="src-containers-Deployment-List-Pods-index__Wrapper-sc-1lhbc8l-0 ctyXxP">Podsxx</div>
</div>

[vinzcelavi]

Did you try this ? https://javascript.plainenglish.io/youre-missing-a-trick-with-your-styled-components-in-react-e3dfcd586f75

[leoendless]

Did you try this ? https://javascript.plainenglish.io/youre-missing-a-trick-with-your-styled-components-in-react-e3dfcd586f75

Still not easy to locate deep components. Class name like [path][name]__[local] generated by localidentname would be more clear.