-
-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
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
feat: add no-important rule #23
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for getting this started, it looks really good. Just a few things to clean up.
start: node.loc.start, | ||
end: { | ||
line: node.loc.start.line, | ||
column: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd also add a test with just the word "important":
"body { --custom-property: red; }", | |
"body { --custom-property: red; }", | |
"body { --custom-property: important; }", |
], | ||
}, | ||
], | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
380ebfa
to
1d8c32c
Compare
1d8c32c
to
db8d19e
Compare
Thanks for your work on this. There's some ongoing discussion about whether or not we'd like to have this rule on #20, so we may need to think things through a bit before proceeding. |
Sure thing, no problem! Should we keep this PR opened? I'll wait for a decision to either get back to work on this one or replace it by another PR depending on the expected scope. |
Let's keep this one open for now. I'll just mark it as a draft while we try to figure things out. |
Prerequisites checklist
What is the purpose of this pull request?
Add a rule to avoid
!important
annotation 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)