Skip to content

feat: add no-invalid-at-rule-placement rule#171

Merged
snitin315 merged 3 commits into
eslint:mainfrom
thecalamiity:no-invalid-at-rule-placement
Jul 7, 2025
Merged

feat: add no-invalid-at-rule-placement rule#171
snitin315 merged 3 commits into
eslint:mainfrom
thecalamiity:no-invalid-at-rule-placement

Conversation

@thecalamiity

Copy link
Copy Markdown
Contributor

Prerequisites checklist

What is the purpose of this pull request?

This pull request introduces a new rule no-invalid-at-rule-placement that enforces correct placement of at-rules within stylesheets.

What changes did you make? (Give an overview)

Implemented the no-invalid-at-rule-placement rule, along with documentation and tests.

Related Issues

Fixes #163
Fixes #151

Is there anything you'd like reviewers to focus on?

@github-project-automation github-project-automation Bot moved this to Needs Triage in Triage Jun 11, 2025
@lumirlumir lumirlumir added the accepted There is consensus among the team that this change meets the criteria for inclusion label Jun 12, 2025

@jeddy3 jeddy3 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice and useful rule that plugs a gap, as CSSTree only detected misplaced declarations, e.g.:

--foo: bar; /* CSSTree parse error */
a { }

Comment thread docs/rules/no-invalid-at-rule-placement.md
@nzakas nzakas moved this from Needs Triage to Implementing in Triage Jun 12, 2025
nzakas
nzakas previously approved these changes Jun 17, 2025

@nzakas nzakas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM. Would like another review before merging.

@nzakas nzakas moved this from Implementing to Second Review Needed in Triage Jun 17, 2025
Comment thread docs/rules/no-invalid-at-rule-placement.md Outdated
Comment thread src/rules/no-invalid-at-rule-placement.js
Comment thread tests/rules/no-invalid-at-rule-placement.test.js

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM! I don't think any of my comments are blocking - they can all be either done as followups or wontfixed IMO.

I would like to see the responses to snitin315's comments before merge though.

Comment thread docs/rules/no-invalid-at-rule-placement.md
Comment thread src/rules/no-invalid-at-rule-placement.js Outdated
At-rules are CSS statements that instruct CSS how to behave. Some at-rules have strict placement requirements that must be followed for the stylesheet to work correctly. For example:

- The `@charset` rule must be placed at the very beginning of a stylesheet, before any other rules, comments, or whitespace.
- The `@import` rule must be placed at the beginning of a stylesheet, before any other at-rules (except `@charset` and `@layer` statements) and style rules.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace#description - @namespace also needs to be validated. Should we include that in this initial version of the rule as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think yes, we should add support for @namespace too, since this is a general rule, and the effort should not be high.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@thecalamiity Can we include @namespace?

@thecalamiity thecalamiity Jun 26, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Agreed—supporting @namespace makes sense, but since this PR is ready, let’s address it in a separate change. Its logic would need to enforce placement after @import but before other rules, which introduces non-trivial complexity.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@thecalamiity I’d be happy to draft a PR for the @namespace validation

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Sounds good.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since we're already aware of the @namespace case and this rule is intended to cover all at-rules, I believe it makes sense to implement it in the same PR.

That said, I'd love to hear the team's input. @eslint/eslint-team do you think we should include it in this PR or address it in a follow-up?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Since this PR is ready and there's already a draft PR to add @namespace, I'd say we move forward with this PR as-is.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Cool, let's merge this then.

@TKDev7 Thanks for the draft. For future contributions, please create an issue or wait for team alignment before starting work on significant changes. This ensures everyone is on the same page and the effort aligns with the team's direction.

@thecalamiity thecalamiity dismissed stale reviews from JoshuaKGoldberg and nzakas via a0a73a0 June 26, 2025 13:34
@snitin315

Copy link
Copy Markdown
Contributor

@thecalamiity There are few merge conflicts, can you please resolve?

@nzakas

nzakas commented Jun 30, 2025

Copy link
Copy Markdown
Member

@snitin315 this is ready for merge once you've verified everything.

@snitin315 snitin315 merged commit bb90e3a into eslint:main Jul 7, 2025
22 checks passed
@github-project-automation github-project-automation Bot moved this from Second Review Needed to Complete in Triage Jul 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accepted There is consensus among the team that this change meets the criteria for inclusion contributor pool feature

Projects

Status: Complete

Development

Successfully merging this pull request may close these issues.

New Rule: no-invalid-charset-placement New Rule: no-invalid-import-position

8 participants