fix(noUnknownTypeSelectors): allow root when under ViewTransitions pseudo elements (#8382)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Emanuele Stoppa <[email protected]>

Author: 3 people

.changeset/young-hoops-arrive.md

@@ -0,0 +1,15 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#8338](https://github.com/biomejs/biome/issues/8338): Ignored the `noUnknownTypeSelector` check when the `root` selector is used under View Transition pseudo-elements.
+
+**Example**
+
+```css
+::view-transition-old(root),
+::view-transition-new(root) {
+	z-index: 1;
+}
+```
+

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

@@ -2,13 +2,47 @@ use biome_analyze::{
     Ast, Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule,
 };
 use biome_console::markup;
-use biome_css_syntax::CssTypeSelector;
+use biome_css_syntax::{CssPseudoElementFunctionSelector, CssTypeSelector};
 use biome_diagnostics::Severity;
 use biome_rowan::AstNode;
 use biome_rule_options::no_unknown_type_selector::NoUnknownTypeSelectorOptions;
 
 use crate::utils::is_known_type_selector;
 
+const VIEW_TRANSITION_PSEUDO_ELEMENTS: [&str; 5] = [
+    "view-transition",
+    "view-transition-group",
+    "view-transition-image-pair",
+    "view-transition-old",
+    "view-transition-new",
+];
+
+fn is_root_in_view_transition_pseudo_element(type_selector: &CssTypeSelector) -> bool {
+    // Only check if the type selector is "root"
+    let Some(type_selector_text) = type_selector
+        .ident()
+        .ok()
+        .and_then(|ident| ident.value_token().ok())
+        .map(|token| token.token_text_trimmed().text().to_string())
+    else {
+        return false;
+    };
+
+    if type_selector_text != "root" {
+        return false;
+    }
+
+    // According to the AST structure: CssTypeSelector -> CssCompoundSelector -> CssPseudoElementFunctionSelector
+    type_selector
+        .syntax()
+        .grand_parent()
+        .and_then(CssPseudoElementFunctionSelector::cast)
+        .and_then(|func| func.name().ok())
+        .and_then(|name| name.value_token().ok())
+        .map(|token| token.token_text_trimmed().text().to_string())
+        .is_some_and(|name_text| VIEW_TRANSITION_PSEUDO_ELEMENTS.contains(&name_text.as_str()))
+}
+
 declare_lint_rule! {
     /// Disallow unknown type selectors.
     ///
@@ -69,6 +103,13 @@ impl Rule for NoUnknownTypeSelector {
 
     fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
         let css_type_selector = ctx.query();
+
+        // Skip "root" type selectors that are inside View Transition pseudo-element function parameters
+        // (e.g., `root` in `::view-transition-old(root)`)
+        if is_root_in_view_transition_pseudo_element(css_type_selector) {
+            return None;
+        }
+
         let type_selector = css_type_selector
             .ident()
             .ok()?

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

@@ -20,3 +20,8 @@ g {
 
 mfrac {
 }
+
+::view-transition-old(root),
+::view-transition-new(root) {
+	z-index: 1;
+}

crates/biome_css_analyze/tests/specs/correctness/noUnknownTypeSelector/valid.css.snap

@@ -27,4 +27,8 @@ g {
 mfrac {
 }
 
+::view-transition-old(root),
+::view-transition-new(root) {
+	z-index: 1;
+}
 ```