Is there any way to customize the displayName?

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.

babel-plugin-styled-components/src/visitors/displayNameAndId.js

Lines 56 to 64 in 950692b

    
           const getBlockName = file => { 
        
             const name = path.basename( 
        
               file.opts.filename, 
        
               path.extname(file.opts.filename) 
        
             ) 
        
             return name !== 'index' 
        
               ? name 
        
               : path.basename(path.dirname(file.opts.filename)) 
        
           }

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>

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

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.

	const getBlockName = file => {
	const name = path.basename(
	file.opts.filename,
	path.extname(file.opts.filename)
	)
	return name !== 'index'
	? name
	: path.basename(path.dirname(file.opts.filename))
	}