feat: use default export of imported css files

to load them in the shadow dom if available

Author: Loïc Mangeonjean

rollup/plugins/css-import-plugin.ts

@@ -53,7 +53,7 @@ export default ({
       styles[id] = code
 
       return {
-        code: `renderCSS(${JSON.stringify(code)})`
+        code: `renderCSS(${JSON.stringify(code)}); export default 'fakeExport'`
       }
     },
 

rollup/rollup.config.ts

@@ -44,6 +44,7 @@ const input = {
   'missing-services': './src/missing-services.ts',
   tools: './src/tools.ts',
   monaco: './src/monaco.ts',
+  css: './src/css.ts',
   ...Object.fromEntries(
     fs
       .readdirSync(nodePath.resolve(SRC_DIR, 'service-override'), { withFileTypes: true })

rollup/tools/config.ts

@@ -26,7 +26,7 @@ export const OVERRIDE_PATH = nodePath.resolve(BASE_DIR, 'src/override')
 
 const externals = Object.keys({ ...pkg.dependencies })
 export const external = (source: string, importer?: string): boolean => {
-  if (source === 'monaco-editor') {
+  if (source === 'monaco-editor' || source === '@codingame/monaco-vscode-api/css') {
     return true
   }
   if (importer != null && importer.startsWith(VSCODE_DIR) && source === 'vscode') {

rollup/tools/vscode.ts

@@ -8,6 +8,7 @@ import * as nodePath from 'node:path'
 import {
   DIST_DIR,
   DIST_DIR_MAIN,
+  MAIN_PACKAGE_NAME,
   OVERRIDE_PATH,
   SRC_DIR,
   VSCODE_DIR,
@@ -128,10 +129,12 @@ export function transformVSCodeCode(id: string, code: string): string {
     '$2.__decorator = $1'
   )
 
+  let cssImportCounter = 0
   const ast = recast.parse(patchedCode, {
     parser: babylonParser
   })
   let transformed: boolean = false
+  let cssImported: boolean = false
   function addComment(
     node: recast.types.namedTypes.NewExpression | recast.types.namedTypes.CallExpression
   ) {
@@ -173,6 +176,30 @@ export function transformVSCodeCode(id: string, code: string): string {
       }
       this.traverse(path)
     },
+    visitImportDeclaration(path) {
+      const node = path.node
+
+      if (
+        (node.specifiers == null || node.specifiers.length === 0) &&
+        (node.source.value as string).endsWith('.css')
+      ) {
+        const varName = `css${cssImportCounter++}`
+        node.specifiers = [
+          recast.types.builders.importNamespaceSpecifier(recast.types.builders.identifier(varName))
+        ]
+        const injectCall = recast.types.builders.expressionStatement(
+          recast.types.builders.callExpression(recast.types.builders.identifier('registerCss'), [
+            recast.types.builders.identifier(varName)
+          ])
+        )
+
+        path.insertAfter(injectCall)
+        transformed = true
+        cssImported = true
+      }
+
+      this.traverse(path)
+    },
     visitClassDeclaration(path) {
       /**
        * The whole point of this method is to transform to static field declarations
@@ -250,6 +277,16 @@ export function transformVSCodeCode(id: string, code: string): string {
       this.traverse(path)
     }
   })
+
+  if (cssImported) {
+    ast.program.body.unshift(
+      recast.types.builders.importDeclaration(
+        [recast.types.builders.importSpecifier(recast.types.builders.identifier('registerCss'))],
+        recast.types.builders.literal(`${MAIN_PACKAGE_NAME}/css`)
+      )
+    )
+  }
+
   if (transformed) {
     patchedCode = recast.print(ast).code
     patchedCode = patchedCode.replace(/\/\*#__PURE__\*\/\s+/g, '/*#__PURE__*/ ') // Remove space after PURE comment

src/css.ts

@@ -0,0 +1,39 @@
+const styles: string[] = []
+
+export function registerCss(module: unknown) {
+  const cssContent = (module as { default?: string }).default
+  if (typeof cssContent === 'string') {
+    // Font faces should always be added outside of the shadow dom
+    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: HTMLElement) {
+  const root = target.getRootNode()
+  if (root instanceof ShadowRoot) {
+    return root
+  }
+  return document.head
+}
+
+export function injectCss(target: HTMLElement) {
+  const root = getInjectElement(target)
+
+  for (const style of styles) {
+    const styleEl = document.createElement('style')
+    styleEl.appendChild(document.createTextNode(style))
+    root.appendChild(styleEl)
+  }
+}

src/services.ts

@@ -50,6 +50,7 @@ import getEnvironmentServiceOverride from './service-override/environment'
 import getLayoutServiceOverride from './service-override/layout'
 import getHostServiceOverride from './service-override/host'
 import getBaseServiceOverride from './service-override/base'
+import { injectCss } from './css'
 
 declare global {
   interface Window {
@@ -73,6 +74,7 @@ export async function initialize(
 ): Promise<void> {
   checkServicesNotInitialized()
 
+  injectCss(container)
   initializeWorkbench(container, configuration, env)
 
   const instantiationService = StandaloneServices.initialize({