Merge pull request #1482 from github/koesie10/bundle-codicons

Bundle Codicons using Webpack

Author: koesie10

extensions/ql-vscode/gulpfile.ts/webpack.config.ts

@@ -55,6 +55,21 @@ export const config: webpack.Configuration = {
             loader: 'css-loader'
           }
         ]
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+              // We need this to make Webpack use the correct path for the fonts.
+              // Without this, the CSS file will use `url([object Module])`
+              esModule: false
+            }
+          },
+        ],
       }
     ]
   },

extensions/ql-vscode/package-lock.json

@@ -1278,6 +1278,7 @@
     "del": "^6.0.0",
     "eslint": "~6.8.0",
     "eslint-plugin-react": "~7.19.0",
+    "file-loader": "^6.2.0",
     "glob": "^7.1.4",
     "gulp": "^4.0.2",
     "gulp-replace": "^1.1.3",

extensions/ql-vscode/package.json

@@ -55,8 +55,7 @@ export abstract class AbstractInterfaceManager<ToMessage extends WebviewMessage,
           localResourceRoots: [
             ...(config.additionalOptions?.localResourceRoots ?? []),
             Uri.file(tmpDir.name),
-            Uri.file(path.join(ctx.extensionPath, 'out')),
-            Uri.file(path.join(ctx.extensionPath, 'node_modules/@vscode/codicons/dist')),
+            Uri.file(path.join(ctx.extensionPath, 'out'))
           ],
         }
       );

extensions/ql-vscode/src/abstract-interface-manager.ts

@@ -138,15 +138,8 @@ export function getHtmlForWebview(
     ctx.asAbsolutePath('out/webview.js')
   );
 
-  // Allows use of the VS Code "codicons" icon set.
-  // See https://github.com/microsoft/vscode-codicons
-  const codiconsPathOnDisk = Uri.file(
-    ctx.asAbsolutePath('node_modules/@vscode/codicons/dist/codicon.css')
-  );
-
   const stylesheetUrisOnDisk = [
-    Uri.file(ctx.asAbsolutePath('out/webview.css')),
-    codiconsPathOnDisk
+    Uri.file(ctx.asAbsolutePath('out/webview.css'))
   ];
 
   // Convert the on-disk URIs into webview URIs.

extensions/ql-vscode/src/interface-utils.ts

@@ -3,6 +3,9 @@ import { vscode } from './vscode-api';
 
 import { WebviewDefinition } from './webview-interface';
 
+// Allow all views to use Codicons
+import '@vscode/codicons/dist/codicon.css';
+
 const render = () => {
   const element = document.getElementById('root');