build(site): [SITE-07] reproduce Monaco CSS sources and verify styled editor

test/browser/editor-styles.spec.js

@@ -0,0 +1,68 @@
+import { expect, test } from './fixtures.js'
+
+test('docs Monaco styles retain layout, themes and loaded codicon glyphs', async ({ page }, testInfo) => {
+  const assets = []
+  page.on('response', (response) => {
+    if (/\/(?:editor\.main\.css|codicon\.ttf)$/.test(response.url()))
+      assets.push({ url: response.url(), status: response.status() })
+  })
+  await page.goto('/test/player.html?core=candidate&chapter=published')
+  await page.addScriptTag({ url: '/assets/js/vs/loader.js' })
+  await page.evaluate(async () => {
+    window.require.config({ paths: { vs: '/assets/js/vs' } })
+    await new Promise((resolve, reject) => window.require(['vs/editor/editor.main'], resolve, reject))
+    const host = document.createElement('div')
+    host.style.cssText = 'width:640px;height:320px'
+    document.body.appendChild(host)
+    const editor = window.monaco.editor.create(host, { value: 'first\nsecond\nfirst', language: 'plaintext', theme: 'vs-dark', minimap: { enabled: false } })
+    window.styleProbe = { host, editor, model: editor.getModel() }
+  })
+  const editor = page.locator('.monaco-editor').first()
+  const evidence = []
+  try {
+    await expect(editor).toBeVisible()
+    await expect(editor).toHaveCSS('position', 'relative')
+    // The pinned colorRegistry deliberately uses #fffffe for the light theme.
+    for (const [theme, color] of [['vs-dark', 'rgb(30, 30, 30)'], ['vs', 'rgb(255, 255, 254)']]) {
+      await page.evaluate(theme => window.monaco.editor.setTheme(theme), theme)
+      await expect(editor).toHaveCSS('background-color', color)
+      evidence.push({ theme, color })
+    }
+    await page.evaluate(() => window.styleProbe.editor.getAction('actions.find').run())
+    const find = page.locator('.find-widget')
+    await expect(find).toBeVisible()
+    const font = await page.evaluate(async () => {
+      const loaded = await document.fonts.load('16px codicon')
+      const icon = window.styleProbe.host.querySelector('.find-widget .codicon')
+      const style = getComputedStyle(icon, '::before')
+      return { loaded: loaded.map(font => ({ family: font.family, status: font.status })), family: style.fontFamily, content: style.content }
+    })
+    expect(font.loaded.length).toBeGreaterThan(0)
+    expect(font.loaded.every(item => item.status === 'loaded')).toBe(true)
+    expect(font.family).toContain('codicon')
+    expect(['none', 'normal', '""']).not.toContain(font.content)
+    const hostBox = await editor.boundingBox()
+    const findBox = await find.boundingBox()
+    expect(findBox.x).toBeGreaterThanOrEqual(hostBox.x)
+    expect(findBox.x + findBox.width).toBeLessThanOrEqual(hostBox.x + hostBox.width + 1)
+    await page.evaluate(() => {
+      window.styleProbe.host.style.cssText = 'width:420px;height:240px'
+      window.styleProbe.editor.layout()
+    })
+    await expect(editor).toHaveCSS('width', '420px')
+    await expect(editor).toHaveCSS('height', '240px')
+    expect(assets.filter(asset => asset.url.endsWith('/editor.main.css'))).toHaveLength(1)
+    expect(assets.some(asset => asset.url.endsWith('/codicon.ttf'))).toBe(true)
+    expect(assets.every(asset => asset.status === 200)).toBe(true)
+    await testInfo.attach('monaco-style-results', { contentType: 'application/json', body: JSON.stringify({ themes: evidence, font, hostBox, findBox, assets, resized: { width: 420, height: 240 } }) })
+  }
+  finally {
+    await page.evaluate(() => {
+      const { host, editor, model } = window.styleProbe
+      editor.dispose()
+      model.dispose()
+      host.remove()
+    })
+  }
+  expect(await page.evaluate(() => window.monaco.editor.getModels().length)).toBe(0)
+})

test/monaco-provenance.test.js

@@ -7,6 +7,7 @@ import { emitAmd } from '../scripts/site-vendor/monaco/compiler.ts'
 import { assembleContributions, injectCoreDependency, readContributionMetadata } from '../scripts/site-vendor/monaco/contributions.ts'
 import { inventoryCoreMap, readCoreNls, restoreCoreMapComment } from '../scripts/site-vendor/monaco/core-build.ts'
 import { adaptCoreOrigin } from '../scripts/site-vendor/monaco/core-origins.ts'
+import { coreStyleOrder, prepareCoreStyles } from '../scripts/site-vendor/monaco/css.ts'
 import { aliasModule, moduleIds, nameModule, verifyWorkerSources } from '../scripts/site-vendor/monaco/languages.ts'
 import { browserTypeScript, verifyTypeScriptSource } from '../scripts/site-vendor/monaco/typescript.ts'
 
@@ -15,6 +16,23 @@ const contributionGroups = ['typescript', 'css', 'json', 'html', 'languages'].ma
   return { name: `monaco-${name}`, modulePrefix, contrib: `${modulePrefix}/monaco.contribution` }
 })
 
+test('Core CSS inventory follows registration order instead of the module-name table order', () => {
+  const source = 'var names = ["vs/css!vs/editor/editor.main","vs/css!vs/a","vs/css!vs/b"]; define(names[2],[],{}); define(names[1],[],{});'
+  assert.deepEqual(coreStyleOrder(source), ['vs/b', 'vs/a'])
+  assert.throws(() => coreStyleOrder(`${source} define(names[2],[],{});`), /repeated core CSS/)
+  assert.throws(() => coreStyleOrder('define([],{});'), /Missing/)
+})
+
+test('CSS source transport cannot silently fall back to unverified or missing inputs', () => {
+  const unexpectedRead = () => {
+    throw new Error('unexpected read')
+  }
+  assert.throws(() => prepareCoreStyles('', '', ['vs/a'], unexpectedRead), /one transportCSS/)
+  const recipe = 'function transportCSS(module: string, enqueue: Function, write: Function) { fs.readFileSync("/outside/a.css"); return true; }'
+  assert.throws(() => prepareCoreStyles(recipe, '', ['vs/a'], unexpectedRead), /escaped verified inputs/)
+  assert.throws(() => prepareCoreStyles('function transportCSS() { return true; }', '', ['vs/a'], unexpectedRead), /Missing transported CSS/)
+})
+
 test('Contribution metadata preserves upstream ordering and rejects computed or duplicate values', () => {
   const plugins = contributionGroups.map(group => ({ ...group, rootPath: `./${group.name}`, paths: { dev: './release/dev', min: './release/min' } }))
   const metadata = list => `var METADATA = ${JSON.stringify({ PLUGINS: list })};`