@codingame/monaco-vscode-api 16.0.6 → 16.1.0

package/README.md

@@ -323,6 +323,80 @@ npm run start:debugServer
 
 See the [VSCode Server](https://github.com/CodinGame/monaco-vscode-api/wiki/How-to-install-and-use-VSCode-server-with-monaco‐vscode‐api) wiki page.
 
+## Shadow dom (⚠️ beta ⚠️)
+
+The library supports shadow-dom.
+
+⚠️ VSCode itself doesn't support shadow dom, and there are multiple parts that needed to be patched in order for it to work.
+
+There are multiple benefits of using it:
+- Your custom global style won't impact the VSCode workbench style (for instance if you did override the default [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing))
+- The VSCode styles won't impact other parts of your app
+- You page head won't be polluted with dozen of css files from VSCode
+
+### How to use it
+
+If the provided container element is a child of a shadow dom element, the styles will be injected in both the main page and the shadow root. That's it.
+
+### ⚠️ Xterm notice ⚠️
+
+The webgl renderer of xterm, which VSCode is using, doesn't support being used inside a shadom dom (see https://github.com/xtermjs/xterm.js/pull/5334).
+Until it's fixed and deployed, either do not use the terminal service override, or apply the patch on your side (using [patch-package](https://www.npmjs.com/package/patch-package) for instance).
+
+### Prerequisites
+
+In order to be able to load the static css files in the shadow dom as well. Your bundler configuration needs to be adapted so that importing css files doesn't load their content in the page head, but instead just returns the file content as default (either as a string or a `CSSStyleSheet`). It can be achieved with most bundlers with some configurations.
+
+Note that the bundler should still resolve referenced assets in the css files, so you can't just use the `raw` loader, or the `assets/source` webpack module type.
+
+#### Webpack
+
+Add this rule in your configuration:
+
+```typescript
+{
+  test: /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/,
+  use: [
+    {
+      loader: 'css-loader',
+      options: {
+        esModule: false,
+        exportType: 'css-style-sheet', // or 'string', both are working
+        url: true,
+        import: true
+      }
+    }
+  ]
+}
+```
+
+You should also make sure that no other loader is interfering with it, by either use a `oneOf` or exclusing those files in the other css loaders.
+
+#### Vite
+
+Add this plugin in your configuration:
+
+```typescript
+{
+  name: 'load-vscode-css-as-string',
+  enforce: 'pre',
+  async resolveId(source, importer, options) {
+    const resolved = (await this.resolve(source, importer, options))!
+    if (
+      resolved.id.match(
+        /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/
+      )
+    ) {
+      return {
+        ...resolved,
+        id: resolved.id + '?inline'
+      }
+    }
+    return undefined
+  }
+}
+```
+
 ## Troubleshooting
 
 If something doesn't work, make sure to check out the [Troubleshooting](https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting) wiki page.

package/css.d.ts

@@ -0,0 +1,2 @@
+export declare function registerCss(module: unknown): void;
+export declare function injectCss(target: HTMLElement): void;

package/css.js

@@ -0,0 +1,43 @@
+
+
+const sheets = [];
+function registerCss(module) {
+    const exportedValue = module.default;
+    let sheet = undefined;
+    if (typeof exportedValue === 'string') {
+        sheet = new CSSStyleSheet();
+        sheet.replaceSync(exportedValue);
+    }
+    else if (exportedValue instanceof CSSStyleSheet) {
+        sheet = exportedValue;
+    }
+    if (sheet != null) {
+        const fontFaces = Array.from(sheet.cssRules)
+            .filter((rule) => rule instanceof CSSFontFaceRule)
+            .map((r) => r.cssText);
+        if (fontFaces.length > 0) {
+            const fontFaceStyleSheet = new CSSStyleSheet();
+            for (const fontFace of fontFaces) {
+                fontFaceStyleSheet.insertRule(fontFace);
+            }
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceStyleSheet];
+        }
+        sheets.push(sheet);
+    }
+}
+function getInjectElement(target) {
+    const root = target.getRootNode();
+    if (root instanceof ShadowRoot) {
+        return root;
+    }
+    return document;
+}
+function injectCss(target) {
+    const root = getInjectElement(target);
+    if (root instanceof ShadowRoot && sheets.length === 0) {
+        console.error("@codingame/monaco-vscode-api was loaded inside a shadow dom, but it's unable to load the css into it because the bundler configuration wasn't applied properly: imported css files should export their content as default");
+    }
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
+}
+
+export { injectCss, registerCss };

