feat: implement no_unknown_type_selector

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

@@ -0,0 +1,95 @@
+use biome_analyze::{context::RuleContext, declare_rule, Ast, Rule, RuleDiagnostic};
+use biome_console::markup;
+use biome_css_syntax::CssTypeSelector;
+use biome_rowan::AstNode;
+
+use crate::utils::is_known_type_selector;
+
+declare_rule! {
+    /// Disallow unknown type selectors.
+    ///
+    /// This rule considers tags defined in the HTML, SVG, and MathML specifications to be known.
+    /// For details on known CSS type selectors, see the following links
+    /// - https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
+    /// - https://developer.mozilla.org/ja/docs/Web/HTML/Element
+    /// - https://developer.mozilla.org/ja/docs/Web/SVG/Element
+    /// - https://developer.mozilla.org/ja/docs/Web/MathML/Element
+    ///
+    /// This rule allows custom elements.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// unknown {}
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// unknown > ul {}
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// x-Foo {}
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// input {}
+    /// ```
+    ///
+    /// ```css
+    /// ul > li {}
+    /// ```
+    ///
+    /// ```css
+    /// x-foo {}
+    /// ```
+    ///
+    pub NoUnknownTypeSelector {
+        version: "next",
+        name: "noUnknownTypeSelector",
+        language: "css",
+        recommended: false,
+    }
+}
+
+impl Rule for NoUnknownTypeSelector {
+    type Query = Ast<CssTypeSelector>;
+    type State = CssTypeSelector;
+    type Signals = Option<Self::State>;
+    type Options = ();
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let css_type_selector = ctx.query();
+        let type_selector = css_type_selector
+            .ident()
+            .ok()?
+            .value_token()
+            .ok()?
+            .token_text_trimmed();
+        if !is_known_type_selector(&type_selector) {
+            return Some(css_type_selector.clone());
+        }
+        None
+    }
+
+    fn diagnostic(_: &RuleContext<Self>, node: &Self::State) -> Option<RuleDiagnostic> {
+        let span = node.range();
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                span,
+                markup! {
+                    "Unknown type selector is not allowed."
+                },
+            )
+            .note(markup! {
+                "See "<Hyperlink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors">"MDN web docs"</Hyperlink>" for more details."
+            }).note(markup! {
+                "To resolve this issue, replace the unknown type selector with valid one."
+            })
+        )
+    }
+}

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

@@ -0,0 +1,25 @@
+unknown {
+}
+
+ul unknown {
+}
+
+unknown ul {
+}
+
+li > hoge {
+}
+
+fuga > li {
+}
+
+table,
+unknown {
+}
+
+unknown,
+article {
+}
+
+x-Foo {
+}

crates/biome_css_analyze/tests/specs/nursery/noUnknownTypeSelector/invalid.css.snap.new

@@ -0,0 +1,184 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+assertion_line: 83
+expression: invalid.css
+---
+# Input
+```css
+unknown {
+}
+
+ul unknown {
+}
+
+unknown ul {
+}
+
+li > hoge {
+}
+
+fuga > li {
+}
+
+table,
+unknown {
+}
+
+unknown,
+article {
+}
+
+x-Foo {
+}
+
+```
+
+# Diagnostics
+```
+invalid.css:1:1 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+  > 1 │ unknown {
+      │ ^^^^^^^
+    2 │ }
+    3 │ 
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```
+
+```
+invalid.css:4:4 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+    2 │ }
+    3 │ 
+  > 4 │ ul unknown {
+      │    ^^^^^^^
+    5 │ }
+    6 │ 
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```
+
+```
+invalid.css:7:1 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+    5 │ }
+    6 │ 
+  > 7 │ unknown ul {
+      │ ^^^^^^^
+    8 │ }
+    9 │ 
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```
+
+```
+invalid.css:10:6 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+     8 │ }
+     9 │ 
+  > 10 │ li > hoge {
+       │      ^^^^
+    11 │ }
+    12 │ 
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```
+
+```
+invalid.css:13:1 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+    11 │ }
+    12 │ 
+  > 13 │ fuga > li {
+       │ ^^^^
+    14 │ }
+    15 │ 
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```
+
+```
+invalid.css:17:1 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+    16 │ table,
+  > 17 │ unknown {
+       │ ^^^^^^^
+    18 │ }
+    19 │ 
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```
+
+```
+invalid.css:20:1 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+    18 │ }
+    19 │ 
+  > 20 │ unknown,
+       │ ^^^^^^^
+    21 │ article {
+    22 │ }
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```
+
+```
+invalid.css:24:1 lint/nursery/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Unknown type selector is not allowed.
+
+    22 │ }
+    23 │ 
+  > 24 │ x-Foo {
+       │ ^^^^^
+    25 │ }
+    26 │ 
+
+  i See MDN web docs for more details.
+
+  i To resolve this issue, replace the unknown type selector with valid one.
+
+
+```

crates/biome_css_analyze/tests/specs/nursery/noUnknownTypeSelector/valid.css

@@ -0,0 +1,21 @@
+input {
+}
+
+ul li {
+}
+
+li > a {
+}
+
+table,
+tr {
+}
+
+x-foo {
+}
+
+g {
+}
+
+mfrac {
+}

crates/biome_css_analyze/tests/specs/nursery/noUnknownTypeSelector/valid.css.snap.new

@@ -0,0 +1,30 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+assertion_line: 83
+expression: valid.css
+---
+# Input
+```css
+input {
+}
+
+ul li {
+}
+
+li > a {
+}
+
+table,
+tr {
+}
+
+x-foo {
+}
+
+g {
+}
+
+mfrac {
+}
+
+```