lint - report layer issues in CSS (microsoft#269671)

Author: bpasero

build/hygiene.js

@@ -23,9 +23,9 @@ const copyrightHeaderLines = [
 
 /**
  * @param {string[] | NodeJS.ReadWriteStream} some
- * @param {boolean} linting
+ * @param {boolean} runEslint
  */
-function hygiene(some, linting = true) {
+function hygiene(some, runEslint = true) {
 	const eslint = require('./gulp-eslint');
 	const gulpstylelint = require('./stylelint');
 	const formatter = require('./lib/formatter');
@@ -156,7 +156,7 @@ function hygiene(some, linting = true) {
 	const unicodeFilterStream = filter(unicodeFilter, { restore: true });
 
 	const result = input
-		.pipe(filter((f) => !f.stat.isDirectory()))
+		.pipe(filter((f) => Boolean(f.stat && !f.stat.isDirectory())))
 		.pipe(snapshotFilter)
 		.pipe(yarnLockFilter)
 		.pipe(productJsonFilter)
@@ -175,7 +175,7 @@ function hygiene(some, linting = true) {
 		result.pipe(filter(tsFormattingFilter)).pipe(formatting)
 	];
 
-	if (linting) {
+	if (runEslint) {
 		streams.push(
 			result
 				.pipe(filter(eslintFilter))
@@ -186,18 +186,19 @@ function hygiene(some, linting = true) {
 					})
 				)
 		);
-		streams.push(
-			result.pipe(filter(stylelintFilter)).pipe(gulpstylelint(((message, isError) => {
-				if (isError) {
-					console.error(message);
-					errorCount++;
-				} else {
-					console.warn(message);
-				}
-			})))
-		);
 	}
 
+	streams.push(
+		result.pipe(filter(stylelintFilter)).pipe(gulpstylelint(((message, isError) => {
+			if (isError) {
+				console.error(message);
+				errorCount++;
+			} else {
+				console.warn(message);
+			}
+		})))
+	);
+
 	let count = 0;
 	return es.merge(...streams).pipe(
 		es.through(

build/lib/stylelint/vscode-known-variables.json

@@ -54,6 +54,13 @@
 		"--vscode-chat-avatarForeground",
 		"--vscode-chat-checkpointSeparator",
 		"--vscode-chat-editedFileForeground",
+		"--vscode-chat-font-family",
+		"--vscode-chat-font-size-body-l",
+		"--vscode-chat-font-size-body-m",
+		"--vscode-chat-font-size-body-s",
+		"--vscode-chat-font-size-body-xl",
+		"--vscode-chat-font-size-body-xs",
+		"--vscode-chat-font-size-body-xxl",
 		"--vscode-chat-linesAddedForeground",
 		"--vscode-chat-linesRemovedForeground",
 		"--vscode-chat-requestBackground",
@@ -376,6 +383,7 @@
 		"--vscode-inlineChat-background",
 		"--vscode-inlineChat-border",
 		"--vscode-inlineChat-foreground",
+		"--vscode-inlineChat-regionHighlight",
 		"--vscode-inlineChat-shadow",
 		"--vscode-inlineChatDiff-inserted",
 		"--vscode-inlineChatDiff-removed",

build/stylelint.js

@@ -19,16 +19,30 @@ module.exports = gulpstylelint;
 function gulpstylelint(reporter) {
 	const variableValidator = getVariableNameValidator();
 	let errorCount = 0;
+	const monacoWorkbenchPattern = /\.monaco-workbench/;
+	const restrictedPathPattern = /^src[\/\\]vs[\/\\](base|platform|editor)[\/\\]/;
+	const layerCheckerDisablePattern = /\/\*\s*stylelint-disable\s+layer-checker\s*\*\//;
+
 	return es.through(function (file) {
 		/** @type {string[]} */
 		const lines = file.__lines || file.contents.toString('utf8').split(/\r\n|\r|\n/);
 		file.__lines = lines;
 
+		const isRestrictedPath = restrictedPathPattern.test(file.relative);
+
+		// Check if layer-checker is disabled for the entire file
+		const isLayerCheckerDisabled = lines.some(line => layerCheckerDisablePattern.test(line));
+
 		lines.forEach((line, i) => {
 			variableValidator(line, unknownVariable => {
 				reporter(file.relative + '(' + (i + 1) + ',1): Unknown variable: ' + unknownVariable, true);
 				errorCount++;
 			});
+
+			if (isRestrictedPath && !isLayerCheckerDisabled && monacoWorkbenchPattern.test(line)) {
+				reporter(file.relative + '(' + (i + 1) + ',1): The class .monaco-workbench cannot be used in files under src/vs/{base,platform,editor} because only src/vs/workbench applies it', true);
+				errorCount++;
+			}
 		});
 
 		this.emit('data', file);

src/vs/editor/browser/services/hoverService/hover.css

@@ -3,6 +3,8 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+/* stylelint-disable layer-checker */
+
 .monaco-workbench .workbench-hover {
 	position: relative;
 	font-size: 13px;

src/vs/editor/contrib/symbolIcons/browser/symbolIcons.css

@@ -3,6 +3,8 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+/* stylelint-disable layer-checker */
+
 .monaco-editor .codicon.codicon-symbol-array,
 .monaco-workbench .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); }
 .monaco-editor .codicon.codicon-symbol-boolean,