feat(linter): add noUnknownAtRule (#4689)

crates/biome_css_analyze/src/lint/nursery.rs

@@ -7,6 +7,7 @@ pub mod no_duplicate_custom_properties;
 pub mod no_duplicate_properties;
 pub mod no_irregular_whitespace;
 pub mod no_missing_var_function;
+pub mod no_unknown_at_rule;
 pub mod no_unknown_pseudo_class;
 pub mod no_unknown_pseudo_element;
 pub mod no_unknown_type_selector;
@@ -21,6 +22,7 @@ declare_lint_group! {
             self :: no_duplicate_properties :: NoDuplicateProperties ,
             self :: no_irregular_whitespace :: NoIrregularWhitespace ,
             self :: no_missing_var_function :: NoMissingVarFunction ,
+            self :: no_unknown_at_rule :: NoUnknownAtRule ,
             self :: no_unknown_pseudo_class :: NoUnknownPseudoClass ,
             self :: no_unknown_pseudo_element :: NoUnknownPseudoElement ,
             self :: no_unknown_type_selector :: NoUnknownTypeSelector ,

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

@@ -0,0 +1,97 @@
+use biome_analyze::{
+    context::RuleContext, declare_lint_rule, Ast, Rule, RuleDiagnostic, RuleSource,
+};
+use biome_console::markup;
+use biome_css_syntax::{CssUnknownBlockAtRule, CssUnknownValueAtRule};
+use biome_rowan::{declare_node_union, AstNode, TextRange};
+
+declare_lint_rule! {
+    /// Disallow unknown at-rules.
+    ///
+    /// For details on known at-rules, see the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule).
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// @uNkNoWn {}
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// @unknown-at-rule {
+    ///   font-size: 14px;
+    /// }
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// @charset 'UTF-8';
+    /// ```
+    ///
+    /// ```css
+    /// @media (max-width: 960px) {
+    ///   body {
+    ///     font-size: 13px;
+    ///   }
+    /// }
+    /// ```
+    pub NoUnknownAtRule {
+        version: "next",
+        name: "noUnknownAtRule",
+        language: "css",
+        recommended: true,
+        sources: &[RuleSource::Stylelint("at-rule-no-unknown")],
+    }
+}
+
+declare_node_union! {
+  pub AnyUnknownAtRule = CssUnknownBlockAtRule | CssUnknownValueAtRule
+}
+
+pub struct NoUnknownAtRuleState {
+    range: TextRange,
+    name: String,
+}
+
+impl Rule for NoUnknownAtRule {
+    type Query = Ast<AnyUnknownAtRule>;
+    type State = NoUnknownAtRuleState;
+    type Signals = Option<Self::State>;
+    type Options = ();
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let node = ctx.query();
+        let rule = match node {
+            AnyUnknownAtRule::CssUnknownBlockAtRule(rule) => rule.name().ok()?,
+            AnyUnknownAtRule::CssUnknownValueAtRule(rule) => rule.name().ok()?,
+        };
+        Some(NoUnknownAtRuleState {
+            range: rule.range(),
+            name: rule.text().to_string(),
+        })
+    }
+
+    fn diagnostic(_: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        let span = state.range;
+        let name = &state.name;
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                span,
+                markup! {
+                    "Unexpected unknown at-rule: "<Emphasis>{ name }</Emphasis>" "
+                },
+            )
+            .note(markup! {
+                    ""<Emphasis>{ name }</Emphasis>" is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended."
+            })
+            .note(markup! {
+                "See "<Hyperlink href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">"MDN web docs"</Hyperlink>" for a known list of at-rules."
+            }).note(markup! {
+            "To fix this issue, consider removing the unknown at-rule."
+        })
+        )
+    }
+}

crates/biome_css_analyze/tests/specs/nursery/noUnknownAtRule/invalid.css

