Fix rendering of bun.lockb in vscode extension

packages/bun-vscode/assets/vscode.css

@@ -28,8 +28,6 @@
 .mtks { text-decoration: line-through; }
 .mtks.mtku { text-decoration: underline line-through; text-underline-position: under; }
 
-
-
 .bunlock {
     display: flex;
     flex-direction: row;
@@ -48,6 +46,7 @@
 	font-family: var(--vscode-editor-font-family);
 	background-color: var(--vscode-editor-background);
 }
+
 .lines > span {
     margin-top: 1px;
     margin-bottom: 1px;
@@ -67,4 +66,4 @@ code > span {
     width: 100%;
     margin-top: 1px;
     margin-bottom: 1px;
-}
+}

packages/bun-vscode/media/vscode.css

@@ -1,70 +0,0 @@
-.mtk1 { color: #cccccc; }
-.mtk2 { color: #1f1f1f; }
-.mtk3 { color: #d4d4d4; }
-.mtk4 { color: #000080; }
-.mtk5 { color: #6a9955; }
-.mtk6 { color: #569cd6; }
-.mtk7 { color: #b5cea8; }
-.mtk8 { color: #646695; }
-.mtk9 { color: #d7ba7d; }
-.mtk10 { color: #9cdcfe; }
-.mtk11 { color: #f44747; }
-.mtk12 { color: #ce9178; }
-.mtk13 { color: #6796e6; }
-.mtk14 { color: #808080; }
-.mtk15 { color: #d16969; }
-.mtk16 { color: #dcdcaa; }
-.mtk17 { color: #4ec9b0; }
-.mtk18 { color: #c586c0; }
-.mtk19 { color: #4fc1ff; }
-.mtk20 { color: #c8c8c8; }
-.mtk21 { color: #606060; }
-.mtk22 { color: #ffffff; }
-.mtk23 { color: #cd9731; }
-.mtk24 { color: #b267e6; }
-.mtki { font-style: italic; }
-.mtkb { font-weight: bold; }
-.mtku { text-decoration: underline; text-underline-position: under; }
-.mtks { text-decoration: line-through; }
-.mtks.mtku { text-decoration: underline line-through; text-underline-position: under; }
-
-
-
-.bunlock {
-    display: flex;
-    flex-direction: row;
-}
-
-.lines {
-    display: flex;
-    flex-direction: column;
-    width: 30px;
-    margin-right: 15px;
-    text-align: right;
-    opacity: 0.5;
-
-	font-size: var(--vscode-editor-font-size);
-	font-weight: var(--vscode-editor-font-weight);
-	font-family: var(--vscode-editor-font-family);
-	background-color: var(--vscode-editor-background);
-}
-.lines > span {
-    margin-top: 1px;
-    margin-bottom: 1px;
-}
-
-code {
-    white-space: pre;
-
-	font-size: var(--vscode-editor-font-size);
-	font-weight: var(--vscode-editor-font-weight);
-	font-family: var(--vscode-editor-font-family);
-	background-color: var(--vscode-editor-background);
-}
-
-code > span {
-    display: inline-block;
-    width: 100%;
-    margin-top: 1px;
-    margin-bottom: 1px;
-}

packages/bun-vscode/scripts/build.mjs

@@ -12,7 +12,6 @@ buildSync({
   external: ["vscode"],
   platform: "node",
   format: "cjs",
-
   // The following settings are required to allow for extension debugging
   minify: false,
   sourcemap: true,

packages/bun-vscode/src/features/lockfile.style.ts

@@ -1,35 +0,0 @@
-export function styleLockfile(preview: string) {
-  // Match all lines that don't start with a whitespace character
-  const lines = preview.split(/\n(?!\s)/);
-
-  return lines.map(styleSection).join("\n");
-}
-
-function styleSection(section: string) {
-  const lines = section.split(/\n/);
-
-  return lines.map(styleLine).join("\n");
-}
-
-function styleLine(line: string) {
-  if (line.startsWith("#")) {
-    return `<span class="mtk5">${line}</span>`;
-  }
-
-  const parts = line.trim().split(" ");
-  if (line.startsWith("    ")) {
-    return `<span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;${parts[0]}&nbsp;</span><span class="mtk16">${parts[1]}</span></span>`;
-  }
-  if (line.startsWith("  ")) {
-    const leftPart = `<span class="mtk6">&nbsp;&nbsp;${parts[0]}&nbsp;</span>`;
-
-    if (parts.length === 1) return `<span>${leftPart}</span>`;
-
-    if (parts[1].startsWith('"http://') || parts[1].startsWith('"https://'))
-      return `<span>${leftPart}<span class="mtk12 detected-link">${parts[1]}</span></span>`;
-    if (parts[1].startsWith('"')) return `<span>${leftPart}<span class="mtk16">${parts[1]}</span></span>`;
-
-    return `<span>${leftPart}<span class="mtk6">${parts[1]}</span></span>`;
-  }
-  return `<span class="mtk1">${line}&nbsp;</span>`;
-}

packages/bun-vscode/src/features/lockfile/index.ts

@@ -36,7 +36,7 @@ export class BunLockfileEditorProvider implements vscode.CustomReadonlyEditorPro
 }
 
 function renderLockfile({ webview }: vscode.WebviewPanel, preview: string, extensionUri: vscode.Uri): void {
-  const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, "media", "vscode.css"));
+  const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, "assets", "vscode.css"));
   const lockfileContent = styleLockfile(preview);
 
   const lineNumbers: string[] = [];
@@ -49,11 +49,8 @@ function renderLockfile({ webview }: vscode.WebviewPanel, preview: string, exten
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-
     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource};">    
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    
     <link href="${styleVSCodeUri}" rel="stylesheet" />
   </head>
   <body>
@@ -72,7 +69,7 @@ function previewLockfile(uri: vscode.Uri, token?: vscode.CancellationToken): Pro
     const process = spawn("bun", [uri.fsPath], {
       stdio: ["ignore", "pipe", "pipe"],
     });
-    token.onCancellationRequested(() => {
+    token?.onCancellationRequested(() => {
       process.kill();
     });
     let stdout = "";