package/monaco.d.ts

@@ -12,7 +12,7 @@ import type { IJSONSchema } from "./vscode/src/vs/base/common/jsonSchema.js";
 import { registerColor } from "./vscode/src/vs/platform/theme/common/colorRegistry.js";
 import { URI } from "./vscode/src/vs/base/common/uri.js";
 import type { IFileDeleteOptions } from "./vscode/src/vs/platform/files/common/files.js";
-import type { ITextFileEditorModel } from "@codingame/monaco-vscode-aff8bc9b-c6f8-578f-9c8a-f70d14f9c13c-common/vscode/vs/workbench/services/textfile/common/textfiles";
+import type { ITextFileEditorModel } from "@codingame/monaco-vscode-4893679b-56e5-52c5-a8fb-c366cce9660f-common/vscode/vs/workbench/services/textfile/common/textfiles";
 import { ContextKeyExpr, RawContextKey } from "./vscode/src/vs/platform/contextkey/common/contextkey.js";
 import { KeybindingResolver } from "./vscode/src/vs/platform/keybinding/common/keybindingResolver.js";
 import { ResolvedKeybindingItem } from "./vscode/src/vs/platform/keybinding/common/resolvedKeybindingItem.js";
@@ -20,7 +20,7 @@ import { Event } from "./vscode/src/vs/base/common/event.js";
 import { IKeybindingService } from "./vscode/src/vs/platform/keybinding/common/keybinding.service.js";
 export { EditorContributionInstantiation, registerEditorAction, registerEditorContribution, registerDiffEditorContribution, registerMultiEditorAction, EditorAction, EditorCommand } from "./vscode/src/vs/editor/browser/editorExtensions.js";
 export type { IEditorContribution, IDiffEditorContribution } from "./vscode/src/vs/editor/common/editorCommon.js";
-export type { ITextFileEditorModelSaveEvent } from "@codingame/monaco-vscode-aff8bc9b-c6f8-578f-9c8a-f70d14f9c13c-common/vscode/vs/workbench/services/textfile/common/textfiles";
+export type { ITextFileEditorModelSaveEvent } from "@codingame/monaco-vscode-4893679b-56e5-52c5-a8fb-c366cce9660f-common/vscode/vs/workbench/services/textfile/common/textfiles";
 export declare function writeFile(uri: URI, content: string): Promise<void>;
 export declare function deleteFile(uri: URI, options?: Partial<IFileDeleteOptions>): Promise<void>;
 export declare function createModelReference(resource: URI, content?: string): Promise<IReference<ITextFileEditorModel>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingame/monaco-vscode-api",
-  "version": "16.0.6",
+  "version": "16.1.0",
   "private": false,
   "description": "VSCode public API plugged on the monaco editor",
   "keywords": [],
@@ -16,13 +16,13 @@
   "type": "module",
   "dependencies": {
     "@c4312/eventsource-umd": "3.0.5",
-    "@codingame/monaco-vscode-base-service-override": "16.0.6",
-    "@codingame/monaco-vscode-environment-service-override": "16.0.6",
-    "@codingame/monaco-vscode-extensions-service-override": "16.0.6",
-    "@codingame/monaco-vscode-files-service-override": "16.0.6",
-    "@codingame/monaco-vscode-host-service-override": "16.0.6",
-    "@codingame/monaco-vscode-layout-service-override": "16.0.6",
-    "@codingame/monaco-vscode-quickaccess-service-override": "16.0.6",
+    "@codingame/monaco-vscode-base-service-override": "16.1.0",
+    "@codingame/monaco-vscode-environment-service-override": "16.1.0",
+    "@codingame/monaco-vscode-extensions-service-override": "16.1.0",
+    "@codingame/monaco-vscode-files-service-override": "16.1.0",
+    "@codingame/monaco-vscode-host-service-override": "16.1.0",
+    "@codingame/monaco-vscode-layout-service-override": "16.1.0",
+    "@codingame/monaco-vscode-quickaccess-service-override": "16.1.0",
     "marked": "14.0.0"
   },
   "main": "services.js",

