fix(lint/css): recognize Vue :deep() pseudo-class (#11184)

Author: subotac

.changeset/big-paws-divide.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#11176](https://github.com/biomejs/biome/issues/11176): `noUnknownPseudoClass` now recognizes Vue's `:deep()` pseudo-class inside `.vue` style blocks.

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

@@ -214,6 +214,9 @@ impl Rule for NoUnknownPseudoClass {
         if is_valid_class
             || should_ignore(lower_name, ctx.options())
             || file_source.is_css_modules() && is_css_module_pseudo_class(lower_name)
+            // Vue uses `:deep()` to apply scoped styles to child components.
+            // https://vuejs.org/api/sfc-css-features.html#deep-selectors
+            || file_source.is_vue_embedded() && lower_name == "deep"
         {
             None
         } else {

crates/biome_html_analyze/tests/spec_tests.rs

@@ -78,14 +78,6 @@ fn run_test(input: &'static str, _: &str, _: &str, _: &str) {
     if group == "specs" {
         panic!("the test file must be placed in the {group}/{rule}/<rule-name>/ directory");
     }
-    if biome_html_analyze::METADATA
-        .deref()
-        .find_rule(group, rule)
-        .is_none()
-    {
-        panic!("could not find rule {group}/{rule}");
-    }
-
     let rule_filter = RuleFilter::Rule(group, rule);
     let filter = AnalysisFilter {
         enabled_rules: Some(slice::from_ref(&rule_filter)),
@@ -99,6 +91,14 @@ fn run_test(input: &'static str, _: &str, _: &str, _: &str) {
         .unwrap_or_else(|err| panic!("failed to read {input_file:?}: {err:?}"));
 
     if let Some(scripts) = scripts_from_json(extension, &input_code) {
+        if biome_html_analyze::METADATA
+            .deref()
+            .find_rule(group, rule)
+            .is_none()
+        {
+            panic!("could not find rule {group}/{rule}");
+        }
+
         for script in scripts {
             analyze_and_snap(
                 &mut snapshot,

crates/biome_html_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.vue

@@ -0,0 +1,21 @@
+<!-- should not generate diagnostics -->
+
+<template>
+  <button>
+    <span>123</span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+button {
+  height: 100px;
+
+  & :deep(span) {
+    color: #fff
+  }
+}
+</style>

crates/biome_html_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.vue.snap

@@ -0,0 +1,29 @@
+---
+source: crates/biome_html_analyze/tests/spec_tests.rs
+expression: valid.vue
+---
+# Input
+```vue
+<!-- should not generate diagnostics -->
+
+<template>
+  <button>
+    <span>123</span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+button {
+  height: 100px;
+
+  & :deep(span) {
+    color: #fff
+  }
+}
+</style>
+
+```