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.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))

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(),

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);
+ }
+ });
+ });
+}

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",

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"

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",

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"
-
 [email protected], 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 @@ [email protected], 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==
-
 [email protected]:
  version "20.2.4"
  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"