package/services.d.ts

@@ -97,8 +97,8 @@ export { ILocaleService } from "./vscode/src/vs/workbench/services/localization/
 export { NoOpNotification, NoOpProgress } from "./vscode/src/vs/platform/notification/common/notification.js";
 export { NotificationsFilter, NotificationPriority, NeverShowAgainScope } from "./vscode/src/vs/platform/notification/common/notification.js";
 export type { NotificationMessage, INotificationProperties, INeverShowAgainOptions, INotification, INotificationActions, INotificationProgress, INotificationProgressProperties, INotificationHandle, IPromptChoice, IPromptChoiceWithMenu, IPromptOptions, IStatusMessageOptions } from "./vscode/src/vs/platform/notification/common/notification.js";
-export type { IDialogArgs, DialogType, IDialogResult, IConfirmDialogArgs, IInputDialogArgs, IPromptDialogArgs, IBaseDialogOptions, ICheckbox, ICheckboxResult, IConfirmation, IConfirmationResult, IInput, IInputResult, IInputElement, IPrompt, IPromptResult, IPromptBaseButton, IPromptButton, IPromptCancelButton, IPromptResultWithCancel, IPromptWithCustomCancel, IPromptWithDefaultCancel } from "@codingame/monaco-vscode-2e69e120-617a-5258-95e0-3b8902f4e014-common/vscode/vs/platform/dialogs/common/dialogs";
-export type { IDialogHandler, ICustomDialogOptions, ICustomDialogMarkdown } from "@codingame/monaco-vscode-2e69e120-617a-5258-95e0-3b8902f4e014-common/vscode/vs/platform/dialogs/common/dialogs";
+export type { IDialogArgs, DialogType, IDialogResult, IConfirmDialogArgs, IInputDialogArgs, IPromptDialogArgs, IBaseDialogOptions, ICheckbox, ICheckboxResult, IConfirmation, IConfirmationResult, IInput, IInputResult, IInputElement, IPrompt, IPromptResult, IPromptBaseButton, IPromptButton, IPromptCancelButton, IPromptResultWithCancel, IPromptWithCustomCancel, IPromptWithDefaultCancel } from "@codingame/monaco-vscode-2bd6777a-3bff-5b83-ad25-0e029e81ffe9-common/vscode/vs/platform/dialogs/common/dialogs";
+export type { IDialogHandler, ICustomDialogOptions, ICustomDialogMarkdown } from "@codingame/monaco-vscode-2bd6777a-3bff-5b83-ad25-0e029e81ffe9-common/vscode/vs/platform/dialogs/common/dialogs";
 export type { IMarkdownString, MarkdownStringTrustedOptions } from "./vscode/src/vs/base/common/htmlContent.js";
 export { IActivityService } from "./vscode/src/vs/workbench/services/activity/common/activity.service.js";
 export type { IBadge } from "@codingame/monaco-vscode-a7c9ae3c-16d2-5d17-86b2-981be7094566-common/vscode/vs/workbench/services/activity/common/activity";

package/services.js

@@ -87,13 +87,11 @@ import './vscode/src/vs/editor/contrib/wordPartOperations/browser/wordPartOperat
 import './vscode/src/vs/editor/contrib/readOnlyMessage/browser/contribution.js';
 import './vscode/src/vs/editor/contrib/diffEditorBreadcrumbs/browser/contribution.js';
 import './vscode/src/vs/editor/common/standaloneStrings.js';
