From 39ebcc7f34004576564c297bc89c691f564d5298 Mon Sep 17 00:00:00 2001 From: Matt Bierner <12821956+mjbvz@users.noreply.github.com> Date: Thu, 12 Feb 2026 23:51:53 -0800 Subject: [PATCH] Use esbuild instead of webpack to bundle the css extension Switches from webpack to esbuild to bundle the css extension. Tested this locally in a browser and creating an official build to test the bundled extension still work correctly --- build/gulpfile.extensions.ts | 5 ++- build/lib/extensions.ts | 14 +++++++- .../css-language-features/.vscodeignore | 8 ++--- .../client/tsconfig.browser.json | 7 ++++ .../css-language-features/esbuild.browser.mts | 36 +++++++++++++++++++ extensions/css-language-features/esbuild.mts | 36 +++++++++++++++++++ .../extension-browser.webpack.config.js | 18 ---------- .../extension.webpack.config.js | 18 ---------- .../extension-browser.webpack.config.js | 20 ----------- .../server/extension.webpack.config.js | 18 ---------- .../server/tsconfig.browser.json | 7 ++++ 11 files changed, 105 insertions(+), 82 deletions(-) create mode 100644 extensions/css-language-features/client/tsconfig.browser.json create mode 100644 extensions/css-language-features/esbuild.browser.mts create mode 100644 extensions/css-language-features/esbuild.mts delete mode 100644 extensions/css-language-features/extension-browser.webpack.config.js delete mode 100644 extensions/css-language-features/extension.webpack.config.js delete mode 100644 extensions/css-language-features/server/extension-browser.webpack.config.js delete mode 100644 extensions/css-language-features/server/extension.webpack.config.js create mode 100644 extensions/css-language-features/server/tsconfig.browser.json diff --git a/build/gulpfile.extensions.ts b/build/gulpfile.extensions.ts index cae158ea590..da2e52300c5 100644 --- a/build/gulpfile.extensions.ts +++ b/build/gulpfile.extensions.ts @@ -296,7 +296,10 @@ async function buildWebExtensions(isWatch: boolean): Promise { promises.push( ext.esbuildExtensions('packaging web extension (esbuild)', isWatch, esbuildConfigLocations.map(script => ({ script }))), // Also run type check on extensions - ...esbuildConfigLocations.map(script => ext.typeCheckExtension(path.dirname(script), true)) + ...esbuildConfigLocations.flatMap(script => { + const roots = ext.getBuildRootsForExtension(path.dirname(script)); + return roots.map(root => ext.typeCheckExtension(root, true)); + }) ); } diff --git a/build/lib/extensions.ts b/build/lib/extensions.ts index fac7946fc98..51eb019f042 100644 --- a/build/lib/extensions.ts +++ b/build/lib/extensions.ts @@ -85,7 +85,7 @@ function fromLocal(extensionPath: string, forWeb: boolean, disableMangle: boolea // Unlike webpack, esbuild only does bundling so we still want to run a separate type check step input = es.merge( fromLocalEsbuild(extensionPath, esbuildConfigFileName), - typeCheckExtensionStream(extensionPath, forWeb), + ...getBuildRootsForExtension(extensionPath).map(root => typeCheckExtensionStream(root, forWeb)), ); isBundled = true; } else if (hasWebpack) { @@ -766,3 +766,15 @@ export function buildExtensionMedia(isWatch: boolean, outputRoot?: string): Prom outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined }))); } + +export function getBuildRootsForExtension(extensionPath: string): string[] { + // These extensions split their code between a client and server folder. We should treat each as build roots + if (extensionPath.endsWith('css-language-features') || extensionPath.endsWith('html-language-features') || extensionPath.endsWith('json-language-features')) { + return [ + path.join(extensionPath, 'client'), + path.join(extensionPath, 'server'), + ]; + } + + return [extensionPath]; +} diff --git a/extensions/css-language-features/.vscodeignore b/extensions/css-language-features/.vscodeignore index f6411e76fdb..c3f4d9fe3dc 100644 --- a/extensions/css-language-features/.vscodeignore +++ b/extensions/css-language-features/.vscodeignore @@ -6,16 +6,12 @@ client/src/** server/src/** client/out/** server/out/** -client/tsconfig.json -server/tsconfig.json +**/tsconfig*.json server/test/** server/bin/** server/build/** server/package-lock.json server/.npmignore package-lock.json -server/extension.webpack.config.js -extension.webpack.config.js -server/extension-browser.webpack.config.js -extension-browser.webpack.config.js +**/esbuild*.mts CONTRIBUTING.md diff --git a/extensions/css-language-features/client/tsconfig.browser.json b/extensions/css-language-features/client/tsconfig.browser.json new file mode 100644 index 00000000000..d10ec3ba371 --- /dev/null +++ b/extensions/css-language-features/client/tsconfig.browser.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "exclude": [ + "./src/node/**", + "./src/test/**" + ] +} diff --git a/extensions/css-language-features/esbuild.browser.mts b/extensions/css-language-features/esbuild.browser.mts new file mode 100644 index 00000000000..83ed767ec5f --- /dev/null +++ b/extensions/css-language-features/esbuild.browser.mts @@ -0,0 +1,36 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +import * as path from 'node:path'; +import { run } from '../esbuild-extension-common.mts'; + +const extensionRoot = import.meta.dirname; + +await Promise.all([ + // Build client + run({ + platform: 'browser', + entryPoints: { + 'cssClientMain': path.join(extensionRoot, 'client', 'src', 'browser', 'cssClientMain.ts'), + }, + srcDir: path.join(extensionRoot, 'client', 'src'), + outdir: path.join(extensionRoot, 'client', 'dist', 'browser'), + additionalOptions: { + tsconfig: path.join(extensionRoot, 'client', 'tsconfig.browser.json'), + }, + }, process.argv), + + // Build server + run({ + platform: 'browser', + entryPoints: { + 'cssServerMain': path.join(extensionRoot, 'server', 'src', 'browser', 'cssServerWorkerMain.ts'), + }, + srcDir: path.join(extensionRoot, 'server', 'src'), + outdir: path.join(extensionRoot, 'server', 'dist', 'browser'), + additionalOptions: { + tsconfig: path.join(extensionRoot, 'server', 'tsconfig.browser.json'), + }, + }, process.argv), +]); diff --git a/extensions/css-language-features/esbuild.mts b/extensions/css-language-features/esbuild.mts new file mode 100644 index 00000000000..cef9c7455dc --- /dev/null +++ b/extensions/css-language-features/esbuild.mts @@ -0,0 +1,36 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +import * as path from 'node:path'; +import { run } from '../esbuild-extension-common.mts'; + +const extensionRoot = import.meta.dirname; + +await Promise.all([ + // Build client + run({ + platform: 'node', + entryPoints: { + 'cssClientMain': path.join(extensionRoot, 'client', 'src', 'node', 'cssClientMain.ts'), + }, + srcDir: path.join(extensionRoot, 'client', 'src'), + outdir: path.join(extensionRoot, 'client', 'dist', 'node'), + additionalOptions: { + tsconfig: path.join(extensionRoot, 'client', 'tsconfig.json'), + }, + }, process.argv), + + // Build server + run({ + platform: 'node', + entryPoints: { + 'cssServerMain': path.join(extensionRoot, 'server', 'src', 'node', 'cssServerNodeMain.ts'), + }, + srcDir: path.join(extensionRoot, 'server', 'src'), + outdir: path.join(extensionRoot, 'server', 'dist', 'node'), + additionalOptions: { + tsconfig: path.join(extensionRoot, 'server', 'tsconfig.json'), + }, + }, process.argv), +]); diff --git a/extensions/css-language-features/extension-browser.webpack.config.js b/extensions/css-language-features/extension-browser.webpack.config.js deleted file mode 100644 index ea4a69dd9c1..00000000000 --- a/extensions/css-language-features/extension-browser.webpack.config.js +++ /dev/null @@ -1,18 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ -// @ts-check -import { browser as withBrowserDefaults } from '../shared.webpack.config.mjs'; -import path from 'path'; - -export default withBrowserDefaults({ - context: path.join(import.meta.dirname, 'client'), - entry: { - extension: './src/browser/cssClientMain.ts' - }, - output: { - filename: 'cssClientMain.js', - path: path.join(import.meta.dirname, 'client', 'dist', 'browser') - } -}); diff --git a/extensions/css-language-features/extension.webpack.config.js b/extensions/css-language-features/extension.webpack.config.js deleted file mode 100644 index d8a29c8797d..00000000000 --- a/extensions/css-language-features/extension.webpack.config.js +++ /dev/null @@ -1,18 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ -// @ts-check -import withDefaults from '../shared.webpack.config.mjs'; -import path from 'path'; - -export default withDefaults({ - context: path.join(import.meta.dirname, 'client'), - entry: { - extension: './src/node/cssClientMain.ts', - }, - output: { - filename: 'cssClientMain.js', - path: path.join(import.meta.dirname, 'client', 'dist', 'node') - } -}); diff --git a/extensions/css-language-features/server/extension-browser.webpack.config.js b/extensions/css-language-features/server/extension-browser.webpack.config.js deleted file mode 100644 index 131d293a7c5..00000000000 --- a/extensions/css-language-features/server/extension-browser.webpack.config.js +++ /dev/null @@ -1,20 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ -// @ts-check -import { browser as withBrowserDefaults } from '../../shared.webpack.config.mjs'; -import path from 'path'; - -export default withBrowserDefaults({ - context: import.meta.dirname, - entry: { - extension: './src/browser/cssServerWorkerMain.ts', - }, - output: { - filename: 'cssServerMain.js', - path: path.join(import.meta.dirname, 'dist', 'browser'), - libraryTarget: 'var', - library: 'serverExportVar' - } -}); diff --git a/extensions/css-language-features/server/extension.webpack.config.js b/extensions/css-language-features/server/extension.webpack.config.js deleted file mode 100644 index 5f07bd8f0a1..00000000000 --- a/extensions/css-language-features/server/extension.webpack.config.js +++ /dev/null @@ -1,18 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ -// @ts-check -import withDefaults from '../../shared.webpack.config.mjs'; -import path from 'path'; - -export default withDefaults({ - context: path.join(import.meta.dirname), - entry: { - extension: './src/node/cssServerNodeMain.ts', - }, - output: { - filename: 'cssServerMain.js', - path: path.join(import.meta.dirname, 'dist', 'node'), - } -}); diff --git a/extensions/css-language-features/server/tsconfig.browser.json b/extensions/css-language-features/server/tsconfig.browser.json new file mode 100644 index 00000000000..d10ec3ba371 --- /dev/null +++ b/extensions/css-language-features/server/tsconfig.browser.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "exclude": [ + "./src/node/**", + "./src/test/**" + ] +}