sveltejs · dummdidumm · Oct 29, 2021 · Oct 29, 2021
diff --git a/packages/language-server/README.md b/packages/language-server/README.md
@@ -54,7 +54,7 @@ Install a plugin for your editor:
 
 The language server has quite a few settings to toggle features. They are listed below. When using the VS Code extension, you can set these through the settings UI or in the `settings.json` using the keys mentioned below.
 
-When using the language server directly, put the settings as JSON inside `initializationOptions.configuration` for the [initialize command](https://microsoft.github.io/language-server-protocol/specification#initialize). When using the [didChangeConfiguration command](https://microsoft.github.io/language-server-protocol/specification#workspace_didChangeConfiguration), pass the JSON directly. The language server also accepts configuration for Emmet (key: `emmet`), Prettier (key: `prettier`) and TypeScript (keys: `javascript` and `typescript` for JS/TS config).
+When using the language server directly, put the settings as JSON inside `initializationOptions.configuration` for the [initialize command](https://microsoft.github.io/language-server-protocol/specification#initialize). When using the [didChangeConfiguration command](https://microsoft.github.io/language-server-protocol/specification#workspace_didChangeConfiguration), pass the JSON directly. The language server also accepts configuration for Emmet (key: `emmet`), Prettier (key: `prettier`), CSS (key: `css` / `less` / `scss`) and TypeScript (keys: `javascript` and `typescript` for JS/TS config).
 
 Example:
 
@@ -72,7 +72,7 @@ Init:
             },
             typescript: { /* .. */ },
             javascript: { /* .. */ },
-            prettierConfig: { /* .. */ },
+            prettier: { /* .. */ },
             // ...
         }
     }
@@ -91,7 +91,7 @@ Update:
     },
     typescript: { /* .. */ },
     javascript: { /* .. */ },
-    prettierConfig: { /* .. */ },
+    prettier: { /* .. */ },
     // ...
     }
 }

