From 593ce1bd6c6220e7647b727fc04fcafdb67da6c3 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Sun, 11 Oct 2026 18:30:16 +0100
Subject: [PATCH] feat: expose the CSS and HTML language workers

Monaco has public getters for its TypeScript and JSON workers but not for CSS
and HTML, so editor code can't use those language services for content embedded
in another language, e.g. a <style> block in an HTML or Vue template.
node-red/node-red#5994 uses this for CSS completion, hover and colours.

- monaco.css.getWorker(languageId = "css") for css, scss and less
- monaco.html.getWorker(languageId = "html") for html, handlebars, razor and
  languages added with registerHTMLLanguageService()
- Same shape as monaco.json.getWorker(): resolves to (...uris) => Promise<worker>,
  rejects until the language has been used
- Applied in generate-monaco-esm-i18n.js; the build fails if a patch no longer
  matches, so a Monaco update can't drop it silently
- Browser test for both getters
---
 README.md                   |  1 +
 generate-monaco-esm-i18n.js | 77 +++++++++++++++++++++++++++++++++++++
 test/browser/editor.test.js | 67 ++++++++++++++++++++++++++++++++
 3 files changed, 145 insertions(+)

diff --git a/README.md b/README.md
index 1644e5a..3d1cf5d 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@ This project makes an ESM bundle of monaco-editor with 50 themes and localizatio
 
 ## Notes
 * A bug / issue I had to handle is: when changing mode, html worker would attempt to get links from document, but occasionally `document` would be `null` and an exception would be thrown. This has been handled by adding `if(!document) return []` at the top of `function findDocumentLinks(...)` in file `htmlLinks.js`
+* The build adds `monaco.css.getWorker(languageId)` and `monaco.html.getWorker(languageId)`, like monaco's own `monaco.json.getWorker()`, so the editor can use the CSS and HTML language services for embedded content (e.g. a `<style>` block in HTML). `languageId` defaults to `css` / `html`; `scss`, `less`, `handlebars`, `razor` and ids passed to `monaco.html.registerHTMLLanguageService()` work too. Each resolves to `(...uris) => Promise<worker>` once that language has been used. See `exposeLanguageWorkers()` in `generate-monaco-esm-i18n.js`; the build fails if monaco's code has moved and the patch no longer applies. A language added with `registerHTMLLanguageService()` asks `MonacoEnvironment.getWorkerUrl` for a worker labelled with its own id, so map that label to `html` there.
 
 ## Instructions
 
diff --git a/generate-monaco-esm-i18n.js b/generate-monaco-esm-i18n.js
index ce9392b..1db2d66 100644
--- a/generate-monaco-esm-i18n.js
+++ b/generate-monaco-esm-i18n.js
@@ -120,6 +120,12 @@ function injectSourcePath(monacoVersion, callback) {
                         }
                     }
                 });
+                try {
+                    exposeLanguageWorkers();
+                } catch (err) {
+                    callback(err);
+                    return;
+                }
                 callback();
             });
         });
@@ -128,6 +134,77 @@ function injectSourcePath(monacoVersion, callback) {
     })
 }
 
