Open
Description
Description and reproduction of the issue
It would be quite useful for bigger projects to ban the use of certain css classes. For example the rule should not pass when is-foo
is used in any of the variants:
<my-component
[class.is-foo]="isFoo"
[name]="value">
</my-component>
<my-component
[ngClass]="{ '__flex is-foo': isFoo }"
[name]="value">
</my-component>
<my-component
class="__flex is-foo"
[name]="value">
</my-component>
The rule should cover all the static possibilities. If we agree on the configuration format, I could give it a go at implementing it :)
{
rules: {
'@angular-eslint/template/ban-css-class': [
'error',
{
name: 'is-foo',
newName: 'is-bar', // could be used by fixer
message: 'Please use is-bar instead' // optional
},
// do we need regex option?
],
}
}
Alternatively, maybe a more generic ban-attr
rule would be more useful? It could have a special handling for class
attribute to cover the cases above.
Versions
package | version |
---|---|
@angular-eslint/eslint-plugin-template |
X.Y.Z |
@angular-eslint/template-parser |
X.Y.Z |
@typescript-eslint/parser |
X.Y.Z |
ESLint |
X.Y.Z |
node |
X.Y.Z |
# Please run `npx ng version` in your project and paste the full output here:
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest supported version of the packages and checked my
ng version
output per the instructions given here.