diff --git a/packages/language-server/src/ls-config.ts b/packages/language-server/src/ls-config.ts
@@ -235,6 +235,16 @@ export interface TSSuggestConfig {
 
 export type TsUserConfigLang = 'typescript' | 'javascript';
 
+/**
+ * The config as the vscode-css-languageservice understands it
+ */
+export interface CssConfig {
+    validate?: boolean;
+    lint?: any;
+    completion?: any;
+    hover?: any;
+}
+
 type DeepPartial<T> = T extends CompilerWarningsSettings
     ? T
     : {
@@ -260,6 +270,9 @@ export class LSConfigManager {
     };
     private prettierConfig: any = {};
     private emmetConfig: VSCodeEmmetConfig = {};
+    private cssConfig: CssConfig | undefined;
+    private scssConfig: CssConfig | undefined;
+    private lessConfig: CssConfig | undefined;
     private isTrusted = true;
 
     /**
@@ -311,6 +324,7 @@ export class LSConfigManager {
 
     updateEmmetConfig(config: VSCodeEmmetConfig): void {
         this.emmetConfig = config || {};
+        this.listeners.forEach((listener) => listener(this));
     }
 
     getEmmetConfig(): VSCodeEmmetConfig {
@@ -319,6 +333,7 @@ export class LSConfigManager {
 
     updatePrettierConfig(config: any): void {
         this.prettierConfig = config || {};
+        this.listeners.forEach((listener) => listener(this));
     }
 
     getPrettierConfig(): any {
@@ -331,6 +346,7 @@ export class LSConfigManager {
                 this._updateTsUserPreferences(lang, config[lang]);
             }
         });
+        this.listeners.forEach((listener) => listener(this));
     }
 
     /**
@@ -343,6 +359,7 @@ export class LSConfigManager {
 
     updateIsTrusted(isTrusted: boolean): void {
         this.isTrusted = isTrusted;
+        this.listeners.forEach((listener) => listener(this));
     }
 
     private _updateTsUserPreferences(lang: TsUserConfigLang, config: TSUserConfig) {
@@ -364,6 +381,33 @@ export class LSConfigManager {
     getTsUserPreferences(lang: TsUserConfigLang) {
         return this.tsUserPreferences[lang];
     }
+
+    updateCssConfig(config: CssConfig | undefined): void {
+        this.cssConfig = config;
+        this.listeners.forEach((listener) => listener(this));
+    }
+
+    getCssConfig(): CssConfig | undefined {
+        return this.cssConfig;
+    }
+
+    updateScssConfig(config: CssConfig | undefined): void {
+        this.scssConfig = config;
+        this.listeners.forEach((listener) => listener(this));
+    }
+
+    getScssConfig(): CssConfig | undefined {
+        return this.scssConfig;
+    }
+
+    updateLessConfig(config: CssConfig | undefined): void {
+        this.lessConfig = config;
+        this.listeners.forEach((listener) => listener(this));
+    }
+
+    getLessConfig(): CssConfig | undefined {
+        return this.lessConfig;
+    }
 }
 
 export const lsConfig = new LSConfigManager();
diff --git a/packages/language-server/src/plugins/css/CSSPlugin.ts b/packages/language-server/src/plugins/css/CSSPlugin.ts
@@ -61,17 +61,20 @@ export class CSSPlugin
 
     constructor(docManager: DocumentManager, configManager: LSConfigManager) {
         this.configManager = configManager;
+        this.updateConfigs();
 
         this.globalVars.watchFiles(this.configManager.get('css.globals'));
-        this.configManager.onChange((config) =>
-            this.globalVars.watchFiles(config.get('css.globals'))
-        );
+        this.configManager.onChange((config) => {
+            this.globalVars.watchFiles(config.get('css.globals'));
+            this.updateConfigs();
+        });
 
         docManager.on('documentChange', (document) =>
             this.cssDocuments.set(document, new CSSDocument(document))
         );
         docManager.on('documentClose', (document) => this.cssDocuments.delete(document));
     }
+
     getSelectionRange(document: Document, position: Position): SelectionRange | null {
         if (!this.featureEnabled('selectionRange') || !isInTag(position, document.styleInfo)) {
             return null;
@@ -337,6 +340,12 @@ export class CSSPlugin
         return cssDoc;
     }
 
+    private updateConfigs() {
+        getLanguageService('css')?.configure(this.configManager.getCssConfig());
+        getLanguageService('scss')?.configure(this.configManager.getScssConfig());
+        getLanguageService('less')?.configure(this.configManager.getLessConfig());
+    }
+
     private featureEnabled(feature: keyof LSCSSConfig) {
         return (
             this.configManager.enabled('css.enable') &&

diff --git a/packages/language-server/src/server.ts b/packages/language-server/src/server.ts
@@ -133,6 +133,10 @@ export function startServer(options?: LSOptions) {
                 evt.initializationOptions?.prettierConfig ||
                 {}
         );
+        // no old style as these were added later
+        configManager.updateCssConfig(evt.initializationOptions?.configuration?.css);
+        configManager.updateScssConfig(evt.initializationOptions?.configuration?.scss);
+        configManager.updateLessConfig(evt.initializationOptions?.configuration?.less);
 
         pluginHost.initialize({
             filterIncompleteCompletions:
@@ -270,6 +274,9 @@ export function startServer(options?: LSOptions) {
         configManager.updateTsJsUserPreferences(settings);
         configManager.updateEmmetConfig(settings.emmet);
         configManager.updatePrettierConfig(settings.prettier);
+        configManager.updateCssConfig(settings.css);
+        configManager.updateScssConfig(settings.scss);
+        configManager.updateLessConfig(settings.less);
     });
 
     connection.onDidOpenTextDocument((evt) => {

diff --git a/packages/svelte-vscode/src/extension.ts b/packages/svelte-vscode/src/extension.ts
@@ -89,7 +89,15 @@ export function activate(context: ExtensionContext) {
         documentSelector: [{ scheme: 'file', language: 'svelte' }],
         revealOutputChannelOn: RevealOutputChannelOn.Never,
         synchronize: {
-            configurationSection: ['svelte', 'javascript', 'typescript', 'prettier'],
+            configurationSection: [
+                'svelte',
+                'javascript',
+                'typescript',
+                'prettier',
+                'css',
+                'less',
+                'scss'
+            ],
             fileEvents: workspace.createFileSystemWatcher('{**/*.js,**/*.ts}', false, false, false)
         },
         initializationOptions: {
@@ -98,7 +106,10 @@ export function activate(context: ExtensionContext) {
                 prettier: workspace.getConfiguration('prettier'),
                 emmet: workspace.getConfiguration('emmet'),
                 typescript: workspace.getConfiguration('typescript'),
-                javascript: workspace.getConfiguration('javascript')
+                javascript: workspace.getConfiguration('javascript'),
+                css: workspace.getConfiguration('css'),
+                less: workspace.getConfiguration('less'),
+                scss: workspace.getConfiguration('scss')
             },
             dontFilterIncompleteCompletions: true, // VSCode filters client side and is smarter at it than us
             isTrusted: (workspace as any).isTrusted