I want to enforce the value of the className property on my DOM elements and components to be camelCase.
Example DOM element:
//bad DOM element ❌
<div className={'signinscreen_loading'}></div>
//bad DOM element ❌
<div className={'sign-in-screen-loading'}></div>
//good DOM element ✅
<div className={'signInScreenLoading'}></div>
Example component:
//bad component ❌
<Dropdown className={'signinscreen_loading'} />
//bad component ❌
<Dropdown className={'sign-in-screen-loading'} />
//good component ✅
<Dropdown className={'signInScreenLoading'} />
I have tried to resolve this with "@typescript-eslint/naming-convention" but cannot find a selector for the property value. It is quite easy to configure that properties should follow a convention, but not their values (attribute values)
I also cannot find a fitting rule from ESLint or eslint-plugin-react.
