Allow CSS vars with colors

src/tests/themes.test.ts

@@ -82,6 +82,7 @@ class ThemeInfo {
 		new ThemeInfo('solarized_dark', 'Solarized-dark.tmTheme'),
 		new ThemeInfo('solarized_light', 'Solarized-light.tmTheme'),
 		new ThemeInfo('tomorrow_night_blue', 'Tomorrow-Night-Blue.tmTheme'),
+		new ThemeInfo('light_css_vars', 'light_css_vars.json', 'light_vs.json'),
 	];
 
 	// Load all language/grammar metadata

src/theme.ts

@@ -67,6 +67,24 @@ function isValidHexColor(hex: string): boolean {
 	return false;
 }
 
+function isValidCssVarWithHexColorDefault(potentialCssVar: string): boolean {
+	let match = /var\(--(.*),\s?(#[0-9]+)\)/i.exec(potentialCssVar);
+	if (match !== null) {
+		let hex = match[2];
+		return isValidHexColor(hex);
+	}
+
+	return false;
+}
+
+function colorValueToId(cssValue: string): string {
+	let match = /(var\(--.*),\s?(#[0-9]+)\)/i.exec(cssValue);
+	if (match !== null) {
+		return match[1] + ', ' + match[2].toUpperCase() + ')'
+	}
+	return cssValue.toUpperCase();
+}
+
 /**
  * Parse a raw theme into rules.
  */
@@ -128,12 +146,23 @@ export function parseTheme(source: IRawTheme | undefined): ParsedThemeRule[] {
 		}
 
 		let foreground: string | null = null;
-		if (typeof entry.settings.foreground === 'string' && isValidHexColor(entry.settings.foreground)) {
+		if (
+			typeof entry.settings.foreground === 'string' &&
+			(
+				isValidHexColor(entry.settings.foreground) ||
+				isValidCssVarWithHexColorDefault(entry.settings.foreground)
+			)
+		) {
 			foreground = entry.settings.foreground;
 		}
 
 		let background: string | null = null;
-		if (typeof entry.settings.background === 'string' && isValidHexColor(entry.settings.background)) {
+		if (typeof entry.settings.background === 'string'  &&
+			(
+				isValidHexColor(entry.settings.background) ||
+				isValidCssVarWithHexColorDefault(entry.settings.background)
+			)
+		) {
 			background = entry.settings.background;
 		}
 
@@ -236,7 +265,7 @@ export class ColorMap {
 		if (color === null) {
 			return 0;
 		}
-		color = color.toUpperCase();
+		color = colorValueToId(color);
 		let value = this._color2id[color];
 		if (value) {
 			return value;

test-cases/themes/light_css_vars.json

@@ -0,0 +1,18 @@
+{
+	"name": "Light Visual Studio",
+	"include": "./light_vs.json",
+	"settings": [
+		{
+			"scope": "comment",
+			"settings": {
+				"foreground": "var(--text-comment-color, #008000)"
+			}
+		},
+		{
+			"scope": "constant.numeric",
+			"settings": {
+				"foreground": "var(--text-const-num-color, #09885a)"
+			}
+		}
+	]
+}

test-cases/themes/tests/12750.html.result

@@ -1522,5 +1522,79 @@
 			"content": ">",
 			"color": "#FFFFFF"
 		}
+	],
+	"light_css_vars": [
+		{
+			"content": "<script",
+			"color": "#800000"
+		},
+		{
+			"content": " ",
+			"color": "#000000"
+		},
+		{
+			"content": "type",
+			"color": "#FF0000"
+		},
+		{
+			"content": "=",
+			"color": "#000000"
+		},
+		{
+			"content": "\"text/javascript\"",
+			"color": "#0000FF"
+		},
+		{
+			"content": ">",
+			"color": "#800000"
+		},
+		{
+			"content": "\twindow.alert(",
+			"color": "#000000"
+		},
+		{
+			"content": "'hello'",
+			"color": "#A31515"
+		},
+		{
+			"content": ");",
+			"color": "#000000"
+		},
+		{
+			"content": "</script",
+			"color": "#800000"
+		},
+		{
+			"content": ">",
+			"color": "#800000"
+		},
+		{
+			"content": "<script",
+			"color": "#800000"
+		},
+		{
+			"content": ">",
+			"color": "#800000"
+		},
+		{
+			"content": "\twindow.alert(",
+			"color": "#000000"
+		},
+		{
+			"content": "'hello'",
+			"color": "#A31515"
+		},
+		{
+			"content": ");",
+			"color": "#000000"
+		},
+		{
+			"content": "</script",
+			"color": "#800000"
+		},
+		{
+			"content": ">",
+			"color": "#800000"
+		}
 	]
 }

test-cases/themes/tests/13448.html.result

@@ -494,5 +494,19 @@
 			"content": "<ion-view><button-view/><font-face></font-face></ion-view>",
 			"color": "#FF9DA4"
 		}
+	],
+	"light_css_vars": [
+		{
+			"content": "<ion-view><button-view",
+			"color": "#800000"
+		},
+		{
+			"content": "/",
+			"color": "#000000"
+		},
+		{
+			"content": "><font-face></font-face></ion-view>",
+			"color": "#800000"
+		}
 	]
 }

test-cases/themes/tests/14119.less.result

@@ -678,5 +678,47 @@
 			"content": "}",
 			"color": "#FFFFFF"
 		}
+	],
+	"light_css_vars": [
+		{
+			"content": "#f",
+			"color": "#800000"
+		},
+		{
+			"content": "(@hm: ",
+			"color": "#000000"
+		},
+		{
+			"content": "\"broken highlighting in VS Code\"",
+			"color": "#A31515"
+		},
+		{
+			"content": ") {",
+			"color": "#000000"
+		},
+		{
+			"content": "    ",
+			"color": "#000000"
+		},
+		{
+			"content": "content",
+			"color": "#FF0000"
+		},
+		{
+			"content": ": ",
+			"color": "#000000"
+		},
+		{
+			"content": "\"\"",
+			"color": "#A31515"
+		},
+		{
+			"content": ";",
+			"color": "#000000"
+		},
+		{
+			"content": "}",
+			"color": "#000000"
+		}
 	]
 }

test-cases/themes/tests/COMMIT_EDITMSG.result

@@ -806,5 +806,67 @@
 			"content": "#",
 			"color": "#7285B7"
 		}
+	],
+	"light_css_vars": [
+		{
+			"content": "This is the summary line. It can't be too long.",
+			"color": "#000000"
+		},
+		{
+			"content": "After I can write a much more detailed description without quite the same restrictions on length.",
+			"color": "#000000"
+		},
+		{
+			"content": "# Please enter the commit message for your changes. Lines starting",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "# with '#' will be ignored, and an empty message aborts the commit.",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "# On branch master",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "# Your branch is up-to-date with 'origin/master'.",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "#",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "# Changes to be committed:",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "#\t",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "deleted:    README.md",
+			"color": "#A31515"
+		},
+		{
+			"content": "#\t",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "modified:   index.less",
+			"color": "#0451A5"
+		},
+		{
+			"content": "#\t",
+			"color": "var(--text-comment-color, #008000)"
+		},
+		{
+			"content": "new file:   spec/COMMIT_EDITMSG",
+			"color": "#09885A"
+		},
+		{
+			"content": "#",
+			"color": "var(--text-comment-color, #008000)"
+		}
 	]
 }