-import './vscode/src/vs/base/browser/ui/codicons/codicon/codicon.css';
-import './vscode/src/vs/base/browser/ui/codicons/codicon/codicon-modifiers.css';
+import './vscode/src/vs/base/browser/ui/codicons/codiconStyles.js';
 import './vscode/src/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
 export { default as Severity } from './vscode/src/vs/base/common/severity.js';
 export { StorageScope, StorageTarget } from './vscode/src/vs/platform/storage/common/storage.js';
 import { StandaloneServices } from './vscode/src/vs/editor/standalone/browser/standaloneServices.js';
-import { mixin } from './vscode/src/vs/base/common/objects.js';
 import { IInstantiationService } from './vscode/src/vs/platform/instantiation/common/instantiation.js';
 import { DisposableStore } from './vscode/src/vs/base/common/lifecycle.js';
 import { registerWorkbenchContribution2 } from './vscode/src/vs/workbench/common/contributions.js';
@@ -108,6 +106,7 @@ import getServiceOverride$5 from '@codingame/monaco-vscode-environment-service-o
 import getServiceOverride$6 from '@codingame/monaco-vscode-layout-service-override';
 import getServiceOverride$1 from '@codingame/monaco-vscode-host-service-override';
 import getServiceOverride from '@codingame/monaco-vscode-base-service-override';
+import { injectCss } from './css.js';
 export { SyncDescriptor } from './vscode/src/vs/platform/instantiation/common/descriptors.js';
 export { ICommandService } from './vscode/src/vs/platform/commands/common/commands.service.js';
 export { INotificationService } from './vscode/src/vs/platform/notification/common/notification.service.js';
@@ -181,15 +180,16 @@ export { IKeybindingService } from './vscode/src/vs/platform/keybinding/common/k
 export { ISecretStorageService } from './vscode/src/vs/platform/secrets/common/secrets.service.js';
 export { ConfigurationTarget } from './vscode/src/vs/platform/configuration/common/configuration.js';
 
-if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.99.3-bb4f80c6-aee4-4928-9291-2f3199966d2a") {
-    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.99.3-bb4f80c6-aee4-4928-9291-2f3199966d2a"}, ${window.monacoVscodeApiBuildId} is already loaded`);
+if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.99.3-de370f37-1fc0-486b-a51c-37a009681fa0") {
+    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.99.3-de370f37-1fc0-486b-a51c-37a009681fa0"}, ${window.monacoVscodeApiBuildId} is already loaded`);
 }
