@codingame/monaco-vscode-api 16.0.4 → 16.1.0-shadow-root.1

package/README.md

@@ -323,6 +323,57 @@ 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 does 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.
+
+### 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. It can be achieved with most bundlers with some configurations.
+
+#### Webpack
+Add this rule in your configuration:
+```typescript
+{
+  test: /node_modules\/(@codingame\/monaco-vscode|vscode|monaco-editor).*\.css$/,
+  type: 'asset/source'
+}
+```
+
+#### 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,40 @@
+
+
+const styles = [];
+function registerCss(module) {
+    const cssContent = module.default;
+    if (typeof cssContent === 'string') {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(cssContent);
+        const fontFaces = Array.from(sheet.cssRules)
+            .filter((rule) => rule instanceof CSSFontFaceRule)
+            .map((r) => r.cssText);
+        if (fontFaces.length > 0) {
+            const fontFaceStyle = document.createElement('style');
+            fontFaceStyle.setAttribute('type', 'text/css');
+            fontFaceStyle.appendChild(document.createTextNode(fontFaces.join('\n')));
+            document.head.insertBefore(fontFaceStyle, document.head.firstChild);
+        }
+        styles.push(cssContent);
+    }
+}
+function getInjectElement(target) {
+    const root = target.getRootNode();
+    if (root instanceof ShadowRoot) {
+        return root;
+    }
+    return document.head;
+}
+function injectCss(target) {
+    const root = getInjectElement(target);
+    if (root instanceof ShadowRoot && styles.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");
+    }
+    for (const style of styles) {
+        const styleEl = document.createElement('style');
+        styleEl.appendChild(document.createTextNode(style));
+        root.appendChild(styleEl);
+    }
+}
+
+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.4",
+  "version": "16.1.0-shadow-root.1",
   "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.4",
-    "@codingame/monaco-vscode-environment-service-override": "16.0.4",
-    "@codingame/monaco-vscode-extensions-service-override": "16.0.4",
-    "@codingame/monaco-vscode-files-service-override": "16.0.4",
-    "@codingame/monaco-vscode-host-service-override": "16.0.4",
-    "@codingame/monaco-vscode-layout-service-override": "16.0.4",
-    "@codingame/monaco-vscode-quickaccess-service-override": "16.0.4",
+    "@codingame/monaco-vscode-base-service-override": "16.1.0-shadow-root.1",
+    "@codingame/monaco-vscode-environment-service-override": "16.1.0-shadow-root.1",
+    "@codingame/monaco-vscode-extensions-service-override": "16.1.0-shadow-root.1",
+    "@codingame/monaco-vscode-files-service-override": "16.1.0-shadow-root.1",
+    "@codingame/monaco-vscode-host-service-override": "16.1.0-shadow-root.1",
+    "@codingame/monaco-vscode-layout-service-override": "16.1.0-shadow-root.1",
+    "@codingame/monaco-vscode-quickaccess-service-override": "16.1.0-shadow-root.1",
     "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,8 +87,7 @@ 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';
@@ -108,6 +107,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,12 +181,13 @@ 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-2d334896-16b2-4125-a190-26e53250d84f") {
-    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.99.3-2d334896-16b2-4125-a190-26e53250d84f"}, ${window.monacoVscodeApiBuildId} is already loaded`);
+if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.99.3-ec076fb0-304a-415b-949c-094574542c4f") {
+    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.99.3-ec076fb0-304a-415b-949c-094574542c4f"}, ${window.monacoVscodeApiBuildId} is already loaded`);
 }
-window.monacoVscodeApiBuildId = "1.99.3-2d334896-16b2-4125-a190-26e53250d84f";
+window.monacoVscodeApiBuildId = "1.99.3-ec076fb0-304a-415b-949c-094574542c4f";
 async function initialize(overrides, container = document.body, configuration = {}, env) {
     checkServicesNotInitialized();
+    injectCss(container);
     initialize$1(container, configuration, env);
     const instantiationService = StandaloneServices.initialize({
         [IProductService.toString()]: mixin({

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 };

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

@@ -1,11 +1,13 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { show, hide } from '../../dom.js';
 import { getProgressAcccessibilitySignalScheduler } from './progressAccessibilitySignal.js';
 import { RunOnceScheduler } from '../../../common/async.js';
 import { Disposable, MutableDisposable } from '../../../common/lifecycle.js';
 import { isNumber } from '../../../common/types.js';
-import './progressbar.css';
+import * as progressbar from './progressbar.css';
 
+registerCss(progressbar);
 const CSS_DONE = 'done';
 const CSS_ACTIVE = 'active';
 const CSS_INFINITE = 'infinite';

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

@@ -1,4 +1,5 @@
 
+import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate } from '../../../../../../../external/tslib/tslib.es6.js';
 import { getWindow, append, $, EventHelper, isHTMLElement } from '../../dom.js';
 import { createStyleSheet } from '../../domStylesheets.js';
@@ -9,8 +10,9 @@ import { memoize } from '../../../common/decorators.js';
 import { Emitter } from '../../../common/event.js';
 import { DisposableStore, Disposable, toDisposable } from '../../../common/lifecycle.js';
 import { isMacintosh } from '../../../common/platform.js';
-import './sash.css';
+import * as sash from './sash.css';
 
+registerCss(sash);
 const DEBUG = false;
 var OrthogonalEdge;
 (function (OrthogonalEdge) {