New Rule: no-invalid-charset-placement

[thecalamiity]

Rule details

Disallow invalid placement of @charset rule.

What type of rule is this?

Warns about a potential problem

Example code

a {}
@charset "utf-8";

Prior Art

I couldn't find a Stylelint equivalent, but VS Code's built-in linter reports this.

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

@charset can only be placed at the very beginning of a stylesheet. No other characters, except the Unicode byte-order mark, are allowed before it.

[Tanujkanti4441]

Thanks for the issue.

But I was thinking instead of creating a new rule for this or every at-rule, how about if we expand no-invalid-import-position, we can name it something like no-invalid-at-rule-placement, which will report the invalid placement of at-rules like charset or layer, etc also?

Let's have some feedback here @eslint/eslint-team.

[lumirlumir]

I agree with @Tanujkanti4441. The behavior of both rule are similar, so it would be nicer to expand no-invalid-import-position, since it ain't yet merged.

[nzakas]

@Tanujkanti4441 I think that's a good idea. no-invalid-at-rule-placement makes sense to me. 👍

@thecalamiity what do you think?

[thecalamiity]

Sounds good to me. 👍

[Tanujkanti4441]

It appears that there is an agreement to expand no-invalid-import-position to no-invalid-at-rule-placement in #156, so marking this as accepted.