eng: allow css nesting via postcss plugin (microsoft#203726)

connor4312 · web-flow · commit 0f323440e5e6 · 2024-01-29T11:19:37.000-08:00
* eng: allow css nesting via postcss plugin

CSS nesting has landed in most browsers at this point, but we don't want
to break users who are still stuck on old browser (mainly older iOS
devices.) This PR adds a postcss plugin to the build process that
de-nests nested CSS.

The plugin required a newer version of postcss as well, so I have
updated that and a couple other modules to their latest versions.

* update build's package.json versions too
diff --git a/build/lib/compilation.js b/build/lib/compilation.js
diff --git a/build/lib/compilation.ts b/build/lib/compilation.ts
@@ -64,12 +64,17 @@ function createCompile(src: string, build: boolean, emitError: boolean, transpil
 		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 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(tsFilter)
 			.pipe(util.loadSourcemaps())
 			.pipe(compilation(token))
diff --git a/build/package.json b/build/package.json
@@ -9,7 +9,6 @@
     "@electron/get": "^2.0.0",
     "@types/ansi-colors": "^3.2.0",
     "@types/byline": "^4.2.32",
-    "@types/cssnano": "^4.0.0",
     "@types/debounce": "^1.0.0",
     "@types/debug": "^4.1.5",
     "@types/fancy-log": "^1.3.0",
@@ -20,7 +19,7 @@
     "@types/gulp-filter": "^3.0.32",
     "@types/gulp-gzip": "^0.0.31",
     "@types/gulp-json-editor": "^2.2.31",
-    "@types/gulp-postcss": "^8.0.0",
+    "@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
@@ -407,13 +407,6 @@
     "@types/events" "*"
     "@types/node" "*"
 
-"@types/cssnano@^4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@types/cssnano/-/cssnano-4.0.1.tgz#67fa912753d80973a016e7684a47fedf338aacff"
-  integrity sha512-hGOroxRTBkYl5gSBRJOffhV4+io+Y2bFX1VP7LgKEVHJt/LPPJaWUIuDAz74Vlp7l7hCDZfaDi7iPxwNwuVA4Q==
-  dependencies:
-    postcss "5 - 7"
-
 "@types/debounce@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.0.0.tgz#417560200331e1bb84d72da85391102c2fcd61b7"
@@ -491,10 +484,10 @@
     "@types/js-beautify" "*"
     "@types/node" "*"
 
-"@types/gulp-postcss@^8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@types/gulp-postcss/-/gulp-postcss-8.0.0.tgz#f7e86d45e4999fd43e6d8c55b00504c88a67ad61"
-  integrity sha512-AVgjA03bpkYONKZpzuJviB9PzaNbDzrovYPbenj8/XxivUc35C/dIzJanyaQv7CFqfLLPLsqSalmtP3GLq6iag==
+"@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" "*"
@@ -2201,15 +2194,6 @@ plugin-error@1.0.1, plugin-error@^1.0.1:
     arr-union "^3.1.0"
     extend-shallow "^3.0.2"
 
-"postcss@5 - 7":
-  version "7.0.36"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
-  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
 prebuild-install@^7.0.1, prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
@@ -2439,7 +2423,7 @@ simple-get@^4.0.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
-source-map@0.6.1, source-map@^0.6.1:
+source-map@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -2514,13 +2498,6 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
diff --git a/package.json b/package.json
@@ -110,10 +110,9 @@
     "@playwright/test": "^1.40.1",
     "@swc/core": "1.3.62",
     "@types/cookie": "^0.3.3",
-    "@types/cssnano": "^4.0.0",
     "@types/debug": "^4.1.5",
     "@types/graceful-fs": "4.1.2",
-    "@types/gulp-postcss": "^8.0.0",
+    "@types/gulp-postcss": "^8.0.6",
     "@types/gulp-svgmin": "^1.2.1",
     "@types/http-proxy-agent": "^2.0.1",
     "@types/kerberos": "^1.1.2",
@@ -146,8 +145,8 @@
     "chromium-pickle-js": "^0.2.0",
     "cookie": "^0.4.0",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "cssnano": "^4.1.11",
+    "css-loader": "^6.9.1",
+    "cssnano": "^6.0.3",
     "debounce": "^1.0.0",
     "deemon": "^1.8.0",
     "electron": "27.2.3",
@@ -171,7 +170,7 @@
     "gulp-gzip": "^1.4.2",
     "gulp-json-editor": "^2.5.0",
     "gulp-plumber": "^1.2.0",
-    "gulp-postcss": "^9.0.0",
+    "gulp-postcss": "^9.1.0",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.5.4",
     "gulp-sourcemaps": "^3.0.0",
@@ -197,6 +196,8 @@
     "opn": "^6.0.0",
     "p-all": "^1.0.0",
     "path-browserify": "^1.0.1",
+    "postcss": "^8.4.33",
+    "postcss-nesting": "^12.0.2",
     "pump": "^1.0.1",
     "rcedit": "^1.1.0",
     "rimraf": "^2.2.8",
diff --git a/src/vs/workbench/contrib/testing/browser/media/testing.css b/src/vs/workbench/contrib/testing/browser/media/testing.css
@@ -5,28 +5,30 @@
 
 /** -- icons */
 
-.monaco-workbench .codicon-testing-error-icon {
-	color: var(--vscode-testing-iconErrored);
-}
-
-.monaco-workbench .codicon-testing-failed-icon {
-	color: var(--vscode-testing-iconFailed);
-}
-
-.monaco-workbench .codicon-testing-passed-icon {
-	color: var(--vscode-testing-iconPassed);
-}
-
-.monaco-workbench .codicon-testing-queued-icon {
-	color: var(--vscode-testing-iconQueued);
-}
-
-.monaco-workbench .codicon-testing-skipped-icon {
-	color: var(--vscode-testing-iconSkipped);
-}
-
-.monaco-workbench .codicon-testing-unset-icon {
-	color: var(--vscode-testing-iconUnset);
+.monaco-workbench {
+	.codicon-testing-error-icon {
+		color: var(--vscode-testing-iconErrored);
+	}
+
+	.codicon-testing-failed-icon {
+		color: var(--vscode-testing-iconFailed);
+	}
+
+	.codicon-testing-passed-icon {
+		color: var(--vscode-testing-iconPassed);
+	}
+
+	.codicon-testing-queued-icon {
+		color: var(--vscode-testing-iconQueued);
+	}
+
+	.codicon-testing-skipped-icon {
+		color: var(--vscode-testing-iconSkipped);
+	}
+
+	.codicon-testing-unset-icon {
+		color: var(--vscode-testing-iconUnset);
+	}
 }
 
 /** -- explorer */
diff --git a/yarn.lock b/yarn.lock
