styled-components: Warn if the className prop doesn't get used by 3rd party components
@vdanchenkov had an awesome idea at https://github.com/styled-components/styled-components/pull/268#issuecomment-269292621
I have another idea of runtime warning that could be useful in development.
A lot of people misses the fact that 3-rd party components should accept and use className property. We could check that generated class name actually been used.
if (!document.querySelector('.' + className)) warn()Main concern is that there might be cases when you actually do not want to render the element with passed className. I have no examples of it, but if there are some we need to have a method to mute this warning.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 6
- Comments: 21 (15 by maintainers)
Yup, sure! Might take me a week or so before I get a chance to work on it though 🎏
There’s always the issue of people finding the ESLint rule after finding they’ve missed a
classNamepropagation. At which time the rule will offer less value.Another approach which could catch some cases and have fewer false positives is warning when
styled()is called on aComponentwhere:Closed via https://github.com/styled-components/styled-components/commit/fb083e2b7e86153b01e64ca024ab2e66d041aecb (https://github.com/styled-components/styled-components/pull/2073)