fix(lsp): css preprocessor formatting (#27526)

Author: nayeemrmn

cli/lsp/documents.rs

@@ -64,6 +64,9 @@ pub enum LanguageId {
   Markdown,
   Html,
   Css,
+  Scss,
+  Sass,
+  Less,
   Yaml,
   Sql,
   Svelte,
@@ -86,6 +89,9 @@ impl LanguageId {
       LanguageId::Markdown => Some("md"),
       LanguageId::Html => Some("html"),
       LanguageId::Css => Some("css"),
+      LanguageId::Scss => Some("scss"),
+      LanguageId::Sass => Some("sass"),
+      LanguageId::Less => Some("less"),
       LanguageId::Yaml => Some("yaml"),
       LanguageId::Sql => Some("sql"),
       LanguageId::Svelte => Some("svelte"),
@@ -107,6 +113,9 @@ impl LanguageId {
       LanguageId::Markdown => Some("text/markdown"),
       LanguageId::Html => Some("text/html"),
       LanguageId::Css => Some("text/css"),
+      LanguageId::Scss => None,
+      LanguageId::Sass => None,
+      LanguageId::Less => None,
       LanguageId::Yaml => Some("application/yaml"),
       LanguageId::Sql => None,
       LanguageId::Svelte => None,
@@ -140,6 +149,9 @@ impl FromStr for LanguageId {
       "markdown" => Ok(Self::Markdown),
       "html" => Ok(Self::Html),
       "css" => Ok(Self::Css),
+      "scss" => Ok(Self::Scss),
+      "sass" => Ok(Self::Sass),
+      "less" => Ok(Self::Less),
       "yaml" => Ok(Self::Yaml),
       "sql" => Ok(Self::Sql),
       "svelte" => Ok(Self::Svelte),

tests/integration/lsp_tests.rs

@@ -11889,13 +11889,22 @@ fn lsp_format_html() {
 fn lsp_format_css() {
   let context = TestContextBuilder::new().use_temp_cwd().build();
   let temp_dir = context.temp_dir();
-  let file = source_file(temp_dir.path().join("file.css"), "  foo {}");
+  let css_file = source_file(temp_dir.path().join("file.css"), "  foo {}\n");
+  let scss_file = source_file(temp_dir.path().join("file.scss"), "  $font-stack: Helvetica, sans-serif;\n\nbody {\n  font: 100% $font-stack;\n}\n");
+  let sass_file = source_file(
+    temp_dir.path().join("file.sass"),
+    "  $font-stack: Helvetica, sans-serif\n\nbody\n  font: 100% $font-stack\n",
+  );
+  let less_file = source_file(
+    temp_dir.path().join("file.less"),
+    "  @width: 10px;\n\n#header {\n  width: @width;\n}\n",
+  );
   let mut client = context.new_lsp_command().build();
   client.initialize_default();
   let res = client.write_request(
     "textDocument/formatting",
     json!({
-      "textDocument": { "uri": file.url() },
+      "textDocument": { "uri": css_file.url() },
       "options": {
         "tabSize": 2,
         "insertSpaces": true,
@@ -11912,12 +11921,71 @@ fn lsp_format_css() {
         },
         "newText": "",
       },
+    ]),
+  );
+  let res = client.write_request(
+    "textDocument/formatting",
+    json!({
+      "textDocument": { "uri": scss_file.url() },
+      "options": {
+        "tabSize": 2,
+        "insertSpaces": true,
+      },
+    }),
+  );
+  assert_eq!(
+    res,
+    json!([
       {
         "range": {
-          "start": { "line": 0, "character": 8 },
-          "end": { "line": 0, "character": 8 },
+          "start": { "line": 0, "character": 0 },
+          "end": { "line": 0, "character": 2 },
         },
-        "newText": "\n",
+        "newText": "",
+      },
+    ]),
+  );
+  let res = client.write_request(
+    "textDocument/formatting",
+    json!({
+      "textDocument": { "uri": sass_file.url() },
+      "options": {
+        "tabSize": 2,
+        "insertSpaces": true,
+      },
+    }),
+  );
+  assert_eq!(
+    res,
+    json!([
+      {
+        "range": {
+          "start": { "line": 0, "character": 0 },
+          "end": { "line": 0, "character": 2 },
+        },
+        "newText": "",
+      },
+    ]),
+  );
+  let res = client.write_request(
+    "textDocument/formatting",
+    json!({
+      "textDocument": { "uri": less_file.url() },
+      "options": {
+        "tabSize": 2,
+        "insertSpaces": true,
+      },
+    }),
+  );
+  assert_eq!(
+    res,
+    json!([
+      {
+        "range": {
+          "start": { "line": 0, "character": 0 },
+          "end": { "line": 0, "character": 2 },
+        },
+        "newText": "",
       },
     ]),
   );

tests/util/server/src/lsp.rs

@@ -1289,6 +1289,9 @@ impl SourceFile {
       "md" => "markdown",
       "html" => "html",
       "css" => "css",
+      "scss" => "scss",
+      "sass" => "sass",
+      "less" => "less",
       "yaml" => "yaml",
       "sql" => "sql",
       "svelte" => "svelte",