Issues with CSS in development mode

[tmm1]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.96.2 / main
• OS Version: macOS 15.2

There are several issues that impact the developer experience when developing CSS for vscode itself

1. Load/reload window is very slow

   

   this seems to be related to the use of @import url() which appears to download stylesheets serially. switching to <link> tags locally removed this hotspot

2. CSS changes are not picked up on reload window

   known issue see Ensure "Developer: Reload Window" actually picks up new css file contents #237603 (comment) and fix: disable persistent and in-memory cache when loading resources in oss #234357

   also CSSDevelopmentService caches its list of discovered css files, so if you add or delete a css file things do not work as expected

3. Full reload is very cumbersome for simple CSS changes

   a Reload CSS option that simply refreshes all the CSS on the page would be much better experience

   automatically reloading CSS based on file-watch events would be ideal

[tmm1]

it seems like inline-styles are preferred in vscode sources, so CSS devex improvements may not be a priority

but if there is interest in the above i can submit a PR.

the design looks roughly like:

-                       globalThis._VSCODE_CSS_LOAD = function (url) {
-                               style.textContent += `@import url(${url});\n`;
+                       globalThis._VSCODE_CSS_LOAD = function (url: string, cssModule: string, cssHash: string) {
+                               const link = document.createElement('link');
+                               link.rel = 'stylesheet';
+                               link.href = url + '?hash=' + cssHash;
+                               link.type = 'text/css';
+                               link.media = 'screen';
+                               link.id = cssModule.replace('.css', '');
+                               document.head.appendChild(link);

export interface ICSSDevelopmentService {
        _serviceBrand: undefined;
        isEnabled: boolean;
-       getCssModules(): Promise<string[]>;
+       getCssModules(reload?: boolean): Promise<Map<string, string>>;
+       onDidChangeCssModules: Event<Map<string, string>>;
 }

@@ -706,6 +706,19 @@ export class NativeWindow extends BaseWindow {
                if (this.environmentService.enableSmokeTestDriver) {
                        this.setupDriver();
                }
+
+               // CSS Modules
+               this.nativeHostService.onDidChangeCssModules(cssModules => {
+                       for (const [path, hash] of Object.entries(cssModules)) {
+                               const link = mainWindow.document.querySelector(`link[rel="stylesheet"][id="${path.replace('.css', '')}"]`);
+                               if (link) {
+                                       const linkElement = link as HTMLLinkElement;
+                                       const url = new URL(linkElement.href);
+                                       url.searchParams.set('hash', hash);
+                                       linkElement.href = url.toString();
+                               }
+                       }
+               });
        }