From 87780c04c8a35775af9ce9108709c1d328bd03f3 Mon Sep 17 00:00:00 2001 From: Connor Peet Date: Mon, 1 Apr 2024 11:15:25 -0700 Subject: [PATCH] eng: fix CSS tooling crashes watch task (#209278) Get rid of the gulp-postcss plugin and just implement our own, I couldn't get it to work. Fixes #207827 --- build/lib/compilation.js | 4 +-- build/lib/compilation.ts | 4 +-- build/lib/optimize.js | 4 +-- build/lib/optimize.ts | 4 +-- build/lib/postcss.js | 36 +++++++++++++++++++++++++++ build/lib/postcss.ts | 36 +++++++++++++++++++++++++++ build/package.json | 1 - build/yarn.lock | 8 ------ package.json | 2 -- yarn.lock | 54 +--------------------------------------- 10 files changed, 81 insertions(+), 72 deletions(-) create mode 100644 build/lib/postcss.js create mode 100644 build/lib/postcss.ts diff --git a/build/lib/compilation.js b/build/lib/compilation.js index 85cd722dbf3..b44cbefe78a 100644 --- a/build/lib/compilation.js +++ b/build/lib/compilation.js @@ -23,6 +23,7 @@ const ts = require("typescript"); const File = require("vinyl"); const task = require("./task"); const index_1 = require("./mangle/index"); +const postcss_1 = require("./postcss"); const watch = require('./watch'); // --- gulp-tsb: compile and transpile -------------------------------- const reporter = (0, reporter_1.createReporter)(); @@ -60,13 +61,12 @@ function createCompile(src, build, emitError, transpileOnly) { const isRuntimeJs = (f) => f.path.endsWith('.js') && !f.path.includes('fixtures'); const isCSS = (f) => f.path.endsWith('.css') && !f.path.includes('fixtures'); const noDeclarationsFilter = util.filter(data => !(/\.d\.ts$/.test(data.path))); - const postcss = require('gulp-postcss'); 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, postcss([postcssNesting()]))) + .pipe(util.$if(isCSS, (0, postcss_1.gulpPostcss)([postcssNesting()], err => reporter(String(err))))) .pipe(tsFilter) .pipe(util.loadSourcemaps()) .pipe(compilation(token)) diff --git a/build/lib/compilation.ts b/build/lib/compilation.ts index 94bfe6e832d..b88d0d29003 100644 --- a/build/lib/compilation.ts +++ b/build/lib/compilation.ts @@ -19,6 +19,7 @@ import * as File from 'vinyl'; import * as task from './task'; import { Mangler } from './mangle/index'; import { RawSourceMap } from 'source-map'; +import { gulpPostcss } from './postcss'; const watch = require('./watch'); @@ -67,14 +68,13 @@ function createCompile(src: string, build: boolean, emitError: boolean, transpil const isCSS = (f: File) => f.path.endsWith('.css') && !f.path.includes('fixtures'); const noDeclarationsFilter = util.filter(data => !(/\.d\.ts$/.test(data.path))); - const postcss = require('gulp-postcss') as typeof import('gulp-postcss'); 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, postcss([postcssNesting()]))) + .pipe(util.$if(isCSS, gulpPostcss([postcssNesting()], err => reporter(String(err))))) .pipe(tsFilter) .pipe(util.loadSourcemaps()) .pipe(compilation(token)) diff --git a/build/lib/optimize.js b/build/lib/optimize.js index 237f2bc20e8..d48235ebf15 100644 --- a/build/lib/optimize.js +++ b/build/lib/optimize.js @@ -21,6 +21,7 @@ const bundle = require("./bundle"); const i18n_1 = require("./i18n"); const stats_1 = require("./stats"); const util = require("./util"); +const postcss_1 = require("./postcss"); const REPO_ROOT_PATH = path.join(__dirname, '../..'); function log(prefix, message) { fancyLog(ansiColors.cyan('[' + prefix + ']'), message); @@ -242,7 +243,6 @@ function minifyTask(src, sourceMapBaseUrl) { const sourceMappingURL = sourceMapBaseUrl ? ((f) => `${sourceMapBaseUrl}/${f.relative}.map`) : undefined; return cb => { const cssnano = require('cssnano'); - const postcss = require('gulp-postcss'); const sourcemaps = require('gulp-sourcemaps'); const svgmin = require('gulp-svgmin'); const jsFilter = filter('**/*.js', { restore: true }); @@ -271,7 +271,7 @@ function minifyTask(src, sourceMapBaseUrl) { cb(undefined, f); } }, cb); - }), jsFilter.restore, cssFilter, postcss([cssnano({ preset: 'default' })]), cssFilter.restore, svgFilter, svgmin(), svgFilter.restore, sourcemaps.mapSources((sourcePath) => { + }), jsFilter.restore, cssFilter, (0, postcss_1.gulpPostcss)([cssnano({ preset: 'default' })]), cssFilter.restore, svgFilter, svgmin(), svgFilter.restore, sourcemaps.mapSources((sourcePath) => { if (sourcePath === 'bootstrap-fork.js') { return 'bootstrap-fork.orig.js'; } diff --git a/build/lib/optimize.ts b/build/lib/optimize.ts index aebe22a7e0a..5b6dee9bf65 100644 --- a/build/lib/optimize.ts +++ b/build/lib/optimize.ts @@ -16,6 +16,7 @@ import * as bundle from './bundle'; import { Language, processNlsFiles } from './i18n'; import { createStatsStream } from './stats'; import * as util from './util'; +import { gulpPostcss } from './postcss'; const REPO_ROOT_PATH = path.join(__dirname, '../..'); @@ -381,7 +382,6 @@ export function minifyTask(src: string, sourceMapBaseUrl?: string): (cb: any) => return cb => { const cssnano = require('cssnano') as typeof import('cssnano'); - const postcss = require('gulp-postcss') as typeof import('gulp-postcss'); const sourcemaps = require('gulp-sourcemaps') as typeof import('gulp-sourcemaps'); const svgmin = require('gulp-svgmin') as typeof import('gulp-svgmin'); @@ -420,7 +420,7 @@ export function minifyTask(src: string, sourceMapBaseUrl?: string): (cb: any) => }), jsFilter.restore, cssFilter, - postcss([cssnano({ preset: 'default' })]), + gulpPostcss([cssnano({ preset: 'default' })]), cssFilter.restore, svgFilter, svgmin(), diff --git a/build/lib/postcss.js b/build/lib/postcss.js new file mode 100644 index 00000000000..356015ab159 --- /dev/null +++ b/build/lib/postcss.js @@ -0,0 +1,36 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.gulpPostcss = gulpPostcss; +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +const postcss = require("postcss"); +const es = require("event-stream"); +function gulpPostcss(plugins, handleError) { + const instance = postcss(plugins); + return es.map((file, callback) => { + if (file.isNull()) { + return callback(null, file); + } + if (file.isStream()) { + return callback(new Error('Streaming not supported')); + } + instance + .process(file.contents.toString(), { from: file.path }) + .then((result) => { + file.contents = Buffer.from(result.css); + callback(null, file); + }) + .catch((error) => { + if (handleError) { + handleError(error); + callback(); + } + else { + callback(error); + } + }); + }); +} +//# sourceMappingURL=postcss.js.map \ No newline at end of file diff --git a/build/lib/postcss.ts b/build/lib/postcss.ts new file mode 100644 index 00000000000..cf3121e221e --- /dev/null +++ b/build/lib/postcss.ts @@ -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 postcss from 'postcss'; +import * as File from 'vinyl'; +import * as es from 'event-stream'; + +export function gulpPostcss(plugins: postcss.AcceptedPlugin[], handleError?: (err: Error) => void) { + const instance = postcss(plugins); + + return es.map((file: File, callback: (error?: any, file?: any) => void) => { + if (file.isNull()) { + return callback(null, file); + } + + if (file.isStream()) { + return callback(new Error('Streaming not supported')); + } + + instance + .process(file.contents.toString(), { from: file.path }) + .then((result) => { + file.contents = Buffer.from(result.css); + callback(null, file); + }) + .catch((error) => { + if (handleError) { + handleError(error); + callback(); + } else { + callback(error); + } + }); + }); +} diff --git a/build/package.json b/build/package.json index b4ea8d06993..a92ae344d67 100644 --- a/build/package.json +++ b/build/package.json @@ -19,7 +19,6 @@ "@types/gulp-filter": "^3.0.32", "@types/gulp-gzip": "^0.0.31", "@types/gulp-json-editor": "^2.2.31", - "@types/gulp-postcss": "^8.0.6", "@types/gulp-rename": "^0.0.33", "@types/gulp-sourcemaps": "^0.0.32", "@types/mime": "0.0.29", diff --git a/build/yarn.lock b/build/yarn.lock index a0aca2e9595..b7f69b1140d 100644 --- a/build/yarn.lock +++ b/build/yarn.lock @@ -489,14 +489,6 @@ "@types/js-beautify" "*" "@types/node" "*" -"@types/gulp-postcss@^8.0.6": - version "8.0.6" - resolved "https://registry.yarnpkg.com/@types/gulp-postcss/-/gulp-postcss-8.0.6.tgz#d314c785876c8a1779154ba1d152125082ecde0f" - integrity sha512-mjGEmTvurqRHFeJQnrgtMC9GtKNkI2+56n92zIzff5UFr2jUfilw1elKRxS7bK0FYRvuEcnMX9JH0AUpCxBrpg== - dependencies: - "@types/node" "*" - "@types/vinyl" "*" - "@types/gulp-rename@^0.0.33": version "0.0.33" resolved "https://registry.yarnpkg.com/@types/gulp-rename/-/gulp-rename-0.0.33.tgz#38d146e97786569f74f5391a1b1f9b5198674b6c" diff --git a/package.json b/package.json index bebbaa72027..5d810c2fd18 100644 --- a/package.json +++ b/package.json @@ -113,7 +113,6 @@ "@types/cookie": "^0.3.3", "@types/debug": "^4.1.5", "@types/graceful-fs": "4.1.2", - "@types/gulp-postcss": "^8.0.6", "@types/gulp-svgmin": "^1.2.1", "@types/http-proxy-agent": "^2.0.1", "@types/kerberos": "^1.1.2", @@ -171,7 +170,6 @@ "gulp-gzip": "^1.4.2", "gulp-json-editor": "^2.5.0", "gulp-plumber": "^1.2.0", - "gulp-postcss": "^9.1.0", "gulp-rename": "^1.2.0", "gulp-replace": "^0.5.4", "gulp-sourcemaps": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index 919c25853dd..8a28cf43776 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1051,14 +1051,6 @@ dependencies: "@types/node" "*" -"@types/gulp-postcss@^8.0.6": - version "8.0.6" - resolved "https://registry.yarnpkg.com/@types/gulp-postcss/-/gulp-postcss-8.0.6.tgz#d314c785876c8a1779154ba1d152125082ecde0f" - integrity sha512-mjGEmTvurqRHFeJQnrgtMC9GtKNkI2+56n92zIzff5UFr2jUfilw1elKRxS7bK0FYRvuEcnMX9JH0AUpCxBrpg== - dependencies: - "@types/node" "*" - "@types/vinyl" "*" - "@types/gulp-svgmin@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@types/gulp-svgmin/-/gulp-svgmin-1.2.1.tgz#e18f344ea09560554652406b37e1dc3253a6bda2" @@ -4139,13 +4131,6 @@ fancy-log@^1.3.2, fancy-log@^1.3.3: parse-node-version "^1.0.0" time-stamp "^1.0.0" -fancy-log@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-2.0.0.tgz#cad207b8396d69ae4796d74d17dff5f68b2f7343" - integrity sha512-9CzxZbACXMUXW13tS0tI8XsGGmxWzO2DmYrGuBJOJ8k8q2K7hwfJA5qHjuPPe8wtsco33YR9wc+Rlr5wYFvhSA== - dependencies: - color-support "^1.1.3" - fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" @@ -4973,16 +4958,6 @@ gulp-plumber@^1.2.0: plugin-error "^0.1.2" through2 "^2.0.3" -gulp-postcss@^9.1.0: - version "9.1.0" - resolved "https://registry.yarnpkg.com/gulp-postcss/-/gulp-postcss-9.1.0.tgz#0d317134d40d9565f265bd32c7f71605a54cadd8" - integrity sha512-a843mcKPApfeI987uqQbc8l50xXeWIXBsiVvYxtCI5XtVAMzTi/HnU2qzQpGwkB/PAOfsLV8OsqDv2iJZ9qvdw== - dependencies: - fancy-log "^2.0.0" - plugin-error "^2.0.1" - postcss-load-config "^5.0.0" - vinyl-sourcemaps-apply "^0.2.1" - gulp-rename@1.2.2, gulp-rename@^1.2.0: version "1.2.2" resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.2.2.tgz#3ad4428763f05e2764dec1c67d868db275687817" @@ -7603,13 +7578,6 @@ plugin-error@^1.0.0, plugin-error@^1.0.1: arr-union "^3.1.0" extend-shallow "^3.0.2" -plugin-error@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-2.0.1.tgz#f2ac92bac8c85e3e23492d76d0c3ca12f30eb00b" - integrity sha512-zMakqvIDyY40xHOvzXka0kUvf40nYIuwRE8dWhti2WtjQZ31xAgBZBhxsK7vK3QbRXS1Xms/LO7B5cuAsfB2Gg== - dependencies: - ansi-colors "^1.0.1" - posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -7661,14 +7629,6 @@ postcss-discard-overridden@^6.0.1: resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-6.0.1.tgz#c63c559237758d74bc505452393a64dda9b19ef4" integrity sha512-qs0ehZMMZpSESbRkw1+inkf51kak6OOzNRaoLd/U7Fatp0aN2HQ1rxGOrJvYcRAN9VpX8kUF13R2ofn8OlvFVA== -postcss-load-config@^5.0.0: - version "5.0.2" - resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-5.0.2.tgz#3d4261d616428e3d6e41c8236c3e456c0f49266f" - integrity sha512-Q8QR3FYbqOKa0bnC1UQ2bFq9/ulHX5Bi34muzitMr8aDtUelO5xKeJEYC/5smE0jNE9zdB/NBnOwXKexELbRlw== - dependencies: - lilconfig "^3.0.0" - yaml "^2.3.4" - postcss-merge-longhand@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-6.0.2.tgz#cd4e83014851da59545e9a906b245615550f4064" @@ -8775,7 +8735,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@^0.5.1, source-map@^0.5.6: +source-map@^0.5.6: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= @@ -9885,13 +9845,6 @@ vinyl-sourcemap@^1.1.0: remove-bom-buffer "^3.0.0" vinyl "^2.0.0" -vinyl-sourcemaps-apply@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705" - integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU= - dependencies: - source-map "^0.5.1" - vinyl@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-1.2.0.tgz#5c88036cf565e5df05558bfc911f8656df218884" @@ -10315,11 +10268,6 @@ yallist@^4.0.0: resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== -yaml@^2.3.4: - version "2.3.4" - resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.4.tgz#53fc1d514be80aabf386dc6001eb29bf3b7523b2" - integrity sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA== - yargs-parser@20.2.4: version "20.2.4" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"