+/**
+ * Replace text in a file and fail the build unless it matched exactly `expected` times, so a monaco
+ * update that moves the code can't silently drop the patch.
+ */
+function patchExactly(file, from, to, expected = 1) {
+    // replace-in-file counts with String.match(), which only counts every match for a global regex
+    from = from.global ? from : new RegExp(from.source, from.flags + "g");
+    const [result] = replaceInFileSync({ files: file, from, to, countMatches: true });
+    const found = result ? result.numMatches : 0;
+    if (found !== expected) {
+        throw new Error(`nr-monaco-build: expected ${expected} match(es) of ${from} in ${file} but found ${found}. ` +
+            "monaco has changed, update exposeLanguageWorkers() in generate-monaco-esm-i18n.js");
+    }
+}
+
+/**
+ * Expose the CSS and HTML language workers, the same way monaco already does for JSON
+ * (`monaco.json.getWorker()`) and TypeScript (`monaco.typescript.getJavaScriptWorker()`), so editor
+ * code can use those language services for embedded content, e.g. a <style> block inside HTML:
+ *
+ *     monaco.css.getWorker(languageId = "css")    // "css", "scss" or "less"
+ *     monaco.html.getWorker(languageId = "html")  // "html", "handlebars", "razor" or an id passed to
+ *                                                  // monaco.html.registerHTMLLanguageService()
+ *
+ * Each resolves to `(...uris) => Promise<worker>`, like `monaco.json.getWorker()`, and rejects with
+ * "<languageId> not registered!" until that language has been used (its worker starts lazily).
+ * The worker methods (doComplete, doHover, doValidation, findDocumentColors, ...) are monaco's
+ * CSSWorker / HTMLWorker classes in esm/vs/languages/features/{css,html}/*Worker.js.
+ */
+function exposeLanguageWorkers() {
+    const registry = [
+        "",
+        "// Added by nr-monaco-build: expose the language workers, like monaco.json.getWorker()",
+        "const nrWorkers = new Map();",
+        "function nrRegisterWorker(languageId, worker, disposables) {",
+        "  nrWorkers.set(languageId, worker);",
+        "  disposables?.push({ dispose: () => { if (nrWorkers.get(languageId) === worker) { nrWorkers.delete(languageId); } } });",
+        "}",
+        "function getWorker(languageId) {",
+        "  return new Promise((resolve, reject) => {",
+        "    const worker = nrWorkers.get(languageId);",
+        "    if (!worker) {",
+        "      return reject(languageId + \" not registered!\");",
+        "    }",
+        "    resolve(worker);",
+        "  });",
+        "}",
+        ""
+    ].join("\n");
+    const featuresDir = path.join(monacoModEsmDir, "vs", "languages", "features");
+    // htmlMode.js has two setup functions (setupMode and the older setupMode1), cssMode.js has one
+    for (const [lang, setupCount] of [["css", 1], ["html", 2]]) {
+        const modeFile = path.join(featuresDir, lang, `${lang}Mode.js`);
+        // 1. remember each language's worker accessor when its mode is set up
+        patchExactly(modeFile,
+            /(\n[ \t]*const worker = \(\.\.\.uris\) => \{\s*return client\.getLanguageServiceWorker\(\.\.\.uris\);\s*\};)/g,
+            `$1\n  nrRegisterWorker(defaults.languageId, worker, typeof disposables === "undefined" ? void 0 : disposables);`,
+            setupCount);
+        // 2. add the registry and export getWorker
+        patchExactly(modeFile, /\nexport \{ ([^}]*) \};\s*$/, `\n${registry}\nexport { $1, getWorker };\n`);
+        // 3. public API: monaco.css.getWorker / monaco.html.getWorker
+        patchExactly(path.join(featuresDir, lang, "register.js"), /\nexport \{ ([^}]*) \};\s*$/,
+            `\nconst getWorker = (languageId = "${lang}") => getMode().then((mode2) => mode2.getWorker(languageId));\nexport { $1, getWorker };\n`);
+        // 4. older import path (esm/vs/language/<lang>/monaco.contribution.js) re-exports by name
+        const contribution = path.join(monacoModEsmDir, "vs", "language", lang, "monaco.contribution.js");
+        if (fs.existsSync(contribution)) {
+            patchExactly(contribution, /export \{ ([^}]*) \} from '([^']*\/register\.js)';/, "export { $1, getWorker } from '$2';");
+        }
+    }
+}
+
 
 async function main() {
     const pkg = await readPackage("package.json");
diff --git a/test/browser/editor.test.js b/test/browser/editor.test.js
index 016e827..499e515 100644
--- a/test/browser/editor.test.js
+++ b/test/browser/editor.test.js
@@ -132,6 +132,73 @@ describe("built editor in a browser", () => {
         await page.close();
     });
 
+    it("exposes the css and html workers (monaco.css.getWorker, monaco.html.getWorker)", { timeout: 120000 }, async () => {
+        // a worker that fails to start makes its calls wait forever, so this test has its own timeout
+        // Added by generate-monaco-esm-i18n.js exposeLanguageWorkers(), the same shape as monaco.json.getWorker()
+        const { page, errors } = await openEditor();
+        const result = await page.evaluate(async () => {
+            const waitFor = async (fn, ms = 20000) => {
+                const end = Date.now() + ms;
+                while (Date.now() < end) {
+                    const v = await fn().catch(() => null);
+                    if (v) return v;
+                    await new Promise((r) => setTimeout(r, 100));
+                }
+                return null;
+            };
+            const api = { css: typeof monaco.css.getWorker, html: typeof monaco.html.getWorker };
+            // a language that hasn't been used yet has no worker
+            const unused = await monaco.css.getWorker("less").then(() => "resolved", (e) => String(e));
+
+            const css = monaco.editor.createModel("body { col }", "css");
+            const cssWorker = await waitFor(async () => (await monaco.css.getWorker())(css.uri));
+            const cssItems = (await cssWorker.doComplete(css.uri.toString(), { line: 0, character: 10 })).items.map((i) => i.label);
+            const colorModel = monaco.editor.createModel(".a { color: #ff0000; }", "css");
+            const colors = await (await (await monaco.css.getWorker())(colorModel.uri)).findDocumentColors(colorModel.uri.toString());
+
+            const scss = monaco.editor.createModel("$c: red;\n.a { color: $c; }", "scss");
+            const scssWorker = await waitFor(async () => (await monaco.css.getWorker("scss"))(scss.uri));
+            const scssHover = await scssWorker.doHover(scss.uri.toString(), { line: 1, character: 7 });
+
+            const html = monaco.editor.createModel("<di", "html");
+            const htmlWorker = await waitFor(async () => (await monaco.html.getWorker())(html.uri));
+            const htmlItems = (await htmlWorker.doComplete(html.uri.toString(), { line: 0, character: 3 })).items.map((i) => i.label);
+
+            // a language added with registerHTMLLanguageService gets its own worker too. Monaco asks
+            // MonacoEnvironment for a worker labelled with that language id, which only knows the built-in
+            // labels, so map it to the html worker (node-red's getWorkerUrl needs the same for such languages)
+            const env = self.MonacoEnvironment;
+            const getWorkerUrl = env.getWorkerUrl;
+            env.getWorkerUrl = (moduleId, label) => getWorkerUrl.call(env, moduleId, label === "nr-test-html" ? "html" : label);
+            monaco.languages.register({ id: "nr-test-html" });
+            monaco.html.registerHTMLLanguageService("nr-test-html");
+            const custom = monaco.editor.createModel("<sp", "nr-test-html");
+            const customWorker = await waitFor(async () => (await monaco.html.getWorker("nr-test-html"))(custom.uri));
+            const customItems = (await customWorker.doComplete(custom.uri.toString(), { line: 0, character: 3 })).items.map((i) => i.label);
+
+            return {
+                api,
+                unused,
+                cssCompletesColor: cssItems.includes("color"),
+                cssColors: colors.length,
+                scssHover: !!scssHover,
+                htmlCompletesDiv: htmlItems.includes("div"),
+                customCompletesSpan: customItems.includes("span"),
+            };
+        });
+        assert.deepEqual(result, {
+            api: { css: "function", html: "function" },
+            unused: "less not registered!",
+            cssCompletesColor: true,
+            cssColors: 1,
+            scssHover: true,
+            htmlCompletesDiv: true,
+            customCompletesSpan: true,
+        });
+        assert.deepEqual(errors, []);
+        await page.close();
+    });
+
     it("translates the UI for every locale", async () => {
         const label = async (lang) => {
             const { page, errors } = await openEditor(lang);