feat: accurate style variables regexp

close #463
vuejs · Sep 8, 2021 · c7499d2 · c7499d2
1 parent 19fded9
commit c7499d2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/packages/vscode-vue-languageservice/src/parsers/cssBinds.ts b/packages/vscode-vue-languageservice/src/parsers/cssBinds.ts
@@ -16,17 +16,11 @@ export function parse(docText: string, ss: css.Stylesheet) {
 	function visChild(node: StylesheetNode) {
 		if (node.type === 22) {
 			const nodeText = docText.substring(node.offset, node.end);
-			const reg = /v-bind\s*\(\s*([^\s\)]*)\s*\)/g;
+			const reg = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g;
 			const matchs = nodeText.matchAll(reg);
 			for (const match of matchs) {
 				if (match.index !== undefined) {
-					let matchText = match[1];
-					if (
-						matchText.startsWith('"') && matchText.endsWith('"')
-						|| matchText.startsWith("'") && matchText.endsWith("'")
-					) {
-						matchText = matchText.substring(1, matchText.length - 1);
-					}
+					const matchText = match[2] ?? match[3];
 					const offset = node.offset + match.index + nodeText.substr(match.index).indexOf(matchText);
 					result.push({ start: offset, end: offset + matchText.length });
 				}

diff --git a/packages/vscode-vue-languageservice/testCases/cssVars.vue b/packages/vscode-vue-languageservice/testCases/cssVars.vue
@@ -4,4 +4,8 @@ const foo = 1;
 
 <style>
 .bar { color: v-bind(foo); }
+.bar { color: v-bind("foo"); }
+.bar { color: v-bind(foo + foo); }
+.bar { color: v-bind("foo + foo"); }
+.bar { color: v-bind(); }
 </style>
diff --git a/packages/vscode-vue-languageservice/tests/rename/cssVars.ts b/packages/vscode-vue-languageservice/tests/rename/cssVars.ts
@@ -23,6 +23,10 @@ const baz = 1;
 
 <style>
 .bar { color: v-bind(baz); }
+.bar { color: v-bind("baz"); }
+.bar { color: v-bind(baz + baz); }
+.bar { color: v-bind("baz + baz"); }
+.bar { color: v-bind(); }
 </style>
 `.trim(),
 });