Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat(lint/css): implement noImportant rule #5126

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(lint/css): implement noImportant rule #5126

wants to merge 1 commit into from

Conversation

Jayllyz
Copy link
Contributor

@Jayllyz Jayllyz commented Feb 15, 2025

Summary

Closes #5039

Test Plan

Added tests.

@github-actions github-actions bot added A-Project Area: project A-Linter Area: linter L-CSS Language: CSS A-Diagnostic Area: diagnostocis labels Feb 15, 2025
@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Feb 15, 2025

CodSpeed Performance Report

Merging #5126 will degrade performances by 45.74%

Comparing Jayllyz:feat/css-no-important (436e02e) with main (08b7987)

Summary

❌ 2 regressions
✅ 92 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

Benchmark BASE HEAD Change
❌ css_analyzer[bootstrap_18416142857265205439.css] 214.5 ms 395.3 ms -45.74%
❌ css_analyzer[bulma_5641719244145477318.css] 612.6 ms 1,052.2 ms -41.77%

ematipico
ematipico reviewed Feb 15, 2025
View reviewed changes
Copy link
Member

@ematipico ematipico left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rule can be simplified by querying the node CssDeclarationImportant. That should fix the degradation we have in performance

@Jayllyz Jayllyz force-pushed the feat/css-no-important branch from 436e02e to 1ea3902 Compare February 15, 2025 08:27
dyc3
dyc3 reviewed Feb 15, 2025
View reviewed changes
crates/biome_css_analyze/src/lint/nursery/no_important.rs
Comment on lines +74 to +68
markup! {
"Unexpected "<Emphasis>"!important"</Emphasis>" declaration."
},
)
.note(markup! {
"Using "<Emphasis>"!important"</Emphasis>" breaks the natural cascading of CSS rules and makes styles harder to maintain."
}),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This message is almost on the mark with our rule pillars. It's missing the "what the user should do" part. Typically, we have the .note(<message>) part do this.

Copy link
Contributor Author

@Jayllyz Jayllyz Feb 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you have any text suggestions?

Copy link
Member

@ematipico ematipico Feb 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The suggestion would be to implement a code action to remove !important, or to provide a message to remove it.

The rule noDebugger provides a code action, maybe this rule should too.

@arendjr
Copy link
Contributor

arendjr commented Feb 16, 2025

Should we call it noImportantStyles? The naming seems quite abstract/unclear if you don’t already know that it’s a CSS-specific rule.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ematipico ematipico ematipico left review comments

@dyc3 dyc3 dyc3 left review comments

Assignees
No one assigned
Labels
A-Diagnostic Area: diagnostocis A-Linter Area: linter A-Project Area: project L-CSS Language: CSS
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

📎 Port declaration-no-important from stylelint
4 participants
@Jayllyz @arendjr @ematipico @dyc3