We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Currently, the plugin generates displayName for each styled components, but it is still difficult to locate the components.
displayName
The plugin uses basename as the displayName.
babel-plugin-styled-components/src/visitors/displayNameAndId.js
Lines 56 to 64 in 950692b
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>
It would be clearer to add the path information to the classname. Just like localIdentName: "[path][name]__[local]" in the css-loader.
localIdentName: "[path][name]__[local]"
css-loader
<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>
The text was updated successfully, but these errors were encountered:
Did you try this ? https://javascript.plainenglish.io/youre-missing-a-trick-with-your-styled-components-in-react-e3dfcd586f75
Sorry, something went wrong.
Still not easy to locate deep components. Class name like [path][name]__[local] generated by localidentname would be more clear.
[path][name]__[local]
No branches or pull requests
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
If the application structure is complex, it is difficult for developers to identify the specific component location.
The generated class names are as follows. It's hard to find where the components are.
Proposal
It would be clearer to add the path information to the classname. Just like
localIdentName: "[path][name]__[local]"
in thecss-loader
.Expected result:
The text was updated successfully, but these errors were encountered: