debt - use esbuild for CSS minification (microsoft#250820)

Author: bpasero

build/gulpfile.reh.js

@@ -257,7 +257,7 @@ function packageTask(type, platform, arch, sourceFolderName, destinationFolderNa
 		const src = gulp.src(sourceFolderName + '/**', { base: '.' })
 			.pipe(rename(function (path) { path.dirname = path.dirname.replace(new RegExp('^' + sourceFolderName), 'out'); }))
 			.pipe(util.setExecutableBit(['**/*.sh']))
-			.pipe(filter(['**', '!**/*.js.map']));
+			.pipe(filter(['**', '!**/*.{js,css}.map']));
 
 		const workspaceExtensionPoints = ['debuggers', 'jsonValidation'];
 		const isUIExtension = (manifest) => {
@@ -298,7 +298,7 @@ function packageTask(type, platform, arch, sourceFolderName, destinationFolderNa
 		const extensions = gulp.src(extensionPaths, { base: '.build', dot: true });
 		const extensionsCommonDependencies = gulp.src('.build/extensions/node_modules/**', { base: '.build', dot: true });
 		const sources = es.merge(src, extensions, extensionsCommonDependencies)
-			.pipe(filter(['**', '!**/*.js.map'], { dot: true }));
+			.pipe(filter(['**', '!**/*.{js,css}.map'], { dot: true }));
 
 		let version = packageJson.version;
 		const quality = product.quality;
@@ -333,7 +333,7 @@ function packageTask(type, platform, arch, sourceFolderName, destinationFolderNa
 		const dependenciesSrc = productionDependencies.map(d => path.relative(REPO_ROOT, d)).map(d => [`${d}/**`, `!${d}/**/{test,tests}/**`, `!${d}/.bin/**`]).flat();
 		const deps = gulp.src(dependenciesSrc, { base: 'remote', dot: true })
 			// filter out unnecessary files, no source maps in server build
-			.pipe(filter(['**', '!**/package-lock.json', '!**/*.js.map']))
+			.pipe(filter(['**', '!**/package-lock.json', '!**/*.{js,css}.map']))
 			.pipe(util.cleanNodeModules(path.join(__dirname, '.moduleignore')))
 			.pipe(util.cleanNodeModules(path.join(__dirname, `.moduleignore.${process.platform}`)))
 			.pipe(jsFilter)

build/gulpfile.vscode.js

@@ -244,7 +244,7 @@ function packageTask(platform, arch, sourceFolderName, destinationFolderName, op
 		const extensions = gulp.src(['.build/extensions/**', ...platformSpecificBuiltInExtensionsExclusions], { base: '.build', dot: true });
 
 		const sources = es.merge(src, extensions)
-			.pipe(filter(['**', '!**/*.js.map'], { dot: true }));
+			.pipe(filter(['**', '!**/*.{js,css}.map'], { dot: true }));
 
 		let version = packageJson.version;
 		const quality = product.quality;
@@ -289,7 +289,7 @@ function packageTask(platform, arch, sourceFolderName, destinationFolderName, op
 		const dependenciesSrc = productionDependencies.map(d => path.relative(root, d)).map(d => [`${d}/**`, `!${d}/**/{test,tests}/**`]).flat().concat('!**/*.mk');
 
 		const deps = gulp.src(dependenciesSrc, { base: '.', dot: true })
-			.pipe(filter(['**', `!**/${config.version}/**`, '!**/bin/darwin-arm64-87/**', '!**/package-lock.json', '!**/yarn.lock', '!**/*.js.map']))
+			.pipe(filter(['**', `!**/${config.version}/**`, '!**/bin/darwin-arm64-87/**', '!**/package-lock.json', '!**/yarn.lock', '!**/*.{js,css}.map']))
 			.pipe(util.cleanNodeModules(path.join(__dirname, '.moduleignore')))
 			.pipe(util.cleanNodeModules(path.join(__dirname, `.moduleignore.${process.platform}`)))
 			.pipe(jsFilter)

build/gulpfile.vscode.web.js

@@ -152,7 +152,7 @@ function packageTask(sourceFolderName, destinationFolderName) {
 		const loader = gulp.src('build/loader.min', { base: 'build', dot: true }).pipe(rename('out/vs/loader.js')); // TODO@esm remove line when we stop supporting web-amd-esm-bridge
 
 		const sources = es.merge(src, extensions, loader)
-			.pipe(filter(['**', '!**/*.js.map'], { dot: true }))
+			.pipe(filter(['**', '!**/*.{js,css}.map'], { dot: true }))
 			// TODO@esm remove me once we stop supporting our web-esm-bridge
 			.pipe(es.through(function (file) {
 				if (file.relative === 'out/vs/workbench/workbench.web.main.internal.css') {

build/lib/compilation.js

@@ -18,7 +18,6 @@ import File from 'vinyl';
 import * as task from './task';
 import { Mangler } from './mangle/index';
 import { RawSourceMap } from 'source-map';
-import { gulpPostcss } from './postcss';
 import ts = require('typescript');
 const watch = require('./watch');
 
@@ -72,16 +71,12 @@ export function createCompile(src: string, { build, emitError, transpileOnly, pr
 		const tsFilter = util.filter(data => /\.ts$/.test(data.path));
 		const isUtf8Test = (f: File) => /(\/|\\)test(\/|\\).*utf8/.test(f.path);
 		const isRuntimeJs = (f: File) => f.path.endsWith('.js') && !f.path.includes('fixtures');
-		const isCSS = (f: File) => f.path.endsWith('.css') && !f.path.includes('fixtures');
 		const noDeclarationsFilter = util.filter(data => !(/\.d\.ts$/.test(data.path)));
 
-		const postcssNesting = require('postcss-nesting');
-
 		const input = es.through();
 		const output = input
 			.pipe(util.$if(isUtf8Test, bom())) // this is required to preserve BOM in test files that loose it otherwise
 			.pipe(util.$if(!build && isRuntimeJs, util.appendOwnPathSourceURL()))
-			.pipe(util.$if(isCSS, gulpPostcss([postcssNesting()], err => reporter(String(err)))))
 			.pipe(tsFilter)
 			.pipe(util.loadSourcemaps())
 			.pipe(compilation(token))

build/lib/compilation.ts

@@ -280,8 +280,6 @@ function isNameTakenInFile(node: ts.Node, name: string): boolean {
 }
 
 const skippedExportMangledFiles = [
-	// Build
-	'css.build',
 
 	// Monaco
 	'editorCommon',

build/lib/mangle/index.js

@@ -11,7 +11,6 @@ import fs from 'fs';
 import pump from 'pump';
 import VinylFile from 'vinyl';
 import * as bundle from './bundle';
-import { gulpPostcss } from './postcss';
 import esbuild from 'esbuild';
 import sourcemaps from 'gulp-sourcemaps';
 import fancyLog from 'fancy-log';
@@ -213,16 +212,14 @@ export function minifyTask(src: string, sourceMapBaseUrl?: string): (cb: any) =>
 	const sourceMappingURL = sourceMapBaseUrl ? ((f: any) => `${sourceMapBaseUrl}/${f.relative}.map`) : undefined;
 
 	return cb => {
-		const cssnano = require('cssnano') as typeof import('cssnano');
 		const svgmin = require('gulp-svgmin') as typeof import('gulp-svgmin');
 
-		const jsFilter = filter('**/*.js', { restore: true });
-		const cssFilter = filter('**/*.css', { restore: true });
+		const esbuildFilter = filter('**/*.{js,css}', { restore: true });
 		const svgFilter = filter('**/*.svg', { restore: true });
 
 		pump(
 			gulp.src([src + '/**', '!' + src + '/**/*.map']),
-			jsFilter,
+			esbuildFilter,
 			sourcemaps.init({ loadMaps: true }),
 			es.map((f: any, cb) => {
 				esbuild.build({
@@ -233,12 +230,12 @@ export function minifyTask(src: string, sourceMapBaseUrl?: string): (cb: any) =>
 					packages: 'external', // "external all the things", see https://esbuild.github.io/api/#packages
 					platform: 'neutral', // makes esm
 					target: ['es2022'],
-					write: false
+					write: false,
 				}).then(res => {
-					const jsFile = res.outputFiles.find(f => /\.js$/.test(f.path))!;
-					const sourceMapFile = res.outputFiles.find(f => /\.js\.map$/.test(f.path))!;
+					const jsOrCSSFile = res.outputFiles.find(f => /\.(js|css)$/.test(f.path))!;
+					const sourceMapFile = res.outputFiles.find(f => /\.(js|css)\.map$/.test(f.path))!;
 
-					const contents = Buffer.from(jsFile.contents);
+					const contents = Buffer.from(jsOrCSSFile.contents);
 					const unicodeMatch = contents.toString().match(/[^\x00-\xFF]+/g);
 					if (unicodeMatch) {
 						cb(new Error(`Found non-ascii character ${unicodeMatch[0]} in the minified output of ${f.path}. Non-ASCII characters in the output can cause performance problems when loading. Please review if you have introduced a regular expression that esbuild is not automatically converting and convert it to using unicode escape sequences.`));
@@ -250,10 +247,7 @@ export function minifyTask(src: string, sourceMapBaseUrl?: string): (cb: any) =>
 					}
 				}, cb);
 			}),
-			jsFilter.restore,
-			cssFilter,
-			gulpPostcss([cssnano({ preset: 'default' })]),
-			cssFilter.restore,
+			esbuildFilter.restore,
 			svgFilter,
 			svgmin(),
 			svgFilter.restore,