Highlight Vue, Svelte, SCSS, Sass and Less files

package.json

@@ -35,11 +35,14 @@
     "@codemirror/lang-java": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-less": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/lang-php": "^6.0.2",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sass": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-vue": "^0.1.3",
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/legacy-modes": "^6.5.4",
@@ -49,6 +52,7 @@
     "@hugeicons/core-free-icons": "^4.3.0",
     "@hugeicons/react": "^1.1.10",
     "@lezer/highlight": "^1.2.3",
+    "@replit/codemirror-lang-svelte": "^6.0.0",
     "@streamdown/code": "^1.1.1",
     "@streamdown/mermaid": "^1.0.2",
     "@tauri-apps/api": "^2.7.0",

src/features/files/editor/editorLanguage.test.ts

@@ -11,6 +11,18 @@ function languageName(extension: Extension): string | null {
 }
 
 describe("languageForPath", () => {
+  it.each([
+    ["App.vue", "vue"],
+    ["theme.scss", "sass"],
+    ["theme.sass", "sass"],
+    ["theme.less", "less"],
+  ])("maps component and stylesheet file %s to %s", async (path, name) => {
+    const extension = await languageForPath(path);
+
+    expect(extension).not.toBeNull();
+    expect(languageName(extension!)).toBe(name);
+  });
+
   it.each([
     "index.php",
     "Program.cs",
@@ -51,6 +63,7 @@ describe("languageForPath", () => {
     "messages.proto",
     "Dockerfile",
     "settings.jsonc",
+    "Counter.svelte",
   ])("loads highlighting for additional mainstream file %s", async (path) => {
     await expect(languageForPath(path)).resolves.not.toBeNull();
   });

src/features/files/editor/editorLanguage.ts

@@ -167,10 +167,26 @@ export async function languageForPath(path: string): Promise<Extension | null> {
     const { css } = await import("@codemirror/lang-css");
     return css();
   }
+  if ([".scss", ".sass"].includes(extension)) {
+    const { sass } = await import("@codemirror/lang-sass");
+    return sass({ indented: extension === ".sass" });
+  }
+  if (extension === ".less") {
+    const { less } = await import("@codemirror/lang-less");
+    return less();
+  }
   if ([".html", ".htm"].includes(extension)) {
     const { html } = await import("@codemirror/lang-html");
     return html();
   }
+  if (extension === ".vue") {
+    const { vue } = await import("@codemirror/lang-vue");
+    return vue();
+  }
+  if (extension === ".svelte") {
+    const { svelte } = await import("@replit/codemirror-lang-svelte");
+    return svelte();
+  }
   if ([".md", ".mdx", ".markdown"].includes(extension)) {
     const { markdown } = await import("@codemirror/lang-markdown");
     return markdown();

src/features/files/editor/syntaxTokens.test.ts

@@ -10,8 +10,37 @@ import {
 const KEYWORD_DARK = "#ff8ffd";
 const STRING_DARK = "#b4fa72";
 const COMMENT_DARK = "#fefdc2";
+const PROPERTY_DARK = "#d0d1fe";
 
 describe("highlightSource", () => {
+  it("colors script blocks in Vue and Svelte components", async () => {
+    for (const path of ["App.vue", "Counter.svelte"]) {
+      const language = await languageForPath(path);
+      const lines = highlightSource(
+        '<script>\nconst name = "agent";\n</script>',
+        language,
+        "dark",
+      );
+      expect(token(lines[1], "const")?.color).toBe(KEYWORD_DARK);
+      expect(token(lines[1], '"agent"')?.color).toBe(STRING_DARK);
+    }
+  });
+
+  it.each(["theme.scss", "theme.less"])(
+    "colors comments in %s stylesheets",
+    async (path) => {
+      const language = await languageForPath(path);
+      const lines = highlightSource("// note\na { color: red; }", language, "dark");
+      expect(token(lines[0], "// note")?.color).toBe(COMMENT_DARK);
+    },
+  );
+
+  it("colors declarations in indented Sass stylesheets", async () => {
+    const language = await languageForPath("theme.sass");
+    const lines = highlightSource(".card\n  color: red", language, "dark");
+    expect(token(lines[1], "color")?.color).toBe(PROPERTY_DARK);
+  });
+
   it("colors TypeScript keywords, strings, and comments", () => {
     const lines = highlightSource(
       'const name = "agent";\n// note',