fix: avoid unresolved embedded CSS tag ranges (#9631)

Author: Raashish Aggarwal

.changeset/witty-files-hear.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#9625](https://github.com/biomejs/biome/issues/9625): `experimentalEmbeddedSnippetsEnabled` no longer crashes when a file mixes formatable CSS-in-JS templates with tagged templates that the embedded formatter can't currently delegate, such as a styled-components interpolation returning `css```.

crates/biome_js_formatter/src/js/auxiliary/template_chunk_element.rs

@@ -67,6 +67,13 @@ const KNOWN_EMBED_OBJECTS: &[&str] = &["styled", "graphql"];
 ///
 /// Returns `None` when the AST is malformed.
 fn is_plausible_embed_template(expr: &JsTemplateExpression) -> Option<bool> {
+    // The service currently only extracts embedded snippets from single-chunk
+    // templates. Keep the formatter in sync so it doesn't emit StartEmbedded /
+    // EndEmbedded tags for ranges that won't be resolved later.
+    if expr.elements().len() != 1 {
+        return Some(false);
+    }
+
     if let Some(tag) = expr.tag() {
         return Some(match tag {
             // css``, gql``, graphql``

crates/biome_service/src/workspace/server.tests.rs

@@ -630,6 +630,75 @@ const Bar = styled(Component)`
     ");
 }
 
+#[test]
+fn issue_9625() {
+    const FILE_PATH: &str = "/project/file.js";
+    const FILE_CONTENT: &str = r#"const Portfolio = styled.div`
+    display: flex;
+  align-items: center;
+`;
+
+const PortfolioIcon = styled.div`
+  ${({ theme }) => css``
+  };
+`;"#;
+
+    let fs = MemoryFileSystem::default();
+    fs.insert(Utf8PathBuf::from(FILE_PATH), FILE_CONTENT);
+
+    let (workspace, project_key) = setup_workspace_and_open_project(fs, "/");
+
+    workspace
+        .update_settings(UpdateSettingsParams {
+            project_key,
+            workspace_directory: None,
+            configuration: Configuration {
+                formatter: Some(FormatterConfiguration {
+                    indent_style: Some(IndentStyle::Space),
+                    ..Default::default()
+                }),
+                javascript: Some(JsConfiguration {
+                    experimental_embedded_snippets_enabled: Some(true.into()),
+                    ..Default::default()
+                }),
+                ..Default::default()
+            },
+            extended_configurations: vec![],
+            module_graph_resolution_kind: ModuleGraphResolutionKind::None,
+        })
+        .unwrap();
+
+    workspace
+        .open_file(OpenFileParams {
+            project_key,
+            path: BiomePath::new(FILE_PATH),
+            content: FileContent::FromServer,
+            document_file_source: None,
+            persist_node_cache: false,
+            inline_config: None,
+        })
+        .unwrap();
+
+    let result = workspace
+        .format_file(FormatFileParams {
+            project_key,
+            path: Utf8PathBuf::from(FILE_PATH).into(),
+            inline_config: None,
+        })
+        .unwrap();
+
+    insta::assert_snapshot!(result.as_code(), @r"
+    const Portfolio = styled.div`
+      display: flex;
+      align-items: center;
+    `;
+
+    const PortfolioIcon = styled.div`
+      ${({ theme }) => css``};
+    `;
+    ");
+}
+
 #[test]
 fn format_js_with_embedded_graphql() {
     const FILE_PATH: &str = "/project/file.js";