fix(css_analyze): handle CSS Modules pseudo-class 'local' in NoUnknownPseudoClass rule (#6981) (#7685)

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/big-pans-begin.md

@@ -0,0 +1,6 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#6981](https://github.com/biomejs/biome/issues/6981): The [NoUnknownPseudoClass](https://biomejs.dev/linter/rules/no-unknown-pseudo-class/) rule no longer reports local pseudo-classes when CSS Modules are used.
+

crates/biome_css_analyze/src/keywords.rs

@@ -980,6 +980,11 @@ pub const OTHER_PSEUDO_CLASSES: [&str; 51] = [
     "visited",
     "window-inactive",
 ];
+
+// CSS Modules pseudo-classes
+// https://github.com/css-modules/css-modules
+pub const CSS_MODULE_PSEUDO_CLASSES: [&str; 2] = ["global", "local"];
+
 // https://github.com/known-css/known-css-properties/blob/master/source/w3c.json
 pub const KNOWN_PROPERTIES: &[&str] = &[
     "-webkit-line-clamp",

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

@@ -1,6 +1,9 @@
 use crate::{
     keywords::{WEBKIT_SCROLLBAR_PSEUDO_CLASSES, WEBKIT_SCROLLBAR_PSEUDO_ELEMENTS},
-    utils::{is_custom_selector, is_known_pseudo_class, is_page_pseudo_class, vendor_prefixed},
+    utils::{
+        is_css_module_pseudo_class, is_custom_selector, is_known_pseudo_class,
+        is_page_pseudo_class, vendor_prefixed,
+    },
 };
 use biome_analyze::{
     Ast, Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule,
@@ -174,9 +177,7 @@ impl Rule for NoUnknownPseudoClass {
             }
         };
 
-        let is_valid_global = lower_name == "global" && is_css_modules;
-
-        if is_valid_class || is_valid_global {
+        if is_valid_class || is_css_modules && is_css_module_pseudo_class(lower_name) {
             None
         } else {
             Some(NoUnknownPseudoClassSelectorState {

crates/biome_css_analyze/src/utils.rs

@@ -1,8 +1,8 @@
 use crate::keywords::{
     A_NPLUS_BNOTATION_PSEUDO_CLASSES, A_NPLUS_BOF_SNOTATION_PSEUDO_CLASSES,
-    AT_RULE_PAGE_PSEUDO_CLASSES, HTML_TAGS, KNOWN_CHROME_PROPERTIES, KNOWN_EDGE_PROPERTIES,
-    KNOWN_EXPLORER_PROPERTIES, KNOWN_FIREFOX_PROPERTIES, KNOWN_PROPERTIES, KNOWN_SAFARI_PROPERTIES,
-    KNOWN_SAMSUNG_INTERNET_PROPERTIES, KNOWN_US_BROWSER_PROPERTIES,
+    AT_RULE_PAGE_PSEUDO_CLASSES, CSS_MODULE_PSEUDO_CLASSES, HTML_TAGS, KNOWN_CHROME_PROPERTIES,
+    KNOWN_EDGE_PROPERTIES, KNOWN_EXPLORER_PROPERTIES, KNOWN_FIREFOX_PROPERTIES, KNOWN_PROPERTIES,
+    KNOWN_SAFARI_PROPERTIES, KNOWN_SAMSUNG_INTERNET_PROPERTIES, KNOWN_US_BROWSER_PROPERTIES,
     LEVEL_ONE_AND_TWO_PSEUDO_ELEMENTS, LINGUISTIC_PSEUDO_CLASSES,
     LOGICAL_COMBINATIONS_PSEUDO_CLASSES, LONGHAND_SUB_PROPERTIES_OF_SHORTHAND_PROPERTIES,
     MATH_ML_TAGS, MEDIA_FEATURE_NAMES, OTHER_PSEUDO_CLASSES, OTHER_PSEUDO_ELEMENTS,
@@ -141,3 +141,14 @@ pub fn is_known_type_selector(prop: &str) -> bool {
         || MATH_ML_TAGS.binary_search(&input.as_ref()).is_ok()
         || is_custom_element(prop)
 }
+
+/// Check if the input string is a CSS module pseudo-class.
+///
+/// CSS modules support special pseudo-classes like `:global` and `:local` for
+/// scoping control.
+/// These are only valid when CSS modules are enabled.
+///
+/// See https://github.com/css-modules/css-modules for more details.
+pub fn is_css_module_pseudo_class(prop: &str) -> bool {
+    CSS_MODULE_PSEUDO_CLASSES.binary_search(&prop).is_ok()
+}

crates/biome_css_analyze/tests/spec_tests.rs

@@ -115,12 +115,19 @@ pub(crate) fn analyze_and_snap(
     parser_options: CssParserOptions,
     plugins: AnalyzerPluginSlice,
 ) {
+    let mut diagnostics = Vec::new();
+    let options = create_analyzer_options::<CssLanguage>(input_file, &mut diagnostics);
+
+    let parser_options = if options.css_modules() {
+        parser_options.allow_css_modules()
+    } else {
+        parser_options
+    };
+
     let parsed = parse_css(input_code, parser_options);
     let root = parsed.tree();
 
-    let mut diagnostics = Vec::new();
     let mut code_fixes = Vec::new();
-    let options = create_analyzer_options::<CssLanguage>(input_file, &mut diagnostics);
 
     let (_, errors) = biome_css_analyze::analyze(&root, filter, &options, plugins, |event| {
         if let Some(mut diag) = event.diagnostic() {

crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/validGlobal.css

@@ -2,3 +2,15 @@
 .meow :global(.global) {
 	color: blue;
 }
+
+.foo :local(.bar) {
+	color: red;
+}
+
+:local(.component) {
+	margin: 0;
+}
+
+.parent :local(.child):hover {
+	background: blue;
+}

crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/validGlobal.css.snap

@@ -9,4 +9,16 @@ expression: validGlobal.css
 	color: blue;
 }
 
+.foo :local(.bar) {
+	color: red;
+}
+
+:local(.component) {
+	margin: 0;
+}
+
+.parent :local(.child):hover {
+	background: blue;
+}
+
 ```