@@ -0,0 +1,7 @@
+@unknown-rule 'UTF-8';
+@uNkNoWn {}
+@UNKNOWN {}
+@unknown-at-rule {}
+@unknown { @unknown-at-rule { font-size: 14px; } }
+@MY-other-at-rule {}
+@not-my-at-rule {}

crates/biome_css_analyze/tests/specs/nursery/noUnknownAtRule/invalid.css.snap

@@ -0,0 +1,177 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+expression: invalid.css
+---
+# Input
+```css
+@unknown-rule 'UTF-8';
+@uNkNoWn {}
+@UNKNOWN {}
+@unknown-at-rule {}
+@unknown { @unknown-at-rule { font-size: 14px; } }
+@MY-other-at-rule {}
+@not-my-at-rule {}
+```
+
+# Diagnostics
+```
+invalid.css:1:2 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: unknown-rule 
+  
+  > 1 │ @unknown-rule 'UTF-8';
+      │  ^^^^^^^^^^^^
+    2 │ @uNkNoWn {}
+    3 │ @UNKNOWN {}
+  
+  i unknown-rule is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```
+
+```
+invalid.css:2:2 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: uNkNoWn 
+  
+    1 │ @unknown-rule 'UTF-8';
+  > 2 │ @uNkNoWn {}
+      │  ^^^^^^^
+    3 │ @UNKNOWN {}
+    4 │ @unknown-at-rule {}
+  
+  i uNkNoWn is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```
+
+```
+invalid.css:3:2 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: UNKNOWN 
+  
+    1 │ @unknown-rule 'UTF-8';
+    2 │ @uNkNoWn {}
+  > 3 │ @UNKNOWN {}
+      │  ^^^^^^^
+    4 │ @unknown-at-rule {}
+    5 │ @unknown { @unknown-at-rule { font-size: 14px; } }
+  
+  i UNKNOWN is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```
+
+```
+invalid.css:4:2 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: unknown-at-rule 
+  
+    2 │ @uNkNoWn {}
+    3 │ @UNKNOWN {}
+  > 4 │ @unknown-at-rule {}
+      │  ^^^^^^^^^^^^^^^
+    5 │ @unknown { @unknown-at-rule { font-size: 14px; } }
+    6 │ @MY-other-at-rule {}
+  
+  i unknown-at-rule is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```
+
+```
+invalid.css:5:2 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: unknown 
+  
+    3 │ @UNKNOWN {}
+    4 │ @unknown-at-rule {}
+  > 5 │ @unknown { @unknown-at-rule { font-size: 14px; } }
+      │  ^^^^^^^
+    6 │ @MY-other-at-rule {}
+    7 │ @not-my-at-rule {}
+  
+  i unknown is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```
+
+```
+invalid.css:5:13 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: unknown-at-rule 
+  
+    3 │ @UNKNOWN {}
+    4 │ @unknown-at-rule {}
+  > 5 │ @unknown { @unknown-at-rule { font-size: 14px; } }
+      │             ^^^^^^^^^^^^^^^
+    6 │ @MY-other-at-rule {}
+    7 │ @not-my-at-rule {}
+  
+  i unknown-at-rule is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```
+
+```
+invalid.css:6:2 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: MY-other-at-rule 
+  
+    4 │ @unknown-at-rule {}
+    5 │ @unknown { @unknown-at-rule { font-size: 14px; } }
+  > 6 │ @MY-other-at-rule {}
+      │  ^^^^^^^^^^^^^^^^
+    7 │ @not-my-at-rule {}
+  
+  i MY-other-at-rule is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```
+
+```
+invalid.css:7:2 lint/nursery/noUnknownAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unexpected unknown at-rule: not-my-at-rule 
+  
+    5 │ @unknown { @unknown-at-rule { font-size: 14px; } }
+    6 │ @MY-other-at-rule {}
+  > 7 │ @not-my-at-rule {}
+      │  ^^^^^^^^^^^^^^
+  
+  i not-my-at-rule is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
+  
+  i See MDN web docs for a known list of at-rules.
+  
+  i To fix this issue, consider removing the unknown at-rule.
+  
+
+```