-window.monacoVscodeApiBuildId = "1.99.3-bb4f80c6-aee4-4928-9291-2f3199966d2a";
+window.monacoVscodeApiBuildId = "1.99.3-de370f37-1fc0-486b-a51c-37a009681fa0";
 async function initialize(overrides, container = document.body, configuration = {}, env) {
     checkServicesNotInitialized();
+    injectCss(container);
     initialize$1(container, configuration, env);
     const instantiationService = StandaloneServices.initialize({
-        [IProductService.toString()]: mixin({
+        [IProductService.toString()]: {
             version: "1.99.3",
             quality: 'stable',
             commit: "17baf841131aa23349f217ca7c570c76ee87b957",
@@ -201,8 +201,9 @@ async function initialize(overrides, container = document.body, configuration =
             reportIssueUrl: 'https://github.com/microsoft/vscode/issues/new',
             licenseName: 'MIT',
             licenseUrl: 'https://github.com/microsoft/vscode/blob/main/LICENSE.txt',
-            serverApplicationName: 'code-server-oss'
-        }, configuration.productConfiguration ?? {}),
+            serverApplicationName: 'code-server-oss',
+            ...(configuration.productConfiguration ?? {})
+        },
         ...getServiceOverride$6(),
         ...getServiceOverride$5(),
         ...getServiceOverride$4(),

package/vscode/src/vs/base/browser/domStylesheets.d.ts

@@ -7,6 +7,8 @@ declare class WrappedStyleElement {
     setStyle(cssStyle: string): void;
     dispose(): void;
 }
+export declare let shadowRootContainer: ShadowRoot | undefined;
+export declare function setContainerElement(container: HTMLElement): void;
 export declare function createStyleSheet(container?: HTMLElement, beforeAppend?: (style: HTMLStyleElement) => void, disposableStore?: DisposableStore): HTMLStyleElement;
 export declare function cloneGlobalStylesheets(targetWindow: Window): IDisposable;
 export declare function createCSSRule(selector: string, cssText: string, style?: HTMLStyleElement): void;

package/vscode/src/vs/base/browser/domStylesheets.js

@@ -34,6 +34,13 @@ class WrappedStyleElement {
         }
     }
 }
+let shadowRootContainer;
+function setContainerElement(container) {
+    const root = container.getRootNode();
+    if (root instanceof ShadowRoot) {
+        shadowRootContainer = root;
+    }
+}
 function createStyleSheet(container = mainWindow.document.head, beforeAppend, disposableStore) {
     const style = document.createElement('style');
     style.type = 'text/css';
@@ -50,7 +57,11 @@ function createStyleSheet(container = mainWindow.document.head, beforeAppend, di
             if (targetWindow === mainWindow) {
                 continue;
             }
-            const cloneDisposable = disposables.add(cloneGlobalStyleSheet(style, globalStylesheetClones, targetWindow));
+            const cloneDisposable = disposables.add(cloneGlobalStyleSheet(style, globalStylesheetClones, targetWindow.document.head));
+            disposableStore?.add(cloneDisposable);
+        }
+        if (shadowRootContainer !== undefined) {
+            const cloneDisposable = cloneGlobalStyleSheet(style, globalStylesheetClones, shadowRootContainer);
             disposableStore?.add(cloneDisposable);
         }
     }
@@ -59,14 +70,14 @@ function createStyleSheet(container = mainWindow.document.head, beforeAppend, di
 function cloneGlobalStylesheets(targetWindow) {
     const disposables = ( new DisposableStore());
     for (const [globalStylesheet, clonedGlobalStylesheets] of globalStylesheets) {
-        disposables.add(cloneGlobalStyleSheet(globalStylesheet, clonedGlobalStylesheets, targetWindow));
+        disposables.add(cloneGlobalStyleSheet(globalStylesheet, clonedGlobalStylesheets, targetWindow.document.head));
     }
     return disposables;
 }
-function cloneGlobalStyleSheet(globalStylesheet, globalStylesheetClones, targetWindow) {
+function cloneGlobalStyleSheet(globalStylesheet, globalStylesheetClones, windowElement) {
     const disposables = ( new DisposableStore());
     const clone = globalStylesheet.cloneNode(true);
-    targetWindow.document.head.appendChild(clone);
+    windowElement.appendChild(clone);
     disposables.add(toDisposable(() => clone.remove()));
     for (const rule of getDynamicStyleSheetRules(globalStylesheet)) {
         clone.sheet?.insertRule(rule.cssText, clone.sheet?.cssRules.length);
@@ -126,4 +137,4 @@ function isCSSStyleRule(rule) {
     return typeof rule.selectorText === 'string';
 }
 
-export { cloneGlobalStylesheets, createCSSRule, createStyleSheet, createStyleSheet2, isGlobalStylesheet, removeCSSRulesContainingSelector };
+export { cloneGlobalStylesheets, createCSSRule, createStyleSheet, createStyleSheet2, isGlobalStylesheet, removeCSSRulesContainingSelector, setContainerElement, shadowRootContainer };

package/vscode/src/vs/base/browser/ui/actionbar/actionViewItems.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { isFirefox } from '../../browser.js';
 import { DataTransfers } from '../../dnd.js';
 import { addDisposableListener, EventType, EventHelper } from '../../dom.js';
@@ -9,10 +10,11 @@ import { Action, ActionRunner, Separator } from '../../../common/actions.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import { isMacintosh } from '../../../common/platform.js';
 import { isUndefinedOrNull, assertType } from '../../../common/types.js';
-import './actionbar.css';
+import * as actionbar from './actionbar.css';
 import { localize } from '../../../../nls.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 
+registerCss(actionbar);
 class BaseActionViewItem extends Disposable {
     get action() {
         return this._action;

package/vscode/src/vs/base/browser/ui/actionbar/actionbar.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { addDisposableListener, EventType, trackFocus, getActiveElement, isAncestor, isHTMLElement, EventHelper, clearNode } from '../../dom.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { BaseActionViewItem, ActionViewItem } from './actionViewItems.js';
@@ -8,8 +9,9 @@ import { Emitter } from '../../../common/event.js';
 import { KeyCode, KeyMod as KeyMod$1 } from '../../../common/keyCodes.js';
 import { Disposable, DisposableStore, DisposableMap, dispose } from '../../../common/lifecycle.js';
 import { isNumber, isFunction } from '../../../common/types.js';
-import './actionbar.css';
+import * as actionbar from './actionbar.css';
 
+registerCss(actionbar);
 var ActionsOrientation;
 (function (ActionsOrientation) {
     ActionsOrientation[ActionsOrientation["HORIZONTAL"] = 0] = "HORIZONTAL";

package/vscode/src/vs/base/browser/ui/aria/aria.js

@@ -1,7 +1,9 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { clearNode } from '../../dom.js';
-import './aria.css';
+import * as aria from './aria.css';
 
+registerCss(aria);
 const MAX_MESSAGE_LENGTH = 20000;
 let ariaContainer;
 let alertContainer;

package/vscode/src/vs/base/browser/ui/button/button.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { EventType, addDisposableListener, EventHelper, trackFocus, reset, isActiveElement, $ } from '../../dom.js';
 import purify from '../../dompurify/dompurify.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
@@ -14,10 +15,11 @@ import { isMarkdownString, markdownStringEqual } from '../../../common/htmlConte
 import { KeyCode } from '../../../common/keyCodes.js';
 import { Disposable, DisposableStore } from '../../../common/lifecycle.js';
 import { ThemeIcon } from '../../../common/themables.js';
-import './button.css';
+import * as button from './button.css';
 import { localize } from '../../../../nls.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 
+registerCss(button);
 const unthemedButtonStyles = {
     buttonBackground: '#0E639C',
     buttonHoverBackground: '#006BB3',

package/vscode/src/vs/base/browser/ui/codicons/codiconStyles.js

@@ -0,0 +1,7 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import * as codicon from './codicon/codicon.css';
+import * as codiconModifiers from './codicon/codicon-modifiers.css';
+
+registerCss(codicon);
+registerCss(codiconModifiers);

package/vscode/src/vs/base/browser/ui/contextview/contextview.js

@@ -1,11 +1,13 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { BrowserFeatures } from '../../canIUse.js';
 import { $, hide, addStandardDisposableListener, clearNode, show, isHTMLElement, getDomNodePagePosition, getDomNodeZoomLevel, getTotalWidth, getTotalHeight, getActiveWindow, getWindow, isAncestor } from '../../dom.js';
 import { Disposable, toDisposable, DisposableStore } from '../../../common/lifecycle.js';
 import { isIOS } from '../../../common/platform.js';
 import { Range } from '../../../common/range.js';
-import './contextview.css';
+import * as contextview from './contextview.css';
 
+registerCss(contextview);
 var ContextViewDOMPosition;
 (function (ContextViewDOMPosition) {
     ContextViewDOMPosition[ContextViewDOMPosition["ABSOLUTE"] = 1] = "ABSOLUTE";

package/vscode/src/vs/base/browser/ui/countBadge/countBadge.js

@@ -1,10 +1,12 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { append, $ } from '../../dom.js';
 import { format } from '../../../common/strings.js';
-import './countBadge.css';
+import * as countBadge from './countBadge.css';
 import { Disposable, MutableDisposable, toDisposable } from '../../../common/lifecycle.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 
+registerCss(countBadge);
 class CountBadge extends Disposable {
     constructor(container, options, styles) {
         super();

package/vscode/src/vs/base/browser/ui/dnd/dnd.js

@@ -1,7 +1,9 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { $ } from '../../dom.js';
-import './dnd.css';
+import * as dnd from './dnd.css';
 
+registerCss(dnd);
 function applyDragImage(event, container, label, extraClasses = []) {
     if (!event.dataTransfer) {
         return;

package/vscode/src/vs/base/browser/ui/dropdown/dropdown.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { append, $, EventType, addDisposableListener, EventHelper, isMouseEvent } from '../../dom.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { EventType as EventType$1, Gesture } from '../../touch.js';
@@ -8,8 +9,9 @@ import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { ActionRunner } from '../../../common/actions.js';
 import { Emitter } from '../../../common/event.js';
 import { KeyCode } from '../../../common/keyCodes.js';
-import './dropdown.css';
+import * as dropdown from './dropdown.css';
 
+registerCss(dropdown);
 class BaseDropdown extends ActionRunner {
     constructor(container, options) {
         super();

package/vscode/src/vs/base/browser/ui/dropdown/dropdownActionViewItem.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { localize } from '../../../../nls.js';
 import { Action } from '../../../common/actions.js';
 import { Codicon } from '../../../common/codicons.js';
@@ -10,9 +11,10 @@ import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { BaseActionViewItem, ActionViewItem } from '../actionbar/actionViewItems.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
-import './dropdown.css';
+import * as dropdown from './dropdown.css';
 import { DropdownMenu } from './dropdown.js';
 
+registerCss(dropdown);
 class DropdownMenuActionViewItem extends BaseActionViewItem {
     constructor(action, menuActionsOrProvider, contextMenuProvider, options = Object.create(null)) {
         super(null, action, options);

package/vscode/src/vs/base/browser/ui/findinput/findInput.js

@@ -1,15 +1,17 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { EventHelper, addDisposableListener } from '../../dom.js';
 import { RegexToggle, WholeWordsToggle, CaseSensitiveToggle } from './findInputToggles.js';
 import { HistoryInputBox } from '../inputbox/inputBox.js';
 import { Widget } from '../widget.js';
 import { Emitter } from '../../../common/event.js';
 import { KeyCode } from '../../../common/keyCodes.js';
-import './findInput.css';
+import * as findInput from './findInput.css';
 import { localize } from '../../../../nls.js';
 import { MutableDisposable, DisposableStore } from '../../../common/lifecycle.js';
 import { createInstantHoverDelegate } from '../hover/hoverDelegateFactory.js';
 
+registerCss(findInput);
 const NLS_DEFAULT_LABEL = ( localize(10, "input"));
 class FindInput extends Widget {
     static { this.OPTION_CHANGE = 'optionChange'; }

package/vscode/src/vs/base/browser/ui/findinput/replaceInput.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { EventHelper } from '../../dom.js';
 import { Toggle } from '../toggle/toggle.js';
 import { HistoryInputBox } from '../inputbox/inputBox.js';
@@ -6,10 +7,11 @@ import { Widget } from '../widget.js';
 import { Codicon } from '../../../common/codicons.js';
 import { Emitter } from '../../../common/event.js';
 import { KeyCode } from '../../../common/keyCodes.js';
-import './findInput.css';
+import * as findInput from './findInput.css';
 import { localize } from '../../../../nls.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 
+registerCss(findInput);
 const NLS_DEFAULT_LABEL = ( localize(14, "input"));
 const NLS_PRESERVE_CASE_LABEL = ( localize(15, "Preserve Case"));
 class PreserveCaseToggle extends Toggle {

package/vscode/src/vs/base/browser/ui/hover/hoverWidget.js

@@ -1,12 +1,14 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { $ as $$1, append, addDisposableListener, EventType } from '../../dom.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
 import { KeyCode } from '../../../common/keyCodes.js';
 import { Disposable } from '../../../common/lifecycle.js';
-import './hoverWidget.css';
+import * as hoverWidget from './hoverWidget.css';
 import { localize } from '../../../../nls.js';
 
+registerCss(hoverWidget);
 const $ = $$1;
 var HoverPosition;
 (function (HoverPosition) {

package/vscode/src/vs/base/browser/ui/iconLabel/iconLabel.js

@@ -1,5 +1,6 @@
 
-import './iconlabel.css';
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import * as iconlabel from './iconlabel.css';
 import { append, $, isHTMLElement, isAncestor, after } from '../../dom.js';
 import { asCSSUrl } from '../../cssValue.js';
 import { HighlightedLabel } from '../highlightedlabel/highlightedLabel.js';
@@ -11,6 +12,7 @@ import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 import { isString } from '../../../common/types.js';
 import { stripIcons } from '../../../common/iconLabels.js';
 
+registerCss(iconlabel);
 class FastLabelNode {
     constructor(_element) {
         this._element = _element;

package/vscode/src/vs/base/browser/ui/inputbox/inputBox.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { $ as $$1, append, getTotalHeight, isActiveElement, getTotalWidth } from '../../dom.js';
 import { asCssValueWithDefault } from '../../cssValue.js';
 import { DomEmitter } from '../../event.js';
@@ -13,10 +14,11 @@ import { Emitter, Event } from '../../../common/event.js';
 import { HistoryNavigator } from '../../../common/history.js';
 import { equals } from '../../../common/objects.js';
 import { ScrollbarVisibility } from '../../../common/scrollable.js';
-import './inputBox.css';
+import * as inputBox from './inputBox.css';
 import { localize } from '../../../../nls.js';
 import { MutableDisposable } from '../../../common/lifecycle.js';
 
+registerCss(inputBox);
 const $ = $$1;
 var MessageType;
 (function (MessageType) {

package/vscode/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.js

@@ -1,13 +1,15 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { $ as $$1, append, clearNode } from '../../dom.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { UILabelProvider } from '../../../common/keybindingLabels.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
-import './keybindingLabel.css';
+import * as keybindingLabel from './keybindingLabel.css';
 import { localize } from '../../../../nls.js';
 
+registerCss(keybindingLabel);
 const $ = $$1;
 const unthemedKeybindingLabelOptions = {
     keybindingLabelBackground: undefined,

package/vscode/src/vs/base/browser/ui/list/listPaging.js

@@ -1,12 +1,14 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { range } from '../../../common/arrays.js';
 import { CancellationTokenSource } from '../../../common/cancellation.js';
 import { Event } from '../../../common/event.js';
 import { Disposable } from '../../../common/lifecycle.js';
-import './list.css';
+import * as list from './list.css';
 import { List } from './listWidget.js';
 import { isActiveElement } from '../../dom.js';
 
+registerCss(list);
 class PagedRenderer {
     get templateId() { return this.renderer.templateId; }
     constructor(renderer, modelProvider) {

package/vscode/src/vs/base/browser/ui/list/listWidget.js

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate } from '../../../../../../../external/tslib/tslib.es6.js';
 import { isEditableElement, EventHelper, isHTMLElement, getWindow, isMouseEvent, getActiveElement, isActiveElement } from '../../dom.js';
 import { createStyleSheet } from '../../domStylesheets.js';
@@ -19,7 +20,7 @@ import { dispose, DisposableStore } from '../../../common/lifecycle.js';
 import { clamp } from '../../../common/numbers.js';
 import { isMacintosh } from '../../../common/platform.js';
 import { isNumber } from '../../../common/types.js';
-import './list.css';
+import * as list from './list.css';
 import { ListError } from './list.js';
 import { ListView } from './listView.js';
 import { StandardMouseEvent } from '../../mouseEvent.js';
@@ -27,6 +28,7 @@ import '../../../common/observableInternal/index.js';
 import { constObservable } from '../../../common/observableInternal/utils.js';
 import { autorun } from '../../../common/observableInternal/autorun.js';
 
+registerCss(list);
 class TraitRenderer {
     constructor(trait) {
         this.trait = trait;

package/vscode/src/vs/base/browser/ui/mouseCursor/mouseCursor.js

@@ -1,6 +1,8 @@
 
-import './mouseCursor.css';
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import * as mouseCursor from './mouseCursor.css';
 
+registerCss(mouseCursor);
 const MOUSE_CURSOR_TEXT_CSS_CLASS_NAME = `monaco-mouse-cursor-text`;
 
 export { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME };