From dddc0db7c89d41ceb0c0ad0a5e37e2afadbf7901 Mon Sep 17 00:00:00 2001
From: johnsoncodehk <johnsoncodehk@gmail.com>
Date: Sat, 28 May 2022 19:41:35 +0800
Subject: [PATCH] feat: support syntax highlight for style variable injection

https://github.com/vuejs/rfcs/pull/231
---
 .../vscode-vue-language-features/package.json | 11 +++++
 .../vue-sfc-style-variable-injection.json     | 47 +++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 extensions/vscode-vue-language-features/syntaxes/vue-sfc-style-variable-injection.json

diff --git a/extensions/vscode-vue-language-features/package.json b/extensions/vscode-vue-language-features/package.json
index 440715cda..8e522c7b0 100644
--- a/extensions/vscode-vue-language-features/package.json
+++ b/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": [
diff --git a/extensions/vscode-vue-language-features/syntaxes/vue-sfc-style-variable-injection.json b/extensions/vscode-vue-language-features/syntaxes/vue-sfc-style-variable-injection.json
new file mode 100644
index 000000000..826e61aec
--- /dev/null
+++ b/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"
+}
\ No newline at end of file