feat(biome_css_analyzer): implement noInvalidPositionAtImportRule

[t-shiratori]

Summary

close #2709

Implement no-invalid-position-at-import-rule)

Please note that the following is not yet addressed:

• Implementation of options
• Handling extended CSS language cases such as sass and less
• Custom function

Test Plan

added tests and snapshots

[codspeed-hq]

CodSpeed Performance Report

Merging #2717 will not alter performance

_{Comparing t-shiratori:feature/noInvalidPositionAtImportRule (e690c55) with main (5088667)}

Summary

✅ 97 untouched benchmarks

[ematipico]

Can you use <Emphasis></Emphasis> to highlight @import?

[t-shiratori]

fix: 7495e81

[ematipico]

Can you move this at the end? Reminder to check our rule pillars https://biomejs.dev/linter/#rule-pillars

[t-shiratori]

fix: c6f45ab

[ematipico]

Don't clone here. Clone when you actually need it, which is when you call return

[t-shiratori]

fix: 9ca1793

[ematipico]

Not sure if you noticed, but the diagnostic isn't correct because it doesn't highlight the @.

[t-shiratori]

Thanks for the review.
Sorry, I didn't know how to do it 🙇‍♂️
Is there a sample somewhere?

[ematipico]

I think this can be a bit better. Instead of highlighting only the first incorrect at-rule, we should highlight ALL incorrect at-rules. For example:

a {}
@import "foo";
@import "bar";
@import "foo";
@import "bar";

Here we should flag all import all together.

This means we should return a Vec<Self::State>. And State should be a TextRange, we don't need the whole node.

[t-shiratori]

Sorry, I didn't know how to do it 🙇‍♂️
RuleDiagnostic only accepts a single TextRange.
How should I handle vector format state in RuleDiagnostic?

[ematipico]

The infrastructure does that for you, you don't need to do much more.

You just need to return a vector from the run function

[t-shiratori]

Thank you for your advice!
I am trying to fix it locally as below.
We add invalid_import_list and return it at the end.
But I get a TypeError in the state of RuleDiagnostic::new().

crates/biome_css_analyze/src/lint/nursery/no_invalid_position_at_import_rule.rs

impl Rule for NoInvalidPositionAtImportRule {
    type Query = Ast<CssRuleList>;
    type State = Vec<TextRange>;   //  ← update
    type Signals = Option<Self::State>;
    type Options = ();

    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
        let node = ctx.query();
        let mut is_invalid_position = false;
        let mut invalid_import_list = Vec::new();  //  ← update

        for rule in node {
            let any_css_at_rule = match rule {
                AnyCssRule::CssAtRule(item) => item.rule().ok(),
                _ => None,
            };

            if let Some(any_css_at_rule) = any_css_at_rule {
                // Ignore @charset, @layer
                if any_css_at_rule.as_css_charset_at_rule().is_some() {
                    continue;
                }
                if any_css_at_rule.as_css_layer_at_rule().is_some() {
                    continue;
                }

                let import_rule = any_css_at_rule.as_css_import_at_rule();
                if let Some(import_rule) = import_rule {
                    if is_invalid_position {
                        invalid_import_list.push(import_rule.range());  //  ← update
                    }
                } else {
                    is_invalid_position = true;
                }
            } else {
                is_invalid_position = true;
            }
        }

        if invalid_import_list.len() > 0 {
            return Some(invalid_import_list);  //  ← update
        }

        None
    }

    fn diagnostic(_: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
        Some(
            RuleDiagnostic::new(
                rule_category!(),
                state,  //  ← TypeError 
                markup! {
                    "This "<Emphasis>"@import"</Emphasis>" is in the wrong position."
                },
            )
            .note(markup! {
                "Any "<Emphasis>"@import"</Emphasis>" rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the "<Emphasis>"@import"</Emphasis>" rule is invalid."
            }).note(markup! {
                "Consider moving import position."
            })
        )
    }
}

[ematipico]

type Signals must return a Vec<Self::State> instead of Option<Self::State>.

Basically, you must always return a vector.

State must stay a TextRange.

[t-shiratori]

@ematipico

Thank you for your advice!
6f752ed

Please also check this 🙇‍♂️
#2717 (comment)

[ematipico]

If you have struct with one field, the struct is superfluous. Just TextRange as state is enough

[t-shiratori]

fix: f536251

[Mouvedia]

I suppose @charset "utf-8"; @import 'foo.css'; passes as well?

[t-shiratori]

Thank you for your review.
fix: eb6210b

[Mouvedia]

nit

Maybe add a test case for

@charset "utf-8";
/* some comment */
@import 'foo.css';

[t-shiratori]

fix: aa879c1

[Mouvedia]

major

This is invalid.
i.e. @charset string must be double-quoted.
It's not really a at-rule per se.

If you want to be pedantic, Firefox used to support the non-standard @charset utf-8; almost 20 years ago.

[t-shiratori]

fix: 27b6ab5

[Mouvedia]

Suggested change

	@charset 'utf-8';
	@charset "utf-8";

[t-shiratori]

fix: eb6210b

[Mouvedia]

major

This is invalid.

@charset must be written literally, i.e., the 10 characters '@charset "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.

i.e. it must be lowercased

[t-shiratori]

fix: 27b6ab5