如何在Monaco Editor中实现无选择器的内联CSS自定义语言

需求 #

我正在将Monaco Editor集成到项目中，需要针对特定场景自定义CSS语言支持，目标是适配类似HTML style属性的内联样式模式——直接输入CSS属性和值，不需要选择器或花括号。

具体问题 #

希望修改Monaco Editor现有的CSS语言配置，让编辑器支持直接输入属性: 值;格式的内容（无需花括号包裹），同时保留原生CSS的语法高亮、自动补全这些核心功能。

已尝试方案 #

• 查阅Monaco官方文档和示例，但大多聚焦于从头定义新语言或对现有语言做简单修改，找不到适配内联样式的相关指引
• 尝试用monaco.languages.setMonarchTokensProvider自定义分词器，但无法有效复用原生CSS的分词逻辑，只能手动编写简单规则

以下是我目前的实现代码：

languages.register({ id: "inlineStyle" });

languages.onLanguage("inlineStyle", () => {
    languages.setLanguageConfiguration("inlineStyle", conf);
    languages.setMonarchTokensProvider("inlineStyle", {tokenizer: {
        root: [
            [/([a-zA-Z\-]+)\s*:/, "property"],
            [/([a-zA-Z\-]+)\s*$/, "property"],
            [/([a-zA-Z\-]+)\s*;\s*$/, "property"],
            [/([a-zA-Z0-9\s\.\#\-\(\)]+)(?=;|$)/, "value"],
        ]
    }});

    function fetchCssProperties() {
        // 简化示例，实际项目中可能从服务端或文件获取
        return [
            { name: "color", values: ["red", "green", "blue"] },
            { name: "background-color", values: ["yellow", "cyan", "magenta"] },
            { name: "width", values: ["100px", "50%", "auto"] },
            { name: "height", values: ["200px", "75%", "auto"] },
            // 需手动添加更多属性...
        ];
    }

    languages.registerCompletionItemProvider("inlineStyle", {
        provideCompletionItems: function(model, position) {
            const cssProperties = fetchCssProperties();

            const completionItems = cssProperties.flatMap(property => {
                const propertyCompletionItem = {
                    label: property.name,
                    kind: languages.CompletionItemKind.Property,
                    insertText: property.name + ": ",
                    detail: "CSS Property",
                    documentation: "Inserts a CSS property"
                };

                const valueCompletionItems = property.values.map(value => {
                    return {
                        label: value,
                        kind: languages.CompletionItemKind.Value,
                        insertText: value,
                        detail: "CSS Value",
                        documentation: `Inserts the value \"${value}\" for the CSS property \"${property.name}\"`
                    };
                });

                return [propertyCompletionItem, ...valueCompletionItems];
            });

            return { suggestions: completionItems };
        }
    });

});

现有代码的局限 #

上述代码虽能运行，但所有CSS属性和值都需要手动维护，无法复用Monaco原生CSS语言包中已有的完整属性列表、值校验和智能补全逻辑，维护成本极高且效率低下。

请求帮助 #

能否提供指导或示例，说明如何基于Monaco原生CSS语言配置做修改，实现支持内联样式输入（无选择器、无花括号），同时复用原生的语法高亮、自动补全等能力？如果能提供Monaco API的相关用法参考就更好了。

内容的提问来源于stack exchange，提问作者Dan