feat(html): support CSS modules syntax and vue css syntax (#8399)

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

Co-authored-by: dyc3 <[email protected]>

Author: ematipico

.changeset/angry-women-accept.md

@@ -0,0 +1,7 @@
+---
+"@biomejs/biome": minor
+---
+
+The Biome CSS parser is now able to parse Vue SFC syntax such as `:slotted` and `:deep`. These pseudo functions are only correctly parsed when the CSS is defined inside `.vue` components. Otherwise, Biome will a emit a parse error.
+
+This capability is only available when `experimentalFullHtmlSupportedEnabled` is set to `true`.

.changeset/odd-flies-nail.md

@@ -0,0 +1,17 @@
+---
+"@biomejs/biome": minor
+---
+
+Improved the CSS parser for CSS modules. Biome now automatically enables CSS modules parsing for `*.module.css` files.
+
+If your codebase has only `*.module.css` files, you can remove the parser feature as follows, because now Biome does it for you:
+
+```diff
+{
+  "css": {
+    "parser": {
+-      "cssModules": true
+    }
+  }
+}
+```

.changeset/plenty-hornets-hide.md

@@ -0,0 +1,7 @@
+---
+"@biomejs/biome": minor
+---
+
+Added support for parsing `:global` and `:local` inside `.astro`, `.svelte` and `.vue` files, in `<style>` portion of the file.
+
+This capability is only available when `experimentalFullHtmlSupportedEnabled` is set to `true`.

crates/biome_analyze/src/context.rs

@@ -22,7 +22,6 @@ pub struct RuleContext<'a, R: Rule> {
     jsx_runtime: Option<JsxRuntime>,
     jsx_factory: Option<&'a str>,
     jsx_fragment_factory: Option<&'a str>,
-    css_modules: bool,
 }
 
 impl<'a, R> RuleContext<'a, R>
@@ -43,7 +42,6 @@ where
         jsx_runtime: Option<JsxRuntime>,
         jsx_factory: Option<&'a str>,
         jsx_fragment_factory: Option<&'a str>,
-        css_modules: bool,
     ) -> Result<Self, Error> {
         let rule_key = RuleKey::rule::<R>();
         Ok(Self {
@@ -60,7 +58,6 @@ where
             jsx_runtime,
             jsx_factory,
             jsx_fragment_factory,
-            css_modules,
         })
     }
 
@@ -203,10 +200,6 @@ where
         self.preferred_indentation
     }
 
-    pub fn is_css_modules(&self) -> bool {
-        self.css_modules
-    }
-
     /// Attempts to retrieve a service from the current context
     ///
     /// ```no_test

crates/biome_analyze/src/options.rs

@@ -82,9 +82,6 @@ pub struct AnalyzerConfiguration {
     /// The JSX fragment factory function identifier (e.g., "Fragment")
     /// Only applies when jsx_runtime is ReactClassic.
     jsx_fragment_factory: Option<Box<str>>,
-
-    /// Whether the CSS files contain CSS Modules
-    css_modules: bool,
 }
 
 impl AnalyzerConfiguration {
@@ -132,11 +129,6 @@ impl AnalyzerConfiguration {
         self.preferred_indentation = preferred_indentation;
         self
     }
-
-    pub fn with_css_modules(mut self, css_modules: bool) -> Self {
-        self.css_modules = css_modules;
-        self
-    }
 }
 
 /// A set of information useful to the analyzer infrastructure
@@ -230,10 +222,6 @@ impl AnalyzerOptions {
     pub fn preferred_indentation(&self) -> PreferredIndentation {
         self.configuration.preferred_indentation
     }
-
-    pub fn css_modules(&self) -> bool {
-        self.configuration.css_modules
-    }
 }
 
 #[derive(Clone, Copy, Debug, Default)]

crates/biome_analyze/src/registry.rs

@@ -408,7 +408,6 @@ impl<L: Language + Default> RegistryRule<L> {
             let jsx_runtime = params.options.jsx_runtime();
             let jsx_factory = params.options.jsx_factory();
             let jsx_fragment_factory = params.options.jsx_fragment_factory();
-            let css_modules = params.options.css_modules();
             let options = params.options.rule_options::<R>().unwrap_or_default();
             let ctx = RuleContext::new(
                 &query_result,
@@ -423,7 +422,6 @@ impl<L: Language + Default> RegistryRule<L> {
                 jsx_runtime,
                 jsx_factory,
                 jsx_fragment_factory,
-                css_modules,
             )?;
 
             for result in R::run(&ctx) {

crates/biome_analyze/src/signals.rs

@@ -372,7 +372,6 @@ where
             self.options.jsx_runtime(),
             self.options.jsx_factory(),
             self.options.jsx_fragment_factory(),
-            self.options.css_modules(),
         )
         .ok()?;
 
@@ -411,7 +410,6 @@ where
             self.options.jsx_runtime(),
             self.options.jsx_factory(),
             self.options.jsx_fragment_factory(),
-            self.options.css_modules(),
         )
         .ok();
         let mut actions = Vec::new();
@@ -478,7 +476,6 @@ where
             self.options.jsx_runtime(),
             self.options.jsx_factory(),
             self.options.jsx_fragment_factory(),
-            self.options.css_modules(),
         )
         .ok();
         if let Some(ctx) = ctx {

crates/biome_cli/tests/cases/handle_astro_files.rs

@@ -230,6 +230,9 @@ schema + sure()
 
 <style>
 #id { font-family: comic-sans } .class { background: red}
+:global(div) {
+  color: red;
+}
 </style>
 "#
         .as_bytes(),

crates/biome_cli/tests/cases/handle_svelte_files.rs

@@ -239,6 +239,9 @@ schema + sure()
 
 <style>
 #id { font-family: comic-sans } .class { background: red}
+:global(div) {
+  color: red;
+}
 </style>
 "#
         .as_bytes(),

crates/biome_cli/tests/cases/handle_vue_files.rs

@@ -493,6 +493,12 @@ schema + sure()
 
 <style>
 #id { font-family: comic-sans } .class { background: red}
+:slotted(div) {
+  color: red;
+}
+:global(div) {
+  color: red;
+}
 </style>
 "#
         .as_bytes(),