feat: support syntax highlight for style variable injection

vuejs/rfcs#231

Author: johnsoncodehk

extensions/vscode-vue-language-features/package.json

@@ -139,6 +139,9 @@
 			},
 			{
 				"id": "vue-interpolations"
+			},
+			{
+				"id": "vue-sfc-style-variable-injection"
 			}
 		],
 		"grammars": [
@@ -221,6 +224,14 @@
 					"text.html.derivative",
 					"text.pug"
 				]
+			},
+			{
+				"language": "vue-sfc-style-variable-injection",
+				"scopeName": "vue.sfc.style.variable.injection",
+				"path": "./syntaxes/vue-sfc-style-variable-injection.json",
+				"injectTo": [
+					"source.vue"
+				]
 			}
 		],
 		"breakpoints": [

extensions/vscode-vue-language-features/syntaxes/vue-sfc-style-variable-injection.json

@@ -0,0 +1,47 @@
+{
+	"fileTypes": [],
+	"injectionSelector": "L:meta.property-value.css",
+	"patterns": [
+		{
+			"include": "#vue-sfc-style-variable-injection"
+		}
+	],
+	"repository": {
+		"vue-sfc-style-variable-injection": {
+			"begin": "\\b(v-bind)\\s*\\(",
+			"name": "vue.sfc.style.variable.injection.v-bind",
+			"end": "\\)",
+			"beginCaptures": {
+				"1": {
+					"name": "entity.name.function"
+				}
+			},
+			"patterns": [
+				{
+					"begin": "('|\")",
+					"beginCaptures": {
+						"1": {
+							"name": "punctuation.definition.tag.begin.html"
+						}
+					},
+					"end": "(\\1)",
+					"endCaptures": {
+						"1": {
+							"name": "punctuation.definition.tag.end.html"
+						}
+					},
+					"name": "source.ts.embedded.html.vue",
+					"patterns": [
+						{
+							"include": "source.js"
+						}
+					]
+				},
+				{
+					"include": "source.js"
+				}
+			]
+		}
+	},
+	"scopeName": "vue.sfc.style.variable.injection"
+}