feat: add no-important rule #23
Conversation
| type: /** @type {const} */ ("problem"), | ||
|
|
||
| docs: { | ||
| description: "Disallow important annotations", |
There was a problem hiding this comment.
| description: "Disallow important annotations", | |
| description: "Disallow !important annotations", |
| }, | ||
|
|
||
| messages: { | ||
| forbiddenImportantUsage: "!important annotations are not allowed.", |
There was a problem hiding this comment.
Can we shorten this to unexpectedImportant?
And we generally like to be a bit gentler with the messages:
| forbiddenImportantUsage: "!important annotations are not allowed.", | |
| unexpectedImportant: "Unexpected !important annotation found.", |
| start: node.loc.start, | ||
| end: { | ||
| line: node.loc.start.line, | ||
| column: |
There was a problem hiding this comment.
This will just highlight the property name. I think it would be better to find the location of the !important and set that as the location of the error.
| "a { color: red; }", | ||
| "a { color: red; background-color: blue; }", | ||
| "a { color: red; transition: none; }", | ||
| "body { --custom-property: red; }", |
There was a problem hiding this comment.
I'd also add a test with just the word "important":
| "body { --custom-property: red; }", | |
| "body { --custom-property: red; }", | |
| "body { --custom-property: important; }", |
| data: { | ||
| property: "color", | ||
| value: "red !important", | ||
| expected: "red", | ||
| }, |
There was a problem hiding this comment.
data doesn't apply because you're not passing any data to context.report() in the rule. Please remove all data entries from this file.
| ], | ||
| }, | ||
| ], | ||
| }); |
There was a problem hiding this comment.
Can you also add a test that has multiple properties with !important to ensure we're catching them all?
|
|
||
| ## Background | ||
|
|
||
| Needing !important indicates there may be a larger underlying issue. |
There was a problem hiding this comment.
We need more of a description here. 😄 Please see other rule docs for examples.
| a .link { | ||
| font-size: padding: 10px 20px 30px 40px !important; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Please also add "Prior Art" section as in other rules.
https://stylelint.io/user-guide/rules/declaration-no-important/
https://github.com/CSSLint/csslint/wiki/Disallow-%21important
Prerequisites checklist
What is the purpose of this pull request?
Add a rule to avoid
!importantannotation usage.What changes did you make? (Give an overview)
Related Issues
See #20
Is there anything you'd like reviewers to focus on?
Implementation was not complicated but I'm not sure on how much details the docs should include.
(It's my first PR on ESlint, lmk if anything is wrong or if